Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Ming's Work on Personal API #32

Open
wants to merge 45 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
f664f93
Initial Heroku setup finish
rollba14 Sep 1, 2017
3dd0b3b
ready for heroku deploy attempt #1
rollba14 Sep 1, 2017
c2c239b
added initial api data and layout
rollba14 Sep 3, 2017
f276420
Added side-nav-bar with preview
rollba14 Sep 3, 2017
8e7ca10
Added Create and Delete features
rollba14 Sep 4, 2017
3572e2f
Finished CRUD, now need polish documentation
rollba14 Sep 4, 2017
d93d962
Used our own api endpoints to render html page with seed btn
rollba14 Sep 4, 2017
85a33b8
Completed all Req with proper documentation
rollba14 Sep 5, 2017
ffeaadb
fixed documentation URL
rollba14 Sep 5, 2017
c55f155
Updated ReadMe
rollba14 Sep 5, 2017
6b2db8a
Fixed readme and minor bug in seed btn
rollba14 Sep 5, 2017
1e526cb
improved coding style
rollba14 Sep 24, 2018
d6e38e4
full w auto h white bg on header css
rollba14 Sep 25, 2018
0d49b56
removed float and position on main-nav
rollba14 Sep 25, 2018
30d8874
btn width 49% and inline style
rollba14 Sep 25, 2018
bc28843
btn to dark color and centered main-nav
rollba14 Sep 25, 2018
47f7d45
positioned items on main-nav
rollba14 Sep 25, 2018
99b6fce
padding on main-nav & font change
rollba14 Sep 25, 2018
dbad1bc
removed margin on btn and lower line-height
rollba14 Sep 25, 2018
b2c2770
changed wrapper css
rollba14 Sep 25, 2018
7fc2123
0 margin 20 pad for api html
rollba14 Sep 25, 2018
5166ad0
styled up api documentation & cleaned up programming style
rollba14 Sep 25, 2018
4c8f854
removed row and col divs
rollba14 Sep 25, 2018
3d908ee
evenly space out card position
rollba14 Sep 25, 2018
a797a90
center align at main-content
rollba14 Sep 25, 2018
94a449f
added letter spacing to title page
rollba14 Sep 25, 2018
3338884
flatten corner and expanded line-height for main-nav
rollba14 Sep 25, 2018
3598ff7
change main-nav btn style
rollba14 Sep 25, 2018
1ed3809
changed btn line height
rollba14 Sep 25, 2018
8942ab1
cursor pointer
rollba14 Sep 25, 2018
ddc2964
moved reference link to main-nav
rollba14 Sep 25, 2018
bf32287
top45 side-bar css & keep main-nav on add story
rollba14 Sep 25, 2018
dd61e32
closed add form on submit & removed sliding effect on form
rollba14 Sep 25, 2018
040f220
updated seed data
rollba14 Sep 25, 2018
d06b359
updated api doc and programming styling
rollba14 Sep 25, 2018
57608e0
vertical align card
rollba14 Sep 25, 2018
8b96b0e
added padding to wrapper
rollba14 Sep 25, 2018
3c200e8
up z-index on form
rollba14 Sep 25, 2018
6d2cb0e
changed main nav to a bootstrap nav-bar
rollba14 Sep 25, 2018
f880d81
adjusted nav item line height and change navbar min-height/padding
rollba14 Sep 25, 2018
043e0f9
align navbar item with navbrand
rollba14 Sep 25, 2018
38f47b3
toggle addstory on click
rollba14 Sep 25, 2018
fea608d
updated nav-brand styling & collapse-md on navbar
rollba14 Sep 25, 2018
99944a2
updated alt for broken image link
rollba14 Sep 26, 2018
932df27
Update README.md
rollba14 May 30, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
node_modules

.DS_Store

Personal API Ideas

157 changes: 12 additions & 145 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,151 +1,18 @@
# <img src="https://cloud.githubusercontent.com/assets/7833470/10423298/ea833a68-7079-11e5-84f8-0a925ab96893.png" width="60"> Personal API

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**
Hello,

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.
This is mini API I created for one of General Assembly's project.

Please fork & clone this repo to get started.
My based URL for the api website is https://tranquil-springs-25959.herokuapp.com

## 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).
These are the following end points you can add on to the based URL.

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!):

```bash
# git add . -A
# git commit -m "detailed description of what I changed"
git push heroku master
heroku open
```

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

- **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
+ `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:
* **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
* `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 `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
* Create a `/search` endpoint
- e.g. `?q=mad+men` only returns tv shows with that in the title
- e.g. `?type=romance` only returns romance novels

#### Examples
An example API for 'Jon Snow' might have endpoints like:

JSON API Endpoint Response JSON
============= =============
GET /api/profile {
name: "Jon Snow",
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,
name: 'Defeat the wildlings',
type: 'quest',
opponents: [ 'Mance Rayder', 'Lord of Bones'],
status: 'resolved'
},
{
\_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?status=pending
[ { \_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.
* Use **jQuery** and **AJAX** to consume your Personal API.

* Use **Template Strings** and **Array Iteration** to render data to the page.

* 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!

<br>
<br>

<img src="https://media.giphy.com/media/mWUuD8qPSi5B6/giphy.gif" width="400">
endpoints: [
{method: "GET", path: "/", description: "Main index HTML page"},
{method: "GET", path: "/api", description: "Describes all available endpoints"},
{method: "GET", path: "/api/profile", description: "Data about me"},
{method: "GET", path: "/api/images", description: "Open source image data I found interesting online"},
{method: "GET", path: "/api/videos", description: "Open source video data I found interesting online"},

]
5 changes: 5 additions & 0 deletions controllers/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// index.js

module.exports = {
story: require('./storyController'),
}
51 changes: 51 additions & 0 deletions controllers/storyController.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// storyController


var db = require('../models');

// Retreat all data from db and send them whole db as JSON
// So front end can render via jQuery
function index(req, res){
db.Story.find({},function(err, stories){
if(err) {console.log(err); return}
res.json(stories);
});
}

function create(req, res){

var story = new db.Story({
name: req.body.story_title,
description: req.body.story_description,
link: req.body.story_link,
});
story.save(function(err,stored_story){
res.json(stored_story);
console.log(stored_story);
});

}

function show(req, res){

}

function destroy(req, res){
db.Story.findByIdAndRemove(req.params.story_id, function(err,story){
res.status(200).send("Success!");
});

}

function update(req, res){

}


module.exports = {
index: index,
create: create,
show: show,
destroy: destroy,
update: update
};
2 changes: 2 additions & 0 deletions models/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ mongoose.connect( process.env.MONGODB_URI || "mongodb://localhost/personal-api",
mongoose.Promise = global.Promise; // use native Promise
//
// module.exports.Campsite = require("./campsite.js.example");

module.exports.Story = require("./story.js");
15 changes: 15 additions & 0 deletions models/story.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// storySchema.js

var mongoose = require('mongoose'),
Schema = mongoose.Schema;

var StorySchema = new Schema({
name: String,
link: String,
description: String,
comments: String,
});

var Story = mongoose.model('Story', StorySchema);

module.exports = Story;
Binary file added public/images/LA_trip/baseball_dudes.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/LA_trip/casino_dessert.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/LA_trip/chinese_theatre.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/LA_trip/macaroon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/LA_trip/oscar.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading