Git Product home page Git Product logo

code-challange-poesy's Introduction

Module 4 Code Challenge: Poesy

Demo

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

demo

Instructions

Welcome to Poesy, where your poetry masterpieces come to life! Our old front-end team laid down the foundations for our app, but it looks like they forgot all the functionality!

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

Setup

After unbundling 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/poems 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 created poems.
  2. I can show/hide the form to create new poems.
  3. I can create poems and they are still there when I refresh the page.
  4. I can mark poems as read which will change the text of that button to "Mark as unread".

Endpoints for Core Deliverables

GET /poems

Example Response:

[
  {
    "id": 1,
    "title": "The Song About the Song",
    "content": "This is the song about the show...",
    "author": "Bryan Higgins"
  },
  {
    "id": 2,
    "title": "My Pickle",
    "content": "...may my pickle stroll about hungry ...",
    "author": "Jon Glass"
  }
]

POST /poems

Required Headers:

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

Request Object:

{
  "title": "string",
  "content": "string",
  "author": "string"
}

Example Response:

{
  "id": 1,
  "title": "The Song About the Song",
  "content": "This is the song about the show...",
  "author": "Bryan Higgins"
}

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.

Note: If you are going to attempt these advanced deliverables, please be sure to have a working commit with all the Core Deliverables first!

As a user:

  1. I can add a poem to my favorites and see it on a separate list.
  2. I can delete a poem and they are still gone when I refresh the page.

Endpoints for Advanced Deliverables

DELETE /poems/:id

Example Response:

{}

code-challange-poesy's People

Contributors

sundus-the-coder avatar

Watchers

 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.