hackyourfuture / class23-project

Starting Repo for MERN Stack - The Complete Guide

class23-project's Issues

Discount code

User story
As a shopper, I like using coupons, so I can buy cheaper products online and save some money.

Plan for technical implementation
Backend:

• Create new Collection (Discount code)
• Create new api for this collection

Frontend:

• Update create page.
• Update on cart page.

Customer Review (+ Pagination)

User story

Template: As a < type of user >, I want < some goal > so that < some reason >.
Example user story: As a user, I want to add a comment on a product and list all the previous comments so that I can share my experience and learn what other users experienced with that product.

Plan for technical implementation
Frontend

1. Create a comment form which includes
   a. A content input
   b. A submit button
2. Create a component to list existing comments which includes
   a. A header area for the user name and subheader for the time
   b. A content area for the content of the comment
3. Add a pagination component below comments
4. Create a state for the new comment
5. Create a state for the total comments to calculate pagination needs
6. Create a function to handle comment submit
7. Create a function to handle paginated comment requests

Backend

1. Update the Product Schema for comments:
   a. Add comments array that will have objects which include:
   • userId (The user who made the comment)
   • content (The content of the comment)
2. Update the product detail API endpoint
   a. Update GET API that also sends total comments and accepts page number as a query parameter
   b. Add a PUT API endpoint to handle new comment submits
3. Update product detail page initial props to be able pass page query parameter

Change Currency

User Story
User story: As a user, I want to choose a currency of product prices that I would like to use.
Plan for technical implementation.
...
1. Frontend
Create a toggle/dropdown for currency change:

• Create a toggle/dropdown element in the ProductList component.
• Create a hook to pass value of the toggle/dropdown element

2. Backend

• Take specify currency that user want from frontend as a props.
• Calculate specific currency price.
• Send calculated price to product list.

star-rating

User's Story
As a user, i would like to see the median rating of each product, rate the products that i find useful (or not useful) and see all the rated products on my account so that i know how much benefit i provided from this web app.

Plan for technical Implementation

• Front-End
  1 - 5 Star rating possibility for each product if the user already purchased it.
  2 - Add average ratings to the home page.
  3- Show the exact amount of ratings on each product page.

• Back-End
  1- Build another model called Ratings
  2 - Add ratings as a new value to Product model and pass Ratings model as a ref
  3 - Build api/ratings router for handling the data that comes from Rating Schema

BONUS

• Add google analytics if time is left.

Update-products

STORY
As the root/admin of the app, I want to update/edit current product information.

Technical implementation plan

Backend

1. Modified the function 'handlePutRequest()' within 'api/product' endpoint to update the product field values.

Frontend

1. Add ''edit icon'' to all product info fields.

• Product Summary component => Name, Price, MediaUrl
• Product Attributes component => Description

2. To edit each product info field, create a Modal component triggered by "edit icon" of each field.

• Add Input/Form in Modal to edit the related product field.
• Get the previous field value as the default and enable the user to make changes on it.
• Add an update button with functionality that makes Axios request with the updated field value as payload.
• If the request is successful and the related field is updated, inform the user with a success message.
• After a success message, pass the new value of the product to the page and rerender the page.
• If the new updated value is empty or invalid etc or there was an error while updating. , inform the user with an error message.
• Add close functionality to the Model with "close icon" & "Esc" key.

Delete Account

User Story

User story: As an admin/user, I want to be able to delete my account when I don’t want to use the site anymore.

Plan for technical implementation

Frontend

• Add delete account button to /account page
• When delete button clicked confirm or cancel delete
• If delete confirmed, deactivate account, delete cart and orders, signout and redirect to login page

Backend

• Add isActive field to User model
• Add handleDeleteRequest to api/account
  . Update User schema by setting isActive field to false
  . Delete user's cart
  . Delete user's orders
• Within api/login , check if the user is active and if not send error message indicating user doesn’t exist.
• Within api/signup, in case the user wants to signup with the email he deactivated before, check if the email exists and whether it is active or not. If not, activate it by setting isActive to true.
• Within api/users return only active users to be displayed on root user's account page.

Example Issue

User story

Template: As a < type of user >, I want < some goal > so that < some reason >.
Example user story: As a social media user, I want to directly talk to my international friends so that I can stay in touch with them.

Plan for technical implementation
Frontend

1. Create state for direct messages
2. Store conversation in localStorage to save session
3. ...

Backend

1. Make model for chat messages
2. Store log of every conversation in any given user's account
3. ...

(Don't forget to tag your team members + select the correct Project in this issue!)

Category Based Product Suggestion

User's Story
I would like to be suggested some products based on the product category that i'm looking for so that i can buy some other things that i needed but didn't realize or see before.

Front-End

• Make a suggestion list on product page that consiste of:

1. A header
2. Three list items
3. Add buttons

Back-End

• Send three suggestions on GET request to product page alongside comments and product which will:

1. Make suggestions based on the category of displayed product
2. Not display the same product everytime the user makes an api call to the same product page
3. Not be the same as the displayed product

Email Verification

The user’s story
As the owner of the app, I want all of the subscribed users to use a valid email address, so I can make sure that the subscriptions are from the real users. A working email address is crucial for common tasks, such as resetting passwords and account management.

Technical implementation plan

• Backend

1- Update the user model: Add isVerified attribute to user model.
2- Create token Verification Model which consists user id and token and set token to expire after 12 hours.
3. Update api/signup to send verification email to user if the user is registered successfully.

• create and save the token which is going to be used for verification
• use npm package nodemailer and sendgrid api for sending email
• as mail text, create a link which redirects the user to /confirmation page with the token.

4. Update api/login to check if the user is verified.
5. Create api/confirmation to set user models isVerified field to true.
6. Create api/resend to send a new confirmation email to user in case the token is expired.
7. Update signup page to add confirm password field to the form.

• Frontend

1. Update signup page to check if verification email is sent successfully and if so display a message to instruct the user to check his email for confirmation link.
2. Update login page to check if the user is verified and if not redirect the user to /resend page.
3. Create /confirmation page where the user is going to be redirected to when he clicked the confirmation link. Within this page
   • if the user is verified, create a link which redirects to /login page
   • if the token expired, create a link to redirect the user to the /resend page to send a new confirmation email.
   • show the error messages
4. Create /resend page to send new confirmation mail to user in case the confirmation token is expired.
5. Update signup page to validate password with the help of npm package “password-validator”. Set rules for the password such as it must contain at least 1 uppercase, 1 lowercase, 1 digit, 1 symbol, no spaces with min(8) number of characters.

Most viewed products (with chart)

User Story
User story: As an admin, I want to have a dashboard so that I can view top viewed 10 products and top viewed 3 products of each category with charts.
Plan for technical implementation

• Frontend

1. Create admin dashboard with steps:
   a. Create a dashboard menu item which can only be seen by admin and root users in header component.
   b. Create dashboard page (/dashboard) which includes:
   -Get top 10 products and top 3 products of each category with function getInitialProps() of dashboard page.
   -Create a tab and within panels
   . show top 10 products with bar chart
   . show top 3 products of each category with doughnut charts.
2. In /product page create a new function to increment number of views of the product.

• Backend

1. Update Product Schema to add field numberOfViews (type: Number)
2. Create api/view
   a. to increment number of views of a product(via handlePostRequest() )
   b. to get number of views of top 10 products and top 3 products of each category after successful authorization (via handleGetRequest())

Product Discount

User story

Template: As a < type of user >, I want < some goal > so that < some reason >.
Example user story: As an e-commerce user, I want to be able to get discounts under certain conditions so that I can buy related products at a cheaper price.

Plan for technical implementation

Frontend

• Discount Creation Page for admin/root users
• Offers page that lists all the discounts to the users
• A detailed route for a specific router
• A little mark on items that notifies the user about discount

Backend

• Discount API for CRUD operations
• Adjust Cart API for discounts
• Create Discount Schema
• Adjust Product & Cart Schemas

Social media login

User Story
As a , I want to so that I can .

Plan for Technical Implementation

• Frontend

1. ....

• Backend

1. ....

Hover on Cart to Add Product

STORY
As a user I want to add product to cart without get product page. so that I can easily be add product to my product cart.

Technical implementation plan
Frontend
Add, cart button on the image.
Add product when click button if user exist.
If user not exist, show a message and login, sign up button.
If added product to cart than show success message.
Use exists handle add product to card.

Backend
Use only put function inside cart api.

show-products-by-category

User story
As a web app user, I want to search for products based on their category, so that I can see all similar products and choose the best one for me.

Plan for technical implementation:

• Frontend
  1 - Add category select dropdown to the home page.
  2 - Add a pagination component to the filtered products.

• Backend
  1 - Add category as new value to product schema with string type.
  For example: [decoration, lights, living room, bedroom]

2 - Add category field in Create page that user can choose category from limited options.

3 - Update the product detail API endpoint.

Social Login

User story

Template: As a < type of user >, I want < some goal > so that < some reason >.
Example user story: As a user, I want to be able to signup/login with my existing Google or Facebook accounts so that I can easily be part of the application.

Plan for technical implementation
Frontend

Changes on the Sign-up/Login pages

• Add Google and Facebook Login Buttons
• Hide name, email, password fields until Email Login Button Clicked
• Communicate with Firebase to get a Firebase auth token
• Send the token from Firebase API to the backend
• Account Page - Update Password section

Backend

• Change User Schema to adjust new signup/login flows
• Create a new API that accepts Firebase API token to create a user / or authenticate an existing user
• Communicate with the Firebase API to make sure the token coming from the Frontend is valid.
• Update password API