Custom Kicks - 3D Shoe Customization Platform 👟

A full-stack MERN application for custom shoe design and e-commerce with 3D visualization capabilities, specifically designed for the Pakistani market.

🌟 Live Demo: [Coming Soon]

📝 About the Project

Custom Kicks is an innovative e-commerce platform that revolutionizes the way customers shop for shoes by offering real-time 3D customization capabilities. Built with modern web technologies, it provides an immersive shopping experience with Pakistani market-specific features.

🎯 Key Highlights

• Real-time 3D Visualization: Interactive shoe customization using React Three Fiber
• MERN Stack Architecture: Full-stack application with MongoDB, Express.js, React, and Node.js
• Pakistani Market Focus: PKR pricing, COD payments, and local shipping
• Admin Dashboard: Comprehensive management system for products, orders, and users
• Responsive Design: Optimized for desktop and mobile devices

🚀 Features

🛍️ Core E-Commerce

• 🔍 Product browsing with advanced search and filters
• 🛍️ Shopping cart with real-time updates
• 💰 Cash on Delivery (COD) payment system
• 📦 Order tracking and management
• 👤 User authentication and profiles
• 📋 Order history and status tracking

🎨 3D Customization

• 🔄 Real-time 3D shoe visualization using React Three Fiber
• 🎨 Dynamic customization options (colors, materials, sole colors)
• 📋 GLTF model support with texture mapping
• 💾 Save up to 10 custom designs per user
• 🔍 Interactive 3D model rotation and zoom

📊 Admin Dashboard

• 🛍️ Product management (CRUD operations)
• 📝 Order status management (individual and bulk updates)
• 👥 User management with blocking capabilities
• 📈 Sales analytics and reporting
• 🖼️ Image upload and management via Cloudinary

🇵🇰 Pakistani Market Features

• 💰 PKR pricing with discount system
• 💵 Cash on Delivery payment method
• 🚚 Pakistan-wide shipping
• 🌍 Urdu-friendly interface considerations
• 📅 Local business hours and support

🛠️ Tech Stack

Backend Technologies

• Node.js (v16+) with Express.js framework
• MongoDB with Mongoose ODM for data modeling
• JWT authentication with HTTP-only cookies
• Cloudinary for image storage and management
• Winston for comprehensive logging
• Bcrypt for secure password hashing
• Express Validator for request validation
• Multer for file upload handling
• Nodemailer for email functionality

Frontend Technologies

• React 18 with modern hooks and functional components
• Vite for fast development and building
• React Router for client-side navigation
• Bootstrap 5 with React Bootstrap components
• React Three Fiber for 3D rendering and interactions
• Three.js for 3D graphics and animations
• Framer Motion for smooth animations
• Axios for HTTP client requests
• React Hot Toast for user notifications
• React Icons for consistent iconography

Development Tools

• ESLint for code quality
• Nodemon for development hot-reload
• Git for version control
• npm for package management

📦 Installation & Setup

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher) - Download here
• MongoDB (local installation or MongoDB Atlas account) - Get started
• Cloudinary Account (for image storage) - Sign up
• Git for version control - Download here

🗂️ Clone the Repository

```bash git clone https://github.com/MyProVerse/Custom-Kicks-MERN-App.git cd Custom-Kicks-MERN-App ```

🔧 Backend Setup

1. Navigate to backend directory: ```bash cd backend ```

2. Install dependencies: ```bash npm install ```

3. Environment Configuration: Create a .env file in the backend directory (use .env.example as reference): ```env

Database Configuration

MONGO_URI=mongodb://localhost:27017/customkicks

For MongoDB Atlas: mongodb+srv://username:password@cluster.mongodb.net/customkicks

JWT Configuration

JWT_SECRET=your_super_secret_jwt_key_here_make_it_long_and_complex

Cloudinary Configuration

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Server Configuration

PORT=8000 NODE_ENV=development FRONTEND_URL=http://localhost:5173 ```

4. Database Seeding (Optional but Recommended): ```bash npm run seed ```

5. Start the backend server: ```bash npm run dev ```

🎨 Frontend Setup

1. Navigate to frontend directory: ```bash cd ../frontend ```

2. Install dependencies: ```bash npm install ```

3. Start the development server: ```bash npm run dev ```

🌐 Application URLs

The application will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:8000

🔑 Default Credentials

After running the seed script, use these credentials:

• Admin: admin@customkicks.com / admin123
• User: user@example.com / user123

⚠️ Important: Change these credentials in production!

📝 Project Structure

``` custom-kicks/ ├── backend/ │ ├── config/ # Database, logging, Cloudinary config │ ├── controllers/ # Route handlers │ ├── middleware/ # Authentication, validation, error handling │ ├── models/ # MongoDB schemas │ ├── routes/ # API routes │ ├── scripts/ # Database seeding scripts │ ├── logs/ # Application logs │ └── uploads/ # Temporary file uploads ├── frontend/ │ ├── src/ │ │ ├── components/ # Reusable React components │ │ ├── contexts/ # React Context providers │ │ ├── pages/ # Page components │ │ └── assets/ # Static assets │ └── public/ # Public files (3D models, textures) ├── .gitignore ├── .env.example └── README.md ```

📊 API Endpoints

🔐 Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• POST /api/auth/logout - User logout
• GET /api/auth/profile - Get user profile
• PUT /api/auth/profile - Update user profile

🛍️ Products

• GET /api/products - Get products with pagination
• GET /api/products/search - Search products with filters
• GET /api/products/:id - Get single product
• POST /api/products - Create product (Admin only)
• PUT /api/products/:id - Update product (Admin only)
• DELETE /api/products/:id - Delete product (Admin only)

📦 Orders

• POST /api/orders - Create order
• GET /api/orders - Get user orders
• GET /api/orders/:id - Get single order
• PATCH /api/orders/:id/cancel - Cancel order
• PATCH /api/orders/:id/status - Update order status (Admin only)
• PATCH /api/orders/bulk-status - Bulk update order status (Admin only)

🛍️ Cart

• GET /api/cart - Get user cart
• POST /api/cart/add - Add item to cart
• PUT /api/cart/item/:itemId - Update cart item
• DELETE /api/cart/item/:itemId - Remove cart item
• DELETE /api/cart/clear - Clear cart

🎨 Custom Designs

• GET /api/custom-designs - Get user custom designs
• GET /api/custom-designs/:id - Get single custom design

📊 Admin

• GET /api/admin/analytics - Get sales analytics
• GET /api/admin/orders - Get all orders
• GET /api/admin/users - Get all users
• PATCH /api/admin/users/:id/toggle-block - Block/unblock user

3D Model Integration

File Structure

Place your 3D assets in the frontend/public directory: ``` public/ ├── models/ │ ├── shoe.gltf │ ├── shoe.bin │ └── components/ │ └── ShoeModel.jsx ├── textures/ │ └── shoe-texture.jpg └── ... ```

Customization Settings

Products support JSON-based customization settings: ```json { "soleColor": ["black", "white", "red"], "colors": ["blue", "red", "white"], "material": ["leather", "canvas", "suede"] } ```

🚀 Deployment

📊 Backend Deployment

1. Environment Variables: Set all production environment variables
2. Process Manager: Use PM2 for process management

   npm install -g pm2
   pm2 start server.js --name "custom-kicks-api"

3. Reverse Proxy: Configure Nginx for load balancing
4. Security: Enable HTTPS and secure cookies
5. Database: Use MongoDB Atlas for production

🎨 Frontend Deployment

1. Build the application:

   npm run build

2. Deploy to hosting platform (Vercel, Netlify, etc.)
3. Configure environment variables for production API endpoints
4. Update CORS settings in backend for production domain

🔧 Environment Variables for Production

# Production Database
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/customkicks

# Secure JWT Secret
JWT_SECRET=your_production_jwt_secret_key_very_long_and_complex

# Cloudinary Production Settings
CLOUDINARY_CLOUD_NAME=your_production_cloud_name
CLOUDINARY_API_KEY=your_production_api_key
CLOUDINARY_API_SECRET=your_production_api_secret

# Production Configuration
PORT=80
NODE_ENV=production
FRONTEND_URL=https://your-domain.com

🤝 Contributing

We welcome contributions to Custom Kicks! Here's how you can help:

📝 Development Workflow

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Add tests if applicable
5. Commit your changes

   git commit -m 'Add some amazing feature'

6. Push to the branch

   git push origin feature/amazing-feature

7. Submit a pull request

📋 Code Style Guidelines

• Use ES6+ features and modern JavaScript
• Follow React best practices and hooks patterns
• Maintain consistent code formatting with ESLint
• Write meaningful commit messages
• Add JSDoc comments for complex functions

🐛 Bug Reports

When reporting bugs, please include:

• Detailed description of the issue
• Steps to reproduce
• Expected vs actual behavior
• Browser/Node.js version
• Screenshots if applicable

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

📧 Contact & Support

• Author: MyProVerse
• Email: alizaman6780@gmail.com
• GitHub: @MyProVerse
• Project Repository: Custom-Kicks-MERN-App

For support and questions:

1. Check existing Issues
2. Create a new issue if needed
3. Join our community discussions

🚀 Future Enhancements

• Mobile app development (React Native)
• Payment gateway integration (Stripe, PayPal)
• Advanced 3D features (AR try-on)
• Multi-language support (Urdu, English)
• AI-powered recommendations
• Social media integration
• Live chat support
• Inventory management system

🙏 Acknowledgments

• React Three Fiber community for 3D rendering capabilities
• Bootstrap team for responsive design components
• MongoDB for flexible database solutions
• Cloudinary for reliable image management
• All contributors and testers

---

Built with ❤️ for the Pakistani e-commerce market

If you find this project helpful, please consider giving it a ⭐️