Overview

• Name: SportShop

• Start time : from the announcement of the exercise in the Sun scholarship program

• Development time: 7 days (3/7/2023 - 9/7/2023 although the deadline is 11 days, there is a clash with the JLPT exam schedule)

• Reason for development: to practice web programming skills and combine passion for sports, hence the name SportShop

• Role: Full-stack

• Technologies used:

  • Frontend: Reactjs, React-Redux, React-Dom, react-toastify, axios, jwt-decode

  • Backend: Nodejs, MongoDB, cloudinary, stripe, jsonwebtoken, bcrypt, joi, express, moment

Features

Register

A user registration feature that requires three pieces of data: name, email, and password. If a user tries to create an account using an email that is already associated with an existing account, an error will occur. Similarly, if the password does not meet the required format, an error will be displayed.

If the user registration process is successful, the account information will be saved in MongoDB.

Login

There are similar functions to the registration process called "Login" where users only need to input their email and password. If the provided email or password is incorrect, an error message will be displayed.

Cart

The Home page displays the products on sale.

User can select Add To Cart to add products to cart.

You can press the + - button to increase or decrease the number.

Checkout

Click Check out to pay.

Fill in the payment information. You can choose the shipping option if you choose Next day air, it will cost an additional 15.00 US$ for shipping.

Check out is successful and the system will delete the existing carts.

Check data on MongoDB.

Admin

Login with Admin account will have features to control purchases.

Summary

OverView

Admin can see the sales status of User, Order and Earnings in the last 5 months.

Lastest Transcations

Admin can see the lastest Orders.

All Time

Admin can see the overall User, Product, Order, Earning.

Chart

Admin can observe the sales status in the last 7 days.

Products

Admin can view existing products, edit information, create new product, or view products.

• Create product

• Success

• View product

• Delete product

Orders

In Orders Admin can also use the same features as in products:

Admin can click Dispatch to switch pending status to Dispatched or click Deliver to switch to Delivered status

• View

Users

Admin can sort by ID, name, email.

• Delete User

• View User

Settings

Make sure you have installed nodejs, npm, npx or yarn

you can use

npm i

or

yarn

to pull the libraries used in the project recorded in the log file to your computer

Then, start build website in localhost

npm start

It's the frontend, read the backend, video demo, Live demo to better understand the project

Some information about the features:

• icon
• font
• cloudinary
• react-icon
• chart
• table
• dialog
• backend

Live Demo

Register, login and try to check out. If you find any error or want to see the Admin appearance, please contact me by pdathp14@gmail.com, thanks.