Skip to content

abdilmajid/react-OnlineStore

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Store App

This is a Full Stack Application that uses React/Redux for the frontend, Node-Express and PostgreSQL for the backend

store4


Table of Contents


Synopsis

This project is a simple ecommerce shop that allows visitors to select from a wide veriety of products. The users can add and remove items from thier cart, and when thier purchases are complete they enter thier name and email. This will then send them to an order page that shows thier purchases with thier total.

Tools Used

Client Side

react-logo redux-logo es6-logo redux-form(Redux-Form) react-router bootstrap-logo

Server Side

node Express node-postgres (Node-Postgres)

Database

postgres postgres

Other Tools

Heroku npm git github-logo

Walkthrough

⭐ When a user enters the app they see a list of all available products.

homepage


⭐ Here they can add or remove different items. They can also expand the See item details button for summary info on the selected item. When an item is added or removed from the cart the cart button changes to reflect the current state of the cart.

homepage


⭐ After items are selected and the Go to cart button is selected, a list of all items are displayed. The table includes items selected, quantity of the selected items and the price of the given items. This page also includes the total price of cart.

homepage


⭐ From this page you can increase or decrease the quantity of a given item, or remove the item from the cart. These changes are reflected in the quantity section of the table aswell as the total price of the cart. If the user wanted to add other items to the cart they would click back add those items. The state of the cart only changes when items are added or removed. If additional items are added to the cart the table and the total cart price would reflect those changes.

homepage


⭐ After the user is complete they would click the Check-Out button. The checkout page asks for the users Name and Email.

homepage


Redux-forms is used to collect all this information to be sent to the server. Node and Express are used to handle all http requests. I use Node-Postgres to connect to the PostgreSQL database.

⭐ So the form is sent to the server which inserts that information to the database.

homepage


⭐ The server then queries the database for specific data which the frontend will use.

homepage


⭐ I Use the above info to construct the Order page. When the user is in the order page, their name and contact info appears, as well as the items purchased (including the total cost of each individual item). The Cart button is reset to zero as well.

homepage


The application also uses local storage for state persistence. So if the user accidentally leaves/refreshes the page their data is not erased. This also has the added benefit of not having to reload all the assets if the app has been visited already

Releases

No releases published

Packages

No packages published