hinchley2018 / learning-ecommerce Goto Github PK
View Code? Open in Web Editor NEWSmall e-commerce project to learn full-stack development
License: MIT License
Small e-commerce project to learn full-stack development
License: MIT License
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.