Code Monkey home page Code Monkey logo

phase-2-cc-practice-comic-collector's Introduction

Phase 2 Practice Code Challenge: Comicbook Collector

Demo

Use this gif as an example of how the app should work.

Demo GIF

Instructions

This is the Comicbook Collector, a chance for you to share your comicbook collection with the world! Here you can see your comics collection and add new comics, however some of the functionality isn't quite there yet and it's up to you to make it work...

Your job will be to make our app work according to the user stories you will find in the Core Deliverables section.

Setup

After forking and cloning the project:

  1. Run npm install in your terminal.
  2. Run npm run server. This will run your backend on port 8004.
  3. In a new terminal, run npm start. This will run your React app on port 8000.

Make sure to open http://localhost:8004/comics in the browser to verify that your backend is working before you proceed!

The base URL for your backend is: http://localhost:8004

Core Deliverables

As a user:

  1. When the app starts, I can see all currently added comics.
  2. When I click on a comic book's image or title, it toggles between showing the image and the title / issue number.
  3. I can create comics and they are still there when I refresh the page.
  4. I can remove a comic from the collection by clicking "Remove" and it will persist when the page is reloaded.

Endpoints for Core Deliverables

GET /comics

Example Response:

[
  {
    "id": 1,
    "title": "The Incredible Hulk",
    "issue": "1",
    "image_url": "https://i.annihil.us/u/prod/marvel/i/mg/9/a0/59933ea5b5c2e/clean.jpg"
  },
  {
    "id": 2,
    "title": "The Incredible Spiderman",
    "issue": "1",
    "image_url": "https://i.annihil.us/u/prod/marvel/i/mg/d/40/5196582d03800/clean.jpg"
  }
]

POST /comics

Required Headers:

{
  "Content-Type": "application/json"
}

Request Object:

{
  "title": "string",
  "issue": "string",
  "img_url": "string"
}

Example Response:

{
  "id": 1,
  "title": "Detective Comics",
  "issue": "1",
  "img_url": "http://batman-image-here.png"
}

DELETE /comics/:id

Example Response:

{}

Advanced Deliverables

These deliverables are not required to pass the code challenge, but if you have the extra time, or even after the code challenge, they are a great way to stretch your skills.

As a user:

  1. I can click a button to bring up a form to edit the comic. This change persists.
  2. I can click a button to 'favorite' a comic and this is marked in some way. This persists.

phase-2-cc-practice-comic-collector's People

Contributors

brewchetta avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.