Bookmarks

General Assembly Logo

Bookmark'd

Your goal for this fullstack homework is to build a bookmark app that lets users add a title and a link to save websites in one neat list.

Tonight Create a REST API with Full Crud

URL HTTP Verb Action Notes
/api/bookmarks/ GET index INDEX when a user types localhost:3000/api/bookmarks in browser this route shows a list or index of all bookmarks
/api/bookmarks/:id DELETE destroy DELETE initiates a delete request through a form submission with action = http://localhost:3000/api/bookmarks/:idOfbookmark and allows the application the ability to delete a bookmark
/api/bookmarks/:id PUT update UPDATE initiates a put request through a form submission with action = http://localhost:3000/api/bookmarks/:idOfbookmark and allows the application the ability to Update data about a bookmark
/api/bookmarks POST create CREATE initiates a post request through a form submission with action = http://localhost:3000/api/bookmarks/ and allows the application the ability to Create a bookmark
/api/bookmarks/:id GET show SHOW when a user types localhost:3000/api/bookmarks/:idOfbookmark shows the user an Individual bookmark in the browser

Bookmark'd

Step 1

  • Connect React Application to API

Step 2

  • Style React Application

Step 3

  • Add Authentication User Model and Password to Bookmarks

Step 4

  • Allow Users to Comment On Other Users Bookmarks with Related Mongoose Models (Markdown to Follow)

Due 12/22/2022

The Bookmarks App

You will be building an app that lets users add a title and a link to save websites in one neat list. When users click on a title, it should take them to the linked website.

:exclamation: GOTCHA - when testing it out, note that your links must start with http or https or else it will error!

Example:

✨ Fun Fact: This homework was inspired by a coding challenge used during a company's hiring process. So, treat it like you're trying to get that job!

MVP

Listed below is the basic required functionality that your Bookmark'd app should have. Some of the user stories are purposefully ambiguous to allow you all to ‘solve’ the problems in a way that is intuitive and makes sense to you, as opposed to just checking off specific steps from homework.

Express API

  • You should have a model for bookmarks that has the following schema:

    title: string
url: string

  • You should have routes for...

    • Index: Getting all bookmarks
    • Show: Get a single bookmark
    • Create: Posting a new bookmark
    • Delete: Deleting a bookmark
    • Update: Updating a bookmark
    • Make sure you TEST ALL ROUTES with postman or CURL BEFORE you move onto creating the frontend!

React Frontend User Stories

  • As an unauthenticated user I can login, or if I have never signed up I can sign up for an account.
  • As a user, I can see a list of all my bookmarks when I visit the page
  • As a user, I can click on one of my bookmarks and have it take me to the linked website
  • As a user, I can create a new bookmark and see that it immediately loads on the page so that I know I successfully added a bookmark
  • As a user, I can delete a bookmark so I can keep my list relevant
  • As a user, I can update a bookmark in case I made a typo or the URL changed

Application Technical Requirements/Deliverables

  1. A functioning full-stack, single-page application hosted on Heroku, Render, Azure, Google Cloud, AWS or Digital Ocean .

  2. Incorporate the technologies of the MERN-stack:

    • MongoDB/Mongoose
    • Express
    • React
    • Node
  3. Have a well-styled interactive front-end that communicates with the Express backend via AJAX.
  4. Implement jwt token-based authentication - "...a user can sign-up, log in & log out".
  5. Implement authorization by restricting functionality to authenticated users. Only the user who created teh bookmark should be able to see them and perform crud operations on them.

Best Practices

  • Write DRY code.
  • In a SPA, communication with the backend is via AJAX. Build RESTful APIs to CRUD your data entities (resources) and perform other functionality via AJAX. In a React app, those AJAX calls should be made from "service" modules, not components.
  • Be consistent with your code style.
  • Clearly name variables and functions - remember, variables are usually named as nouns and functions as verbs.
  • Write well-formatted CODE. Properly formatting your code makes it more readable. Improperly formatted code infers sloppiness.
  • Comment your code where it makes sense. Most code is self-documenting, however, comments help explain complicated code.