| TechName | Title | Description | Technologies | ProjectLink | AdminLink | GithubLink | Image | ClientImage | ClientVideo | AdminImage | AdminVideo | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
FULL-STACK-MonoRepo |
ShopIT E-commerce & Admin |
It's a full-stack web application that allows users to create an account, log in, and create an order. The application also allows users to view their order history, and view their cart. The application is built with Node.js, Express, MongoDB, React, Context API, and Styled Component. The application is deployed on Vercel. |
|
ShopIT is a Fullstack Ecommerce webapp. it's where you can shop the things that you want with out worring about long processes.
it's a monorepo with two frontends and same backend created using turborepo. One is for client to use and place order and other is admin panel for administrator work process. there one comman package for validation created for value validation using ZOD.
Client web app it is well tested by react-testing lib. the paypment is powered by paypal. it is a PWA which is installlable and is semi workable in offline mode. cahceing worked by workbox. Other frontend is a for admin work and which is build using react-admin. it show's interactive ways to handle orders, review and other work. There are end-to-end test for the client apps by cypress.
Client Side
EcommerceClientCompressed.mp4
Admin Side
EcommerceAdminCompressed.mp4
- Client
- React
- Styled Component
- react-query
- workbox
- @testing-library
- Admin
- React
- React-admin
- recharts
- @mui/material
- Backend
- Node.js
- Express.js
- imagekit
- mongoose
- agenda
- @sendgrid/mail
- PWA
- Top products carousel
- Product pagination
- Carousel
- Full featured shopping cart
- Product reviews and ratings
- Suggrested Products
- Wishlist Products
- Product search feature
- Product Reviews
- User Cart
- Order Placement
- Checkout process (shipping, payment method, etc)
- PayPal / credit card integration
- Private and Protected Routes
- Forget password
- Servive worker cache
- Dashborad
- Admin User management
- Admin Product management
- Admin Order management
- User's Review management
- Filtering in Products
- Admin and Client APIs
- Cache Response
- Rate Limiter
- Jobs Scheduling
- Seeder
- Cors
Create a .env file in then root and add the following
NODE_ENV = development
PORT = 5000
MONGO_URI = your mongodb uri
JWT_SECRET = 'abc123'
PAYPAL_CLIENT_ID = your paypal client id
END_POINT = imagekit url
SENDGRID_API_KEY = your sendgrid api key
npm install
# Run individual
npm run client
npm run admin
npm run server
# Run frontend (:3000) & backend (:5000)
npm run dev
# Run frontend (:3000) & backend (:5000)
npm run dev:admin
# Cypress e2e tests
npm run e2e
You can use the following commands to seed the database with some sample users and products as well as destroy all data
# Import data
npm run data:import
# Destroy data
npm run data:destroy
Sample User Logins
admin@example.com (Admin)
123456
john@example.com (Customer)
123456
jane@example.com (Customer)
123456
You can change credentials in Server/data/User file than use the `# Import data` command