MobiWorld - E-commerce Mobile Store

A full-stack e-commerce application built with React.js frontend and Node.js/Express.js backend, featuring mobile phone sales with modern UI/UX.

🚀 Features

• User Authentication: Register, login, and logout functionality with secure password hashing
• Product Catalog: Browse mobile phones with filtering and sorting
• Shopping Cart: Add/remove items with quantity management
• Payment Integration: Stripe payment processing
• Responsive Design: Mobile-first responsive UI
• Admin Panel: Product and order management
• Search & Filter: Advanced product search and filtering
• Order Management: Complete order lifecycle

🛠️ Tech Stack

Frontend

• React.js 18
• Redux Toolkit for state management
• Styled Components for styling
• React Router for navigation
• Axios for API calls
• Stripe for payments

Backend

• Node.js
• Express.js
• MongoDB with Mongoose
• JWT for authentication
• bcrypt for secure password hashing
• Stripe API integration

📋 Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn
• MongoDB (local or MongoDB Atlas)

🔧 Installation & Setup

1. Clone the Repository

git clone <your-repo-url>
cd mobi-world

2. Backend Setup

# Navigate to API directory
cd API

# Install dependencies
npm install

# Create environment file
cp env.example .env

Edit the .env file with your actual values:

MONGODB_URL=mongodb://localhost:27017/mobiworld
JWT_SEC=your_jwt_secret_key_here
STRIPE_KEY=sk_test_your_stripe_secret_key_here
PORT=5000

3. Frontend Setup

# Navigate to CLIENT directory
cd ../CLIENT

# Install dependencies
npm install

# Create environment file
cp env.example .env

Edit the .env file with your Stripe publishable key:

REACT_APP_STRIPE=pk_test_your_stripe_publishable_key_here

4. Database Setup

Option A: Local MongoDB

1. Install MongoDB locally
2. Start MongoDB service
3. Create a database named mobiworld

Option B: MongoDB Atlas (Recommended)

1. Create a free account at MongoDB Atlas
2. Create a new cluster
3. Get your connection string
4. Replace MONGODB_URL in your .env file

5. Stripe Setup (Optional for testing)

1. Create a free account at Stripe
2. Get your test API keys
3. Add them to your environment files

🚀 Running the Application

Start Backend Server

cd API
npm run dev

The backend will run on http://localhost:5000

Start Frontend Application

cd CLIENT
npm start

The frontend will run on http://localhost:3000

📁 Project Structure

mobi-world/
├── API/                 # Backend server
│   ├── models/         # MongoDB schemas
│   ├── routes/         # API endpoints
│   ├── app.js          # Server entry point
│   └── package.json
├── CLIENT/             # Frontend application
│   ├── src/
│   │   ├── components/ # React components
│   │   ├── context/    # React context
│   │   ├── redux/      # Redux store
│   │   └── styles/     # Styled components
│   └── package.json
└── README.md

🔑 Environment Variables

Backend (.env)

• MONGODB_URL: MongoDB connection string
• JWT_SEC: Secret for JWT tokens
• STRIPE_KEY: Stripe secret key
• PORT: Server port (default: 5000)

Frontend (.env)

• REACT_APP_STRIPE: Stripe publishable key

🔒 Security Features

• bcrypt Password Hashing: Industry-standard password hashing with salt
• JWT Authentication: Secure token-based authentication
• Input Validation: Comprehensive validation for user inputs
• Password Requirements: Strong password policy enforcement
• Email Validation: Proper email format validation

🧪 Testing

To run tests (if available):

# Backend tests
cd API
npm test

# Frontend tests
cd CLIENT
npm test

📝 API Endpoints

• POST /api/auth/register - User registration (with password validation)
• POST /api/auth/login - User login
• GET /api/products - Get all products
• GET /api/products/:id - Get single product
• POST /api/carts - Add to cart
• GET /api/carts/:userId - Get user cart
• POST /api/orders - Create order
• GET /api/orders/:userId - Get user orders

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Your Name - Your GitHub

🙏 Acknowledgments

• React.js community
• MongoDB Atlas for free database hosting
• Stripe for payment processing
• bcrypt for secure password hashing
• All the open-source libraries used in this project