Kool kicks
Kool kicks is a fully functional sneaker store. Where uou can find your perfect pair of casual shoes as well as sneakers. Browse a wide selection of trendy kicks, from classic to cutting-edge designs. Shop now and step up your style game.
Features
-
Authorization:
1.a Private routes for Admin or users
1.b Register/ Login and a Forgot Password. -
UI:
2.a A fully responsive UI for every screen sizes
2.b Funky design and a bit of a dynamic color palette. -
Database (MongoDB):
3.a All the data rendering on your screen is coming from a database not from some local dataset. -
Admin Panel:
4.a As a admin you can perform CRUD operations on categories as well as products and it will reflected back to the actual site. -
Integrated payment gateway:
5.a We have integrated a payment gateway as well to complete the whole experience ( Razorpay) -
Extras:
6.a A pretty product detail page.
6.b A cool checkout page with dynamic content.
6.c Filters based on categories, price as well as name.
Screenshots
Desktop Products Page:
Single Product Page::
Tech Stack : MERN
Technology and Packages used:
Front end:
- React.js – A component based js library to build UI.
- Toast – for notifications
- React Router – For creating internal routes ( obviously)
- React hooks – State management , navigation and orchestration.
Backend:
- Node.js – Js runtime
- Express – A node js frame work to make writing js in node easy.
- bcrypt and JTW – Password encryption and user Authorisation
Database:
- MongoDB – A NoSQL database
- mongoose – ODM library for MongoDB
API testing:
- Postman ( Preferred )
-Thunderclient
Hosting:
- Render( backend )
- Netlify ( frontend )
Installation
Install Kool-Kicks with npm
git clone 'git remote add origin https://github.com/PriyanshShrivastava/kool-kicks-frontend.git'
cd kool-kicks-frontend
npm install
npm run dev (assuming you have vite already installed)
To build for production
npm run build
To previw the build
npm run preview