Skip to content

Ecommerce website with React.js, Redux and REST API

Notifications You must be signed in to change notification settings

mantleTycoon/onlineShop

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

About Project

Project Name: sam's accurium (Online Shopping Cart)

Technology:

Frontend:

  • HTML
  • CSS
  • React.js
  • Redux
  • Redux-thunk
  • React-bootstrap

Backend:

  • REST API
  • JWT
  • Middleware
  • MongoDB


Features Admin:

  • Admin Panel
  • Admin Login
  • Admin Profile
  • Add New Admin
  • Order Management
  • User Management
  • Add Products
  • Update Products
  • Logout


User Interface

  • Home Page
  • Product Details & Review Products
  • User Login & Signup
  • Update User Profile
  • Add Shipping Address
  • Cart
  • Payment Method
  • Order History
  • Contact
  • Logout


Project Login Information
User: Email: [email protected] Password: 123456
Admin: Email: [email protected] Password: 123456

Project Screenshots:

Homepage: User can find their products from homepage

homepage.png

Product Details and Review: After click on a product, users can see the product details and review. After signin, user can write review for a product

product-details-and-review-products.png

SignIn page: User and Admin can singin though this page.

real-singin.png

Signup Page: User can create profile from this page.

signin.png

My Cart: User can add their products in their cart. User can’t purchase products without login.


cart.png

Shipping Address: User has to fill the shipping Address form to get the products.

shipping-page.png

Place Order: After select the payment method, user get the place order page and able to pay via online payment system.

order-details.png

Update Profile and Order History: User and Admin can update their profile information and see order history from this page.

update-profile.png

Admin User Management: Admin can manage user information.

update-user-information.png

Admin Order Management: Admin can manage orders and update delivery status.

update-order-managment.png

Admin Add New Admin: Admin can add new admin from users profile.

update-add-admin.png

Admin Add Product: Admin can add new products and update product information.

update-add-product.png

Key learning: Redux, Redux-thunk, Middleware, JWT, MongoDB

Purpose: learning purpose.

Uniqness: Frontend Design & content.

improvement opportunity:

  • I use old redux method here. Redux created so many complexity and it is so time consuming for the boilerplate code. I will do it for learnnig but context api can nicely handel the state or I will love to use redux tool kit next of my projects.
  • Cuopn is very important part of any Ecommerce for imporve their marketing process. I will like to add cupon managment system in the next version.
  • Create bluk action for admin is also important part of Admin pannel. It should be added in the next.
  • Product life cycle is important for analytcis the businness growth. It also in my next to do plan list.

How to install

  • Download or Clone this repo
  • Run this command in the root and frontend floder
npm install
  • Create .env file in root
  • .env example
MONGO_URI=
NODE_ENV=
PORT=
JWT_SECRET=
  • Import seed data
npm run data:import

  • Run this command
npm run dev

About

Ecommerce website with React.js, Redux and REST API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.5%
  • CSS 2.2%
  • HTML 1.3%