MERN e-commerce-store

Payment

3.30.mp4

Admininstration

3.29.4.mp4

Key Features:

• ⚙️Tech stack: MERN, zustand state store, tailwindCSS, ioredis optimization, stripe, rechart
• 🗄️ MongoDB & Redis Integration
• 💳 Stripe Payment Setup
• 🛒 E-Commerce Core
• 🎨 Design with TailwindCSS
• 💹 Sales statistic chart with rechart
• 🔑 Password Hashing with bcryptjs
• 🎟️ JWT with Refresh/Access Tokens
• 💰 Checkout with Stripe
• 🏷️ Coupon Code System
• 🛒 Cart & Checkout Process
• 🍪 Session and Tokens
• 👑 Admin Dashboard (CRUD management functionalitise)
• 🔒 Security
• 🎯 Authentication and Authorization
• 🎈 Role-based Routes
• 🕵🏽 Web Attack prevention (XSS CRFS)
• 🛡️ Data Protection
• 🚀Caching with Redis

Setup .env file

PORT=5000
MONGO_URI=your_mongo_uri

UPSTASH_REDIS_URL=your_redis_url

ACCESS_TOKEN_SECRET=your_access_token_secret
REFRESH_TOKEN_SECRET=your_refresh_token_secret

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

STRIPE_SECRET_KEY=your_stripe_secret_key
CLIENT_URL=http://localhost:5173
NODE_ENV=development

use stripe api private key on backend public key on frontend

In a React project, commonly used libraries can be grouped into different categories based on their functionality:
✅ skills aquired

State Management

• Redux / Redux Toolkit: For complex global state management. ✅
• Zustand: Lightweight state management with a simple API. ✅
• Recoil: Provides a simpler alternative to Redux.
• Context API: Built-in React feature for managing global state in smaller apps. ✅

---

🗂 Routing

• React Router: The most popular library for routing and navigation. ✅

---

📦 Data Fetching & API Management

• Axios: Promise-based HTTP client for API calls. ✅
• React Query: For data fetching, caching, and synchronization. ✅
• SWR: Stale-while-revalidate for automatic data revalidation.

---

🎨 UI Libraries & Component Frameworks

• Material-UI (MUI): Popular React UI library with pre-built components. ✅
• Chakra UI: Accessible, customizable components with built-in themes. ✅
• Ant Design: Enterprise-level UI components for web applications.
• Tailwind CSS: Utility-first CSS framework for fast UI design. ✅

---

📊 Form Management

• Formik: Helps with form validation and management.
• React Hook Form: Efficient form handling with minimal re-renders.
• Yup: Schema validation for forms, often used with Formik or React Hook Form.

---

⚡ Animation

• Framer Motion: Popular for creating complex animations. ✅
• React Spring: Provides physics-based animations.
• GSAP (GreenSock): For complex animations and timelines.

---

🛡 Authentication & Security

• Auth0: Authentication and authorization management. ✅
• Firebase: Authentication, database, and hosting solution. ✅
• JSON Web Token (JWT): For handling authentication tokens. ✅

---

📱 State Persistence

• Redux Persist: Persist and rehydrate the Redux store. ✅
• LocalStorage / SessionStorage: Built-in browser storage. ✅

---

🧪 Testing

• Jest: Popular testing framework for JavaScript. ✅
• React Testing Library: For testing React components in a user-focused way.
• Cypress: End-to-end testing framework.

---

⚙️ Utilities

• Lodash: Provides utility functions for data manipulation.
• Moment / Day.js: For date and time manipulation.
• classnames: For dynamically managing class names.
• uuid: Generates unique identifiers. ✅

---

🔎 Others

• React Icons: Collection of SVG icons for React. ✅
• React Helmet: Manage document head (meta tags) for SEO. ✅
• Recharts: For creating customizable charts and graphs. ✅
• Three.js: For 3D animations and visualizations. ✅