Greetings, presenting Cart-it an ecommerce platform for buying your favourite products! The app is built on MERN stack and implements the best styling methods of tailwindCSS.
A link for the demo is given below:
🔗 https://cart-it.herokuapp.com
User account:
username: admin
password: 12345678Credit Card:
number: 4242 4242 4242 4242
date: any future date
cvc : any 3 digit mumber.env variables
MONGO_URI <Your mongodb URI>
CRYPTOJS_SECRET_KEY <Any secret combination or password>
JWT_SECRET_KEY <Any secret combination or password>
STRIPE_SECRET <Your secret stripe key found on your stripe dashboard>
STRIPE_PUBLIC <Your public stripe key found on your stripe dashboard>
MAIL_EMAIL <Any email you have>
MAIL_PASS <Its password>- User registration & login
- Password recovery (OTP sent to email which can be used to recover a registered account)
- JWT auth methods with secure sessions using redux-persist
- Orders fetching (All orders show in orders page with shipment and transaction status)
- Product fetching (Products are fetched lazily and can also be fetched according to a category)
- User fetching (Existing users cannot register with same email or username again)
- All orders have to be paid through stripe
- Transactions show up on stripe dashboard
- Addresses are saved on database so only CC(Credit Card) is saved with stripe
- Element animations added for better ux
- All animations viewport triggered ( Only triggered if user enters the given div or heading etc)
- Pages don't change abruptly but smoothly exit an animation and enter another
- Products images are lazily loaded
- Extra HTTP requests are prevnted
- On success pages are added (i.e Order success)
- Redirection to error pages for routes that don't exist or on any error occurs
"dependencies":{
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2",
"@reduxjs/toolkit": "^1.8.1",
"@tailwindcss/line-clamp": "^0.3.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.4",
"axios": "^0.26.1",
"babel-preset-es2015": "^6.24.1",
"eslint-config-react-app": "^7.0.1",
"framer-motion": "^6.3.10",
"postcss": "^8.4.12",
"react": "^18.0.0",
"react-countdown": "^2.3.2",
"react-dom": "^18.0.0",
"react-helmet-async": "^1.3.0",
"react-multi-carousel": "^2.8.0",
"react-redux": "^8.0.1",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-stripe-checkout": "^2.6.3",
"redux-persist": "^6.0.0",
"styled-components": "^5.3.5",
"tailwindcss": "^3.0.24",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"eslint": "^8.18.0",
"eslint-plugin-react": "^7.30.1"- Clone the repository
git clone https://github.com/hunter10471/MERN_ecommerce_app.git- Change the working directory
cd MERN_ecommerce_app- Install dependencies
npm install # or, yarn install- Run the app
npm run dev # or, yarn devThat's All!!! Now open localhost:4000 to see the app.
These are just some major resources used in the project, there are others too that can be found in the dependencies section
- React JS: The most popular framework around
- TailwindCss A utility-first CSS framework packed with classes
- Heroku: Easiest hosting for a MERN app
- Framer-motion Amazing animations done easily
- Redux/@reduxjs/toolkit For persisting data and easy access to store
- Material-UI All the icons were taken from this amazing library
- Axios For easy data fetching from backend
- Stripe Most efficient way to get payments from customers and provides an amazing dashboard for all payments history etc.
- Eslint All the front end and backend code is linted using ESlint to prevent any errors and follow a singular code pattern
- React-router Page transitions and redirections done right
- React-multi-carousel Great resouruce for production ready carousels
This project is licensed under the MIT License - see the LICENSE file for details.