hinchley2018 / learning-ecommerce Goto Github PK

Add routing to the frontend application

Adding a navbar as a reusable component.
Add test cases accordingly.

Adding navbar as a reusable component.

Doing the basic routing.

Returns a list of products
Each product has id, description, price

At first just return mock data (ask ChatGPT to create a list of ten products with those fields above)

Important: Make sure you have mongodb setup locally and seed it with data & the backend is running

Call the GET /products endpoint in the frontend
Use an env var for API URL since local and prod will be different
Set the products response into react state
Make sure the products display from react state

Setting up basic folder structure and adding tailwind config.

Order confirmation should look like this

Feel free to be creative with it or make it simpler if you need, its just inspiration

You can hard-code all the page state into useState or a Order Context Provider we will do that in another issue to retrieve from user

A user can add items to their cart by clicking add to cart button next to the item
Inside the cart dialog they can increase the quantity of each item they want to purchase but cannot exceed the total quantity that our store has
Inside the cart dialog they can remove the item by clicking remove button
Inside the cart dialog you can continue to checkout by clicking a button

In the backend project inside the get products endpoint
Install and use the https://www.npmjs.com/package/mongoose package to retrieve products from mongodb

To accomplish this task you will need a local mongodb setup, seeded with data

Create an endpoint /orders that accepts POST requests

An order is associated to a user id
User email allowing system to notify users when item moves
Each order has a list of products and a quantity of each product
Order total

Any missing fields or null should throw a 400 bad request with the field that is missing

If the request has all fields then you can insert the record into the orders collection

On success return the order id

Create a post endpoint that adds a product to the mongodb products collection

Use async await pattern

Handle a request that is missing required fields

Return the id(or the whole entry if easier) of the product from mongodb so that the client code can stay in sync with the db

GET /orders

Return all orders
Return a bad request if the userId is null
Search the orders collection with userId as a filter

Setting up basic front end folder structure and adding tailwind config.

Use playwright

We need a script that makes it easy for new developers to seed their local mongodb database

In addition this will allow existing developers to re-create mongodb database if schema or test data changes

We need products, and orders seeded at minimum

I haven't thought through users yet but potentially for now we just have a user id on the order

Displays the products from the users cart

And calculates the order total

When submit order is clicked a loading spinner is displayed

Meanwhile it makes a request to the backend with the order info

If there is an error it shows it

If order succeeds send the user to the order confirmation screen with the order id

This screenshot shows the idea/inspiration but you don't have to copy exactly

Setup swagger documentation
Replace the / route with the swagger page

Create a list of products using ChatGPT (should have id, image url, description, price)
Store these products in state

Create a reusable component products and then display the products from state in a responsive grid that works on desktop and mobile displays