I have started this project with the purpose of learning how to create and structure a full-stack Web App of a mid-level complexity by integrating multiple technologies such as React, Redux, Redux-Thunk, React Hooks, React Router Dom, MaterialUI and more technologies.
I've tried to follow best practices as much as possible and I've tried to make it scalable and maintainable. I've also added a voice assistant (name Alan AI) from this website for interacting with the app(althought not a full blown Voice Assistant) but still made it to do some task such as searching product, adding item to cart, removing item from cart, view cart etc.
I put a lot of effort into it and I hope that you could like it.
The Web App redirects you to a Homepage which list products, each product tile represents a game: you can click on it's name and you will be redirected to the selected game/product detail component, a page that gives all details about the choosen product including images, review, recommended items and more.
But in order to get most out of the app you need to sign up or to sign in: you can sign in with your custom account or with Demo account. Once you are logged in, you will be able to successfully make purchase of product, you will be provided all debit/credit details on payment page.
Also added Admin dashboard through which admin can manage inventory, orders, reviews, users and more.
Go try it and please let me know if you enjoyed it with a ⭐️, I would appreciate it a lot.
Here you can find the demo links:
Email: jessica@gmail.com
Password: jessica
Email: tony@gmail.com
Password: 123456
I have also added buttons that lets you sign in anonymously.
✔️ Display products with Pagination
✔️ Detail page for informations about the selected product
✔️ Advance product search and filtering using Ratings, Category and Price
✔️ Add/Remove to/from "Cart" functionality
✔️ Get Recommended products
✔️ Beautiful UI Design
✔️ JWT Cookie based Authentication
✔️ User Sign In, Sign Up & Password Reset feature
✔️ Use of Funtional Component with React hooks
✔️ State management using Redux and Data persistence (Local storage)
✔️ Responsive layout
✔️ Swipeable product image gallery
✔️ Cool loading spinner
✔️ Support Stripe/PayPal secure server side payment
✔️ Uses React Lazy loading and Suspense
✔️ Also Integrated AI Voice Assistant to use the app
- React
- React Hooks
- React Router
- Redux
- Redux Thunk - Asynchronous Redux
- Material UI
- NodeJS
- Express
- MongoDB Atlas
- Stripe API
- PayPal
- Mailtrap
- Heroku - Responsible for the deployment
- Clone the project repo
git clone https://github.com/sanyams0007/ignite-gaming
-
From root of project Go to the client directory
cd client
-
Install dependencies
npm install
-
Create an
.env
file in the root of the client based on.env.sample
. -
Run client app
npm start
-
Go to the root of project and Install dependencies
npm install
-
From root of project Go to the server directory
cd server
-
Create a
config.env
in the/server/config/
directory based on.env.sample
in the directory. -
Run server app
node server.js