Kumar Kosmetics is not just an e-commerce store; it's a digital beauty experience.
Blending state-of-the-art Smart Skin Analysis with a luxurious, fluid user interface, we bring the future of skincare shopping to your fingertips.
| Feature Category | Key Capabilities |
|---|---|
| 🤖 Smart Tech | • Skin Analyzer: Interactive quiz for personalized product matching. • Smart Recommendations: Algorithm-based suggestions. |
| 🔐 Authentication | • Secure Login: JWT & Bcrypt protection. • Social Auth: Google OAuth integration. • Recovery: OTP-based password reset flow. |
| 🛍️ Shopping | • Dynamic Cart: Real-time updates & calculations. • Global Search: Animated, centralized product search. • Payments: Stripe & Razorpay integration. |
| 🎨 UI/UX | • Premium Design: Glassmorphism, magnetic buttons, & fluid animations. • Responsive: Optimized for all devices via Tailwind CSS v4. • Dock Navigation: macOS-style floating menu. |
| 🛠️ Admin | • Dashboard: Analytics & sales overview. • Product Management: Create, update, delete products. • Customer Service: Message center for inquiries. |
A quick look at the top-level directory structure:
Kumar-Kosmetics/
├── backend/ # Express.js Server & API
│ ├── controllers/ # Request handlers
│ ├── models/ # Mongoose schemas
│ ├── routes/ # API route definitions
│ ├── middleware/ # Auth & error handling
│ ├── lib/ # Database & service connections
│ └── server.js # Entry point
│
├── frontend/ # React Application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Full page views
│ │ ├── store/ # Zustand state management
│ │ ├── hooks/ # Custom React hooks
│ │ ├── lib/ # Utilities & helpers
│ │ ├── assets/ # Images & static files
│ │ └── App.jsx # Main application component
│ └── package.json
│
└── README.md
We use the cutting-edge MERN Stack supercharged with modern tooling.
| Domain | Technology | Purpose |
|---|---|---|
| Frontend | React 18 + Vite | Blazing fast UI rendering |
| Tailwind CSS v4 | Next-gen utility-first styling | |
| Framer Motion | Complex layout animations | |
| Zustand | Lightweight, scalable state management | |
| Radix UI | Accessible, unstyled UI primitives | |
| Backend | Node.js + Express | Robust, scalable server architecture |
| MongoDB + Mongoose | Flexible, document-based data storage | |
| Redis | High-performance caching | |
| Cloudinary | Optimized media management & delivery |
Ready to deploy Kumar Kosmetics? Follow these steps.
- Node.js (v16+)
- MongoDB (Local or Atlas)
- Redis (Optional, for speed boost)
# Clone the repository
git clone https://github.com/your-username/kumar-kosmetics.git
cd Kumar-Kosmetics
# 📦 Backend Setup
cd backend
npm install
# Create your .env file here
npm run dev
# 🎨 Frontend Setup (New Terminal)
cd ../frontend
npm install
npm run devCreate a .env file in backend/ with the following:
PORT=5000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_key
CLOUDINARY_API_SECRET=your_secret
STRIPE_SECRET_KEY=your_stripe_key
EMAIL_USER=your_email
EMAIL_PASS=your_password
GOOGLE_CLIENT_ID=your_google_id
GOOGLE_CLIENT_SECRET=your_google_secretWe welcome contributions to make Kumar Kosmetics even better!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the ISC License. See LICENSE for more information.