Jimmy' API

README.md

@@ -1,17 +1,19 @@
-# <img src="https://cloud.githubusercontent.com/assets/7833470/10423298/ea833a68-7079-11e5-84f8-0a925ab96893.png" width="60"> Personal API - Weekend Lab
+# <img src="https://cloud.githubusercontent.com/assets/7833470/10423298/ea833a68-7079-11e5-84f8-0a925ab96893.png" width="60"> Personal API
 
-Your goal is to build a API about yourself. Your API will incorporate:
-* some basic details about you
-* `/api` endpoints that return JSON
-* RESTful Routing (GET, POST, UPDATE, DELETE)
-* CRUDing (of at least one resource)
+It's time to have some fun and play with the technologies you've learned in the past week. Your goal is to build a API about yourself. Your API will incorporate:
+* Well-documented **JSON API** Endpoints
+* A full set of **REST-ful Routes** (GET, POST, UPDATE, DELETE)
+* At least one **CRUD-able resource** (Create, Read, Update, Destroy)
+* and an `/api/profile` endpoint with some basic **details about you**
+
+Finally, you will **consume your API** using AJAX and **render the results** to the page using jQuery. You must complete *both* of these portions of the assignment.
 
 Please fork & clone this repo to get started.
 
 ## Part 0. Deploy to Heroku
 Before we start coding, our first goal together is to configure our application so that it can be deployed to Heroku (a web application host).
 
-Follow the instructions here: [Deploying Express Apps to Heroku](https://github.com/sf-wdi-25/notes/blob/master/how-tos/deploy-nodejs-app-to-heroku.md)
+Follow the instructions here: [Deploying Express Apps to Heroku](https://github.com/SF-WDI-LABS/shared_modules/blob/master/how-to/heroku-mean-stack-deploy.md)
 
 As you continue to work on this project, you'll need to remember to push your changes to heroku (just like you would with github!):
 
@@ -22,42 +24,61 @@ git push heroku master
 heroku open
 ```
 
-It's common for code to break "in production" (broken links, different environment, missing dependenies...), so do your best to debug!
+It's common for code to break "in production" (broken links, different environment, missing dependenies...), even if it worked in development, so do your best to debug! Let us know if you get stuck.
 
 ## Part 1. Personal API
 Now that we're deployed, it's time to start coding your "personal" api!
 
 #### Minimum Requirements
 
-- **Documentation**: You must create a README.md file that specifies what endpoints are available on your API, what your endpoints expect from the request (verb + route + data), and what they will respond with (structure of JSON). We really want to know how to use your API! And we _highly recommend that you do this first_!
-- A **profile endpoint** (`/api/profile`) that responds with:
+- **Documented API Endpoints**
+
+    - You must document your API endpoints. We really want to know *how* to use your API! And for starters, we need to know what endpoints exist! (Do this step first! _Plan plan plan!_)
+    - One cool way to do this is to create an endpoint at `/api` that describes all the available endpoints. We've set you up with an example in `server.js`. Make sure to update it to fill it in with your own information!
+        + Here's a good example student `/api` endpoint:
+         <img width="500" alt="example api documentation" src="https://cloud.githubusercontent.com/assets/1489337/22841538/dc0b7f26-ef86-11e6-9a56-013bbe51792a.png">
+
+        + See the [Open API Initiative](https://github.com/OAI/OpenAPI-Specification/blob/master/versions/2.0.md#paths-object-example) for what this looks like in practice.
+- **A Profile Endpoint** (`/api/profile`) that responds with *hard-coded* data:
+
     + `name` - a string
-    + `github_link` - a url to your github profile
-    + `github_profile_image` - the url of your github profile image
-    + `current_city`
-    + `family_members` - an array of family member objects
-        + e.g. `[{name: "foo", relationship: "father"}, {name: "bar", relationship: "mother"}]`
-- **At least one resource** that you can _*CRUD*_ using _*RESTful Routes*_
+    + `githubUsername` - a string
+    + `githubLink` - a url to your github profile
+    + `githubProfileImage` - the url of your github profile image
+    + `personalSiteLink` - a link to your personal site.
+    + `currentCity`
+    + `pets` - an array of your pets
+        + e.g. `[{name: "foo", type: "Cat", breed: "Siamese"}, {name: "bar", type: "Dog", breed: "Dalmation"}]`
+        + if you do not have any pets, please get creative, or use hobbies instead
+    + Please hardcode it! It would be seriously overkill to save a single profile to the database.
+- **At least one resource (mongoose model)** that you can _*CRUD*_ using _*RESTful Routes*_
     - That means endpoints for `index`, `show`, `create` `update`, `delete`!
     - Here are some ideas:
-        * Wish list (e.g. `gifts` or `wishes`)
-            - _id, description, price, amazon_link
-        * `books` you've read
-            - _id, title, author, genre, notes
-        * `quotes` you like, or `tweets`
-            - _id, text, date, author
+        * **RECOMMENDED:** `projects` that you have built for this class
+            - `_id`, name, description, githubRepoUrl, deployedUrl, screenshot
+        * `places` that you've lived or that are important to you
+            - `_id`, description, town, state, country, years, gps: {lat, lon}, photo
+        * `destinations` you've visited, or `vacations` you're planning
+            - `_id`, country, date, duration, photo
+        * `books` you've read or love
+            - `_id`, title, author, image, releaseDate, characters
         * `movies` or `shows` you like
-            - _id, title, season, director
-        * `projects` or `poems`
-            - _id, title, body, date
+            - `_id`, title, season, director
+        * `portfolioProjects` or `lyrics` you've written
+            - `_id`, title, body, date
+        * Wish list (e.g. `gifts` or `wishes`)
+            - `_id`, description, price, amazonLink
 
 All API Endpoints must return JSON.
 
+<!--- You will be able to see if your API is up and running because [this api aggregator](https://api-aggregator.herokuapp.com/) will be able to consume your data. Check back on it to see if it's working for your code! Note: This won't be set up until you send your instructors the name of your Heroku app! --->
+
+> **Pro-Tip**: One good strategy is to add the database *last*. Start with your api routes and some hard-coded data. Make sure it's working the way you want before tackling the database layer!
+
 #### API Stretch Goals
 * Profile info stretch goals
-    * Add a `days_old` field that calculates how many days old you are.
-    * Add an `is_awake` field that's only `true` between 8am and 10pm!
-    * Add an `is_hungry` field that's only `true` around lunch and dinner!
+    * Add a `daysOld` field that calculates how many days old you are.
+    * Add an `isAwake` field that's only `true` between 8am and 10pm!
 * CRUD resource stretch goals
     * Use query parameters to filter results from one of your CRUD endpoints:
         - e.g. `?limit=2` only return two results
@@ -72,71 +93,59 @@ An example API for 'Jon Snow' might have endpoints like:
     =============               =============
     GET /api/profile            {
                                   name: "Jon Snow",
-                                  github_link: "http://github.com/u-know-nothing-jon-snow",
-                                  current_city: "The Wall",
-                                  is_awake: false,
-                                  family_members: [ { name: 'Arya Stark', relationship: 'sister' }, { name: 'Bran Stark', relationship: 'brother' }]
+                                  githubLink: "http://github.com/u-know-nothing-jon-snow",
+                                  currentCity: "The Wall",
+                                  isAwake: false,
+                                  familyMembers: [
+                                    { name: 'Arya Stark', relationship: 'sister' },
+                                    { name: 'Bran Stark', relationship: 'brother' }
+                                  ]
                                 }
 
     GET /api/projects           [
                                  {
-                                    _id: 2,
+                                    \_id: 2,
                                     name: 'Defeat the wildlings',
                                     type: 'quest',
                                     opponents: [ 'Mance Rayder', 'Lord of Bones'],
                                     status: 'resolved'
                                  },
-                                 { 
-                                    _id: 3,
+                                 {
+                                    \_id: 3,
                                     name: 'Save the wildlings',
                                     type: 'campaign',
                                     opponents: ['the Night Watch', 'the Others'],
                                     status: 'pending'
                                  }
                                 ]
-    
-    GET /api/projects?limit=1   [ { _id: 2, name:'Defeat...' } ]
+
+    GET /api/projects?limit=1   [ { \_id: 2, name:'Defeat...' } ]
 
     GET /api/projects?status=pending
-                                [ { _id: 3, name:'Save...' } ]                                
-    GET /api/projects/2         { _id: 2, name:'Defeat...' }
+                                [ { \_id: 3, name:'Save...' } ]                                
+    GET /api/projects/2         { \_id: 2, name:'Defeat...' }
 
     POST /api/projects          etc
     PUT /api/projects/2         etc
     DELETE /api/projects/2      etc
 
+Make sure to spend time planning this part out!
 
 ## Part 2. Personal Dashboard
 
 #### Minimum Requirements
 Consume the Personal API you just created, and use it to build your own personal dashboard.
 
-* Create an `index.html` **homepage** that's linked to your main javascript and css files.
+* Create an `index.html` **homepage** that's linked to your main JavaScript and CSS files.
 * Use **jQuery** and **AJAX** to consume your Personal API.
-* Display **at least one image/gif** that you retrieved from your Personal API.
-* Create **at least one form**, so you can CRUD at least one of your resources.
-* **Make your momma proud**.
-
 
-## Part 3. Go Crazy Stretch Goals
-* What's the `current_weather` like in your `current_city`? Use this [Weather API](https://developer.forecast.io/). You can decide whether you want to do a front-end (client-side) integration, or a back-end (server-side) integration with the API.
-* Add a `most_recent_tweet` or a `most_recent_instagram` field and consume the [Twitter API] or the [Instagram API] _on the server side_ (hint, you'll need to use the [Request library](https://github.com/request/request)).
-* Embed your favorite youtube videos or soundcloud/spotify tracks.
+* Use **Template Strings** and **Array Iteration** to render data to the page.
 
-##Recommended File Structure
+* Display **at least one image/gif** that you retrieved from your Personal API.
+* Create **at least one form**, so you can CRUD at least one of your resources.
+* Get rid of that ugly blue background. Style it up!
 
-_A good express file tree structure_:
+<br>
+<br>
 
-```
-├── server.js  // your server code
-├── package.json    // lists dependencies; changed by npm install --save somePackage
-├── public  // i.e. client-side
-│   ├── images  // images to serve to client
-│   ├── javascripts
-│   │   └── app.js   // client-side javascript file
-│   └── stylesheets
-│       └── style.css
-├── vendor // includes jQuery & bootstrap if we choose not to use CDN
-├── views  // html files that we'll serve
-│   ├── index.html
-```
+<img src="https://media.giphy.com/media/mWUuD8qPSi5B6/giphy.gif" width="400">

models/campsite.js.example

@@ -0,0 +1,10 @@
+// var mongoose = require('mongoose'),
+//   Schema = mongoose.Schema;
+
+// var CampsiteSchema = new Schema({
+//   description: String
+// });
+
+// var Campsite = mongoose.model('Campsite', CampsiteSchema);
+
+// module.exports = Campsite;

models/index.js

@@ -0,0 +1,5 @@
+var mongoose = require("mongoose");
+mongoose.connect( process.env.MONGODB_URI || "mongodb://localhost/personal-api", {useMongoClient: true});
+mongoose.Promise = global.Promise;  // use native Promise
+
+// module.exports.Campsite = require("./campsite.js.example");

package.json

@@ -1,19 +1,24 @@
 {
-  "name": "express_self_api",
+  "name": "express-personal-api",
   "version": "1.0.0",
-  "description": "Building an API about yourself",
+  "description": "Build an API about yourself",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sf-wdi-25/express_self_api.git"
+    "url": "git+https://github.com/SF-WDI-LABS/express-personal-api.git"
   },
-  "author": "WDI 25",
+  "author": "GA SF WDI",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/sf-wdi-25/express_self_api/issues"
+    "url": "https://github.com/SF-WDI-LABS/express-personal-api/issues"
   },
-  "homepage": "https://github.com/sf-wdi-25/express_self_api#readme"
+  "homepage": "https://github.com/SF-WDI-LABS/express-personal-api",
+  "dependencies": {
+    "body-parser": "^1.15.0",
+    "express": "^4.13.4",
+    "mongoose": "^4.4.10"
+  }
 }

seed.js

@@ -0,0 +1,15 @@
+// This file allows us to seed our application with data
+// simply run: `node seed.js` from the root of this project folder.
+
+// var db = require('./models');
+
+// var new_campsite = {description: "Sharp rocks. Middle of nowhere."}
+
+// db.Campsite.create(new_campsite, function(err, campsite){
+//   if (err){
+//     return console.log("Error:", err);
+//   }
+
+//   console.log("Created new campsite", campsite._id)
+//   process.exit(); // we're all done! Exit the program.
+// })

server.js

@@ -2,24 +2,38 @@
 var express = require('express'),
     app = express();
 
-// serve static files from public folder
-app.use(express.static(__dirname + '/public'));
+// parse incoming urlencoded form data
+// and populate the req.body object
+var bodyParser = require('body-parser');
+app.use(bodyParser.urlencoded({ extended: true }));
+
+// allow cross origin requests (optional)
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
+app.use(function(req, res, next) {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+  next();
+});
 
 /************
  * DATABASE *
  ************/
 
-// your hardcoded data here
+// var db = require('./models');
 
 /**********
  * ROUTES *
  **********/
 
+// Serve static files from the `/public` directory:
+// i.e. `/images`, `/scripts`, `/styles`
+app.use(express.static('public'));
+
 /*
  * HTML Endpoints
  */
 
-app.get('/', function homepage (req, res) {
+app.get('/', function homepage(req, res) {
   res.sendFile(__dirname + '/views/index.html');
 });
 
@@ -28,13 +42,19 @@ app.get('/', function homepage (req, res) {
  * JSON API Endpoints
  */
 
-app.get('/api', function api_index (req, res){
+app.get('/api', function apiIndex(req, res) {
+  // TODO: Document all your api endpoints below as a simple hardcoded JSON object.
+  // It would be seriously overkill to save any of this to your database.
+  // But you should change almost every line of this response.
   res.json({
-    message: "Welcome to my personal api!",
-    documentation_url: "https://github.com/sf-wdi-25/express_self_api/README.md", // CHANGE THIS TO LINK TO YOUR README.md
-    base_url: "http://YOUR-APP-NAME.herokuapp.com",
+    woopsIForgotToDocumentAllMyEndpoints: true, // CHANGE ME ;)
+    message: "Welcome to my personal api! Here's what you need to know!",
+    documentationUrl: "https://github.com/example-username/express-personal-api/README.md", // CHANGE ME
+    baseUrl: "http://YOUR-APP-NAME.herokuapp.com", // CHANGE ME
     endpoints: [
-      {method: "GET", path: "/api", description: "Describes available endpoints"}
+      {method: "GET", path: "/api", description: "Describes all available endpoints"},
+      {method: "GET", path: "/api/profile", description: "Data about me"}, // CHANGE ME
+      {method: "POST", path: "/api/campsites", description: "E.g. Create a new campsite"} // CHANGE ME
     ]
   })
 });
@@ -43,7 +63,7 @@ app.get('/api', function api_index (req, res){
  * SERVER *
  **********/
 
-// listen on port 3000
+// listen on the port that Heroku prescribes (process.env.PORT) OR port 3000
 app.listen(process.env.PORT || 3000, function () {
-  console.log('Express server is running on http://localhost:3000/');
+  console.log('Express server is up and running on http://localhost:3000/');
 });

views/index.html

@@ -7,21 +7,21 @@
     <title>Blank</title>
 
     <!-- STYLESHEETS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/styles/styles.css">
 
     <!-- VENDOR SCRIPTS -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 
     <!-- APPLICATION SCRIPTS -->
-    <script src="js/app.js"></script>
+    <script src="/scripts/app.js"></script>
   </head>
   <body>
     <div class="container">
       <div class="row">
         <div class="col-md-8 col-md-offset-2">
           <h1>Under Construction</h1>
+          <h4><a href="/api">Read My API Documentation</a></h4>
         </div>
       </div>
     </div>