bethanyann / dsd-cohort-2024 Goto Github PK

• Create a new Recipe Details Modal component & UI Layout

• Create the click event on the Dashboard page's Recipe component that when clicked on will open up a new Recipe Details Modal component

• Create API request that will take the Recipe ID from the recipe that was clicked on and fetch the Recipe Details to be displayed in the Recipe Details Modal

• Create a new Recipe Details Modal and wire up the click event on the Dashboard page to open the recipe details when a Recipe is clicked on

Task:
Wire up the "Log In" button on the Login page to submit the user's information to the backend

Acceptance Criteria:

• When a user clicks on the "Log In" button to submit their information, a click event should fire that takes the user's input values and sends them in a payload to the backend's api route to log in a user (see the repository's endpoints.md located in the docs folder)
• A success message should display to the user if the backend sends a response with an auth token and the user's login information
• An error message should display to the user if the backend sends a response that includes an error or no token is present
• Upon a successful login, the site should redirect the user to the Dashboard page (if this isn't created yet just set up a route to forward to an empty Dashboard component for now)

Build out the base layout for the login page.

• Email input field
• Password field
• Snazzy Hero?

Task:

Add a route for the user login page using React Router.

Acceptance Criteria:

• There should be a route configured that when entered into a browser will route the page to the Login page
• There should be a Login link in the Navigation bar that will use this new route to redirect to the Login page

Include links to the "My Grocery List", "My Recipes" and "Dietary Preferences" Pages

Task:

Create the structure for the Menu on the left side of the Dashboard page

Acceptance Criteria:

• The page section should be responsive to different screen sizes
• The section should have three links to other pages in it:
• "My Grocery List"
• "My Recipes"
• "My Preferences"
• The pages to these links might not be created yet, so the links in this section can remain empty or use a placeholder

Screenshot from mockups for reference:

Create a Service interface and implementation for Ingredients to handle business logic.

Use Dataflow for reference.

• User model
• Recipe model
• Ingredients?

Add .gitignore to backend_application with relevant exclusion for Java and Maven.

Priority exclusions:

• target/ directory
• compiled class files ie. *.class

Other exclusions:

• IDE specific configs

This is the main feature for the User's Dashboard page:

• Connect Recipe API
  #22
• Create the Navigation Bar component
  #86
• Set up routing to direct a Logged-In User to the Dashboard Page
  #56
• Create basic UI layout for the Dashboard page
  #57
• Create the Menu on the left side of the Dashboard page
  #58
• Create the "Recipe Card" view in the main section of the Dashboard page
  #59
• Create the RecipeController file in the backend project
  #60
• Create the RecipeService file in the backend project
  #61
• Create the RecipeRepository file in the backend project
  #62
• Create the RecipeEntity file in the backend project
  #63
• Create the Dashboard's Search Bar functionality
  #64
• Save Recipe Card to a user's favorite recipes in the DB when the "+"
  #65

See this GitHub repo for a great Spring dataflow execution explanation:

https://github.com/Dissurender/spring-dataflow

Task:

Wire up the "Register" button on the Register page to submit the new user's registration information to the backend

Acceptance Criteria:

• When a user clicks on the "Register" button to submit their information, a click event should fire that takes the user's input values and sends them in a payload to the backend's /createuser api route
• A success message should display to the user if the backend sends a response with an auth token and the user's login information
• An error message should display to the user if the backend sends a response that includes an error or no token is present

This is the Main Feature for the user's Dashboard/My Recipes page displayed below:

• Set up routing to direct a currently logged in user to this view
  #56
• Create basic UI layout for Dashboard/My Recipes page
  #57
• Create Menu on left-hand side of page with links to the "My Grocery List", "My Recipes" and "Dietary Preferences" Pages
  #58
• Create the Search bar functionality that will first pull from the user's saved recipes in the DB and then pull from the API
  #64
• Create the Recipe Card view
  #59
• Wire up the API to the backend save a Recipe to a user's favorites if the "+" button is clicked
  #65
• Create the RecipeController file in the backend project
  #60
• Create the RecipeService file in the backend project
  #61
• Create the RecipeRepository file in the backend project
  #62
• Create the RecipeEntity file in the backend project
  #63

This task is for adding the routing to the user registration page using React Router.

Task:

In the Login component, after the backend returns a successful response, the user should be redirected to their Dashboard page

Acceptance Criteria:

• After the user submits their username/password to log in, they should see a success/failure message about their login status
• The Login component should check that the response from the backend was successful, and if it was, redirect the user to their Dashboard page
• This is related to both the Login functionality and the Dashboard page

Task:

Return a success message or token to the frontend based on the chosen user authentication method

Acceptance Criteria:

• When a user successfully logs in, the backend should create an authentication token
• The authentication token should be included in the payload returned to the frontend
• Also included in the payload should be the user's First & Last Name and Email Address.

This feature is to document what color scheme, branding options or site name the application has been given

Related Subtasks:

• Site Branding (Logo) & Project Name:
  #50
• UI Color Scheme:
  #49

Task:

Wire up the API to the backend save a Recipe to a user's favorites when the "+" icon is clicked

Acceptance Criteria:

• When a user clicks the "+" the User ID and Recipe ID will be sent in a payload to an endpoint in the backend
• An endpoint should be created to handle the payload and validate that both ID values were included in the payload
• This endpoint should handle saving the User ID & the Recipe ID associated with the recipe that was clicked on
• The backend endpoint should return an error response/message if there was an issue with saving the User with the associated Recipe ID
• The backend endpoint should return a success response/message if the data was successfully saved without issue

This will display recipes from the API in a "card" format for the user to scroll through

Task:

Create the basic layout for the User's Dashboard/My Recipes page

Acceptance Criteria:

• The layout should be responsive to different screen sizes
• The cards can display 3 static cards in this section, or it can be turned into a sort of "carousel" where the user can scroll through a few different options
• The cards should be pulled from the recipe API
• There should be a click event on the '+' button on the card that will send the recipe ID and the user ID in a payload to the backend to save the associated recipe into a user's favorites

Screenshot from mockups for reference:

See this GitHub repo for a great Spring dataflow execution explanation:

https://github.com/Dissurender/spring-dataflow

Write down some project name ideas and we can vote as a team for what we want this project to be called!

Task:

Come up with 1-5 names for the project

Acceptance Criteria:

• Have a list of project names to propose to the group
• Set up a poll in the team chat to have users vote

• Create the new "My Grocery List" page and set up routing to redirect to his page when the menu link on the Dashboard page is clicked
  #100
• Create basic UI layout for the "My Grocery List" page
  #101
• Wire up the Grocery Item section to pull from the User's stock list saved in the backend
  #102
• Set up the Search Bar functionality on this page to search through the User's saved stock list from the DB for display
  #103
• Set up the "Delete" button to remove the grocery item from the user's stored list - also have an "are you sure" confirm modal to ensure the user really wants to delete the list item
  #104

Upon a successful new user registration that passes all validation, create a new user in the database and send a success response back to the frontend which will allow the frontend to go ahead and log this new user in

Create an interface for Ingredients that extends JpaRepository

Use Dataflow for reference.

Task:

Create the basic layout for the User's Dashboard/My Recipes page

Acceptance Criteria:

• The page layout should be responsive to different screen sizes
• The page will contain areas for 3 separate components:
• Header component
• Left Menu component
• Main "My Recipes" component

Screenshot from mockups for reference:

Create an entity class that follows the ERD for ingredients.

Use Dataflow for reference.

• Create new "My Preferences" page and set up routing to redirect to this page when the menu link on the Dashboard page is clicked
• Create basic UI layout for the "My Preferences" page
• Wire up the Preferences toggles to save to the user's preferences table in the DB when they are turned on/off

• Create an ERD (Entity Relationship Diagram)
  #26

• Setup Postgres DB in Backend Project
  #17

Follow the Miro wireframe for the layout:

Related Subtasks:

• Set up Routes for Login page
  #36
• Create UI for Login page
  #37
• Create validation for the Login fields
  #38
• Wire up the Login submit button functionality to the backend API
  #39
• Set up backend validation (prevent duplicate usernames, send frontend an error message if username/password do not match)
  #40
• Choose how user authentication will be handled
  #34
• Set up code to retrieve user from the DB and log them in upon successful data; Return success message/token to frontend
  #41

What will be used to authenticate a user?

Some solutions send a token or something to the frontend. Choose a method that is commonly used with Spring Boot and implement it

This also goes along with the Login feature.

Create the API route for when a user logs in and implement validation on the payload

This could include checking to make sure the username/password match as well as sending an error message to the frontend if validation fails

Task:

Set up an endpoint in the backend to handle a user's registration payload

Acceptance Criteria:

• An endpoint should exist in the UserController to handle a user's login payload
• The endpoint function should include validation for the user's data:
• Username & password are not blank
• Username exists
• Username & Password match
• The function should include another method to match the user's entered password with the saved hashed password
• Return a token to the frontend upon a successful log in attempt
• Include the Token and user's First & Last Name in the payload returned to the front end.

The colors to be used in the site along with basic UI decisions need to be made and documented

Task:

Pick the UI colors to be used across the entire site

Acceptance Criteria:

• Choose Main color and Primary color
• Main font and Secondary font
• Link text colors (visited, hover, new)
• Header color (will it be primary or secondary with text colors)
• Menu color(s)
• Icon color(s)

Task:

Implement validation on the user's input data on the Login page

Acceptance Criteria:

• The validation should be checked when the user clicks on the "Login" button
• Validation should prevent any of the fields from being blank
• Validation should check that the email address is in the correct format if that is what the user is logging in with
• If the user's input data doesn't pass validation, display an error message to the user in the UI, alerting them to an issue
• If the user's input data passes validation, it can be sent in a payload to the Login fetch request

Create the initial functionality for bootstrapping test users to the database on start.

• Set up Routes for Registration page
  #29
• Create UI for Registration page
  #30
• Create validation for the Registration fields (username/password cannot be blank, reenter password, password fields have to match, etc)
  #31
• Wire up the Registration submit button functionality to the backend API
  #32
• Set up backend validation (prevent duplicate usernames, send frontend an error message if username already exists, etc)
  #33
• Choose how user registration authentication will be handled
  #34
• Set up backend code to create user from the DB and log them in upon successful data; Return success message/token to frontend
  #35

See this GitHub repo for a great Spring dataflow execution explanation:

https://github.com/Dissurender/spring-dataflow

This will involve getting an API key from the chosen recipe API, adding it to the environment variables file in the frontend, and then confirming via Postman or other API tool that the API requests are working

Task:

Create the environment variables and anything else needed to connect to the chosen recipe API. Link to the documentation: https://developer.edamam.com/edamam-docs-recipe-api

Steps to take to get this set up:

• Create a new account on the Edamam site. The screenshot below will show the choices, just put your own email address in the input field, create your own password and choose the "Recipe Search API" and "Developer" as the plan options
  

• Once you have successfully created an account, click on the Accounts button in the top right of the header, and you will see this modal. Click on the Go to Dashboard button here to navigate to the dashboard overview
  

• Once you are on the Dashboard page, click on the Applications link and you should see the API for the Recipe Search that you created earlier when signing up for an account. Click on the View button next to the Recipe Search API

• On this page, there will be two keys listed, you will need to copy these keys and store them in a file in the project.

This file is called an environment file. Go into your IDE of choice (IntelliJ or VSCode), open up the Frontend_Application, and create a new file at the root of this project called .env

In this file, you will put the two application keys from the Edamam api that you just copied. They will go into the file in this format:
APPLICATION_ID=1234567890 with the key name in all caps, followed by an equals sign and then the key from Edamam.
Make sure to put both keys into the .env file

• Since this .env file has keys in it that should stay private and not published to a public repository, this .env file should be added to the .gitignore file in the frontend project
• The keys can be privately shared between the cohort members, and each member should create their own local .env file to store the keys in, that way the .env file isn't published to GitHub in the repository.
• When you get the keys generated and set up, message the team in the chat to let them know you've got the API keys set up and can share with them
• Create a Pull Request in GitHub that includes the addition of the .env file to the .gitignore file in the Frontend_Application project, and double-check that the .env file didn't get added to the PR at all.
• That's it! You've gotten the API set up to be connected!

An Entity Relationship Diagram will show each "entity" or table that the database will hold, and their 1:1, 1:many or many:many relationships with the other tables.

It will also show each attribute, or column, that will be in each table and what data type each column will hold.

IE: A User entity will have a username: string, password: string etc and will have a 1:many relationship to the Recipes table

Follow the Miro mockup for this layout:

Create the API route for registering a user and implement validation on the payload

This could include preventing duplicate usernames or emails, and sending an error message to the frontend if validation fails

Task:

Set up an endpoint in the backend to handle a user's registration payload

Acceptance Criteria:

• An endpoint should exist in the UserController to handle a user's registration payload
• The endpoint function should include validation for the user's data:
• Username, email, users first name, users last name, password are not blank
• Username or email do not already exist
• The function should include another method to hash the user's password
• Save the user's data to the database
• Return a token to the frontend along with the username/email and the Firstname Lastname combination

Task:

Implement validation on the user's input data on the Registration page. This can be done as the user is typing, as well as when the user clicks the "Register" button to make sure the backend isn't sent bad data.

Acceptance Criteria:

• Validation should prevent empty or bad data from being submitted to the backend
• Validation should prevent any of the fields from being blank
• Validation should enforce length criteria on the Password fields
• Validation should check that the Password field includes numbers/special characters
• Validation should check that the Password and Confirm Password fields match
• Validation should check that the email address is in the correct format

Create the Controller to handle the ingredients' endpoints.

Use Dataflow for reference.

See this GitHub repo for a great Spring dataflow execution explanation:

https://github.com/Dissurender/spring-dataflow

Some IDEs add additional files/directories to a project. ie, IntelliJ adds a directory '.idea'
It would be a good idea to exclude these files.

• .idea
• .vscode
  and any other IDE specific directories

This will first pull in a user's saved favorites from the DB and then pull from the API