hfaerber / palette_picker Goto Github PK

• Should be broken out into specific smaller steps when the time comes

4 GET endpoints

• 2 GET endpoints that serve up ALL of a single resource
  • GET all project folders api/v1/projects
  • GET all palettes . api/v1/projects/:id/palettes
• 2 GET endpoints that serve up a single record of a resource
  • GET single project folder api/v1/projects/:id
  • GET single palette . api/v1/palettes/:id
• 2 POST endpoints
  • POST new project folder api/v1/projects
  • POST new palette within a folder api/v1/projects/:id
• 2 PUT/PATCH endpoints
  • PUT/PATCH project folder api/v1/project/:id
  • PUT/PATCH palette api/v1/projects/:id/palettes
• 2 DELETE endpoints
  • DELETE project folder api/v1/projects/:id
  • DELETE palette api/v1/palettes/:id

consider changing is making the column in the palettes table project_ids

this would require updates to the seeds files as well

FE Dev User can add a new palette with the /projects/:id/palettes endpoint.

Path: api/v1/projects/:id/palettes
Required Request Body: { name: <String>, color_one: <String>, color_two: <String>, color_three: <String>, color_four: <String>, color_five: <String> }

• Test 422 status
• Test error response of { error: The expected format is: { name: , color_one: , color_two: , color_three: , color_four: , color_five: }. You are missing a "${requiredParameter}" property. }
• Build endpoint w/ 422 response status / error message
• Build endpoint w/ 500 response status / error message

Table 1

• Projects (folders)
• Primary key will tie to Palette's foreign key
• Columns:
  • primary id
  • name

Table 2

• Palettes
• Foreign key will tie to Projects primary key
• Columns:
  • primary Id
  • name
  • colors (array?)
  • projects_id (foreign key)

FE Dev User can fetch all projects from /projects endpoint (happy).

Path: /api/v1/projects
Required Request Body: N/A

• Test 404 status with response { error: Could not find palette with an id of ${request.params.id}}
• Build 404 response on endpoint
• Build 500 response on endpoint (but dont test)

• Install knex
• Install express
• Install nodemon
• Cors
• Babel? I vote no.

FE Dev User can add a new palette with the /projects/:id/palettes endpoint.

Path: api/v1/projects/:id/palettes
Required Request Body: { name: <String>, color_one: <String>, color_two: <String>, color_three: <String>, color_four: <String>, color_five: <String> }

• Test 201 status
• Test that it ended up in the database
• Build endpoint w success response status/message
• Update response to return the full object instead of just the id

FE Dev User can fetch all projects from /projects endpoint (sad).

Path: /api/v1/projects
Required Request Body: N/A

• Test
• 404 status - json({ error: Could not find resources at this path })
• 500 status - json({error})

FE Dev User can add a new project with the /projects endpoint.

Path: api/v1/projects/projects
Required Request Body: { name: }

Success:

• 201 status - json( { response(id) } )
• Update response to return the full object instead of just the id
  Error:
• 422 status - { error: Expected format: {name: }.}
• 500 status - server error - json({error})

FE Dev User can fetch all projects from /projects endpoint (happy).

Path: /api/v1/projects
Required Request Body: N/A

• Test 200 status and that response's name matches expected name
• Success: 200 status - json({response})

• server.js
• app.js
• app.test.js
• Migration(s)
• Seeds
• Seeds test file
• sample data

Implement FE Error handling to display error indicators to user if fetch calls fail for any reason

As a user, I want to be able to view my previous projects, create a new one, and create a new color palette.

• Create a component that displays the header, logout button, user info, and user projects.
• Render the PaletteChooser component within this component once it is complete.
• Redner the user's profile info.
• Render the user's projects and allow them to access them.
• Allow a user to create a new project.
• Allow a user to expand the projects container if the number of projects reaches a certain length.
• Set up api call to fetch project data when a project is clicked.
• Set up api call to post a project when a new one is created.
• Set up api call to post a palette when one is created.
• Style the component.
• Test the component.

Users would like a place to login to the application and to be told if their login was unsuccessful (and why). As a FE developer I should allow them to login and provide a clear and concise error message if their login fails.

• Setup stateful component with a name, password, and error message in state.
• Setup form validation.
• Setup api call to log the user in.
• Setup redirection to the homepage.
• Style component.
• Test component.

FE Dev User can rename a palette PATCH on /palettes/:id (happy)

Path: /api/v1/palettes/:id
Required Request Body:

{??? }

• Test 201 with message Palette has been updated successfully
• Test that it is updated in the database
• Build endpoint with 201 and message Palette has been updated successfully
• Add sample response to README

PUT - Fully update a specific resource in its entirety
PATCH - Update only a portion of a specific resource

FE Dev User can DELETE a palette from the /palettes/:id endpoint.

Path: /api/v1/palettes/:id
Required Request Body: N/A

• Test 200 status
• Test that it is no longer in the database
• Build endpoint w 200 response status/message of Palette with id ${____} has been removed successfully

UI/UX Design

W/ new fonts:

To see stlyes: /src/variables.scss

State/Props Layout:

TBD

FE Dev User can DELETE a project from the /projects/:id endpoint.

Path: /api/v1/projects/:id
Required Request Body: N/A

• Test 404 status
• Test 404 error response of { error: Could not find project with an id of ${request.params.id} }
• Build endpoint w/ 404 response status / error message
• Build endpoint w/ 500 response status / error message

As a user, I would lie some documentation to help me navigate the site.

• Include summary.
• Create app instructions including screenshots.
• Create dev setup instructions.
• Include contributors.

Unknown cause. Happens randomly but seems to happen on the 1st load of colors only.

Possibly a timing issue where it loads the div before the color has been generated?

Hex code is there but color not showing.

FE Dev User can fetch all palettes from /projects/:id/palettes endpoint.

Path: api/v1//projects/:id/palettes
Required Request Body:
N/A

Success:

• 200 status - json({response})

Error:

• 404 status - not found - json({ error: Could not found resource because project id ${request.params.id} not found})
• 500 status - server error - json({error})

• making use of automatic continuous integration with TravisCI

FE Dev User can DELETE a palette from the /palettes/:id endpoint.

Path: /api/v1/palettes/:id
Required Request Body: N/A

• Test 404 status
• Test 404 error response of { error: Could not find palette with an id of ${request.params.id} }
• Build endpoint w/ 404 response status / error message
• Build endpoint w/ 500 response status / error message

• Add api calls for
  • get all palettes
  • get single palette
  • post a palette
• Add passing tests for all api calls

FE Dev User can modify the name of a project with PATCH on /projects/:id (happy)

Path: /api/v1/projects/:id
Required Request Body:

{??? }

• Test 200 (or 201?) with message Project name has been updated successfully
• Test that it is updated in the database
• Build endpoint with 200 and message Project name has been updated successfully
• Add sample response to README

PUT - Fully update a specific resource in its entirety
PATCH - Update only a portion of a specific resource

• including each sad path options
• and the response content (not currently tested on delete, need to update)

User's would like to be able to view each project and see all of the palettes that have been added. User's should also be able to remove a palette from the project or delete the entire project.

• Set up the component structure.
• Create a delete request to the api to delete a team (should also delete any associated palettes).
• Create a delete request to the api to delete a specific palette.
• Style the component.
• Test the component.

• Set up file structure
• Add images
• Setup App component
• The app should utilize Router.

• Include documentation for api/server
• Include project details

FE Dev User can modify the name of a project with PATCH on /projects/:id (sad)

Path: /api/v1/projects/:id
Required Request Body:

{ }

• Test 404 status

• Test 404 error response of { error: Could not find project with an id of ${id} }

• Test 422 status

• Test 422 error response of { error:Expected body format is: { name: }. You're missing the required "name" property. }

• Build endpoint w/ 404 response status / error message

• Build endpoint w/ 422 response status / error message

• Build endpoint w/ 500 response status / error message

PUT - Fully update a specific resource in its entirety
PATCH - Update only a portion of a specific resource

Deploy FE to Heroku

FE Dev User can fetch a single project from /projects/:id endpoint.

Path: api/v1//projects/:id
Required Request Body:
N/A

Success:

• 200 status - json({response})

Error:

• 404 status - not found - json({ error: Could not find project id ${request.params.id}})
• 500 status - server error - json({error})

FE Testing: App, Login, Home

User's would like to create new palettes. Each color swatch should be able to be directly customized or randomly selected with a button. User's would like to be able to "lock" a color so that it cannot be changed when the random button is clicked. User's should be able to name this palette and add it to an existing project.

• Setup component and allow it to hold the selected hex codes in state.
• Setup a post request to add the color palette to the database.
• Setup a method that randomizes the "unlocked" colors.
• Style the component.
• Test the component.
• Make sure the component is rendered within the Homepage component.

FE Dev User can DELETE a project from the /projects/:id endpoint.

Path: /api/v1/projects/:id
Required Request Body: N/A

• Test 200 status
• Test that it is no longer in the database
• Build endpoint w 200 response status/message of Project with id ${____} has been removed successfully

Ensure responses are all in json format

• Developer must use query params on at least one endpoint, which would allow the user to narrow down the nature of their request or filter their results. So for example, you may have an endpoint like:

GET api/v1/merchants?areacode=80202

Which would limit the results to merchants in the 80202 area code.

• Add api calls for

  • Delete a project
  • Delete a palette
  • Update/Patch a project name
  • Update/Patch a palette name

• Add passing tests for the 4 api calls above

FE Dev User can rename a palette with PATCH on /palettes/:id (sad)

Path: /api/v1/palettes/:id
Required Request Body:

{??? }

• Test 404 status

• Test 404 error response of { error: Could not find palette with an id of ${id} }

• Test 422 status

• Test 422 error response of { error:Expected body format is: { name: }. You're missing the required "name" property. }

• Build endpoint w/ 404 response status / error message

• Build endpoint w/ 422 response status / error message

• Build endpoint w/ 500 response status / error message

PUT - Fully update a specific resource in its entirety
PATCH - Update only a portion of a specific resource

Currently our data is going into our database with whatever case its entered as.

In order for our custom endpoint color query to search properly, we may need to refactor to account for case sensitivity.

• Refactor so all Database data is UpperCase()?
• Then Uppercase() the color query for accurate comparison?

For improved UI/UX, we need to add a message that visually indicates that a palette/project has been successfully created.

FE Dev User can fetch all projects from /projects endpoint (happy).

Path: /api/v1/projects
Required Request Body: N/A

• Test
• Success: 200 status - json({response})

To be done after initial set up functionality is completed