Apple Replica E-commerce Platform

A modern React-based Apple replica website with Node.js backend and MySQL database.

🚀 Features

• Frontend: React 19 + Vite with Apple-inspired UI
• Backend: Node.js + Express with RESTful API
• Database: MySQL with product management system
• Routing: React Router for single-page application
• Styling: Bootstrap 4 with custom CSS
• Images: Real Apple product images from official sources

📋 Prerequisites

• Node.js (v18 or higher)
• MySQL Server
• npm or yarn

🛠️ Installation

Backend Setup

1. Clone the repository:

git clone <repository-url>
cd React-Apple-Routing

2. Install backend dependencies:

cd backend
npm install

3. Set up environment variables:

cp .env.example .env
# Edit .env with your database credentials

4. Create and configure MySQL database:

CREATE DATABASE myDB;
CREATE USER 'myDBuser'@'localhost' IDENTIFIED BY '1';
GRANT ALL PRIVILEGES ON myDB.* TO 'myDBuser'@'localhost';
FLUSH PRIVILEGES;

5. Initialize database tables:

npm run install

6. Start the backend server:

npm start

Frontend Setup

1. Install frontend dependencies:

cd frontend
npm install

2. Set up environment variables:

cp .env.example .env
# Edit .env with your API URL

3. Start the development server:

npm run dev

🌐 Access URLs

• Frontend: http://localhost:5173
• Backend API: http://localhost:1234
• API Documentation: http://localhost:1234
• Product Form: http://localhost:1234/form

📊 Database Schema

Tables

1. products - Product information
2. users - User accounts
3. product_description - Detailed product descriptions
4. product_price - Pricing information
5. orders - Order management

API Endpoints

Method	Endpoint	Description
GET	/install	Initialize database tables
GET	/iphone	Get all products
GET	/iphone/:id	Get single product
POST	/add-product	Add new product
GET	/admin/clearTables	Clear all tables (admin)

🎯 Project Structure

React-Apple-Routing/
├── backend/
│   ├── utilities/
│   │   ├── db.js          # Database connection
│   │   └── query.js       # SQL queries
│   ├── public/
│   │   ├── index.html     # API documentation
│   │   └── form.html      # Product submission form
│   ├── app.js             # Main server file
│   ├── package.json
│   └── .env
├── frontend/
│   ├── src/
│   │   ├── components/    # Reusable components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom React hooks
│   │   ├── assets/        # Static assets
│   │   └── App.jsx        # Main App component
│   ├── public/
│   ├── package.json
│   └── .env
└── README.md

🔧 Configuration

Backend Environment Variables (.env)

DB_HOST=localhost
DB_USER=myDBuser
DB_PASSWORD=1
DB_NAME=myDB
PORT=1234

Frontend Environment Variables (.env)

VITE_API_URL=http://localhost:1234
VITE_APP_NAME=Apple Replica

📱 Available Pages

• Home (/) - Landing page with Apple-style sections
• iPhone (/iphone) - Product listing with real Apple images
• Mac (/mac) - Mac products (placeholder)
• iPad (/ipad) - iPad products (placeholder)
• Watch (/watch) - Apple Watch products (placeholder)
• TV (/tv) - Apple TV products (placeholder)
• Music (/music) - Apple Music services (placeholder)
• Support (/support) - Support page (placeholder)
• Search (/search) - Search functionality (placeholder)
• Cart (/cart) - Shopping cart (placeholder)

🚀 Deployment

Backend Deployment

1. Set production environment variables
2. Build and start the server:

npm start

Frontend Deployment

1. Build for production:

npm run build

2. Deploy the dist folder to your hosting provider

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Commit and push the changes
5. Create a Pull Request

📝 License

This project is for educational purposes only. All product images and trademarks belong to Apple Inc.

🐛 Troubleshooting

Common Issues

1. Database Connection Error

   • Ensure MySQL server is running
   • Check database credentials in .env
   • Verify database and user exist

2. Frontend API Connection Error

   • Ensure backend server is running on correct port
   • Check API URL in frontend .env
   • Verify CORS configuration

3. Images Not Loading

   • Check internet connection for external images
   • Verify image URLs in database
   • Check console for CORS errors

Reset Database

To clear all data and start fresh:

curl http://localhost:1234/admin/clearTables

📞 Support

For issues and questions, please open an issue in the GitHub repository.