A modern, full-stack e-commerce platform inspired by TikTok’s engaging user experience. Built with React, TypeScript, Node.js, and deployed on AWS.

• Frontend: http://shoptok-frontend-1760633348.s3-website-us-east-1.amazonaws.com

• 🎨 50+ Pages & Components – Complete e-commerce experience
• 🌓 Dark Mode – Toggle between light and dark themes
• 📱 Progressive Web App (PWA) – Install on any device
• ♿ Accessibility – WCAG 2.1 AA compliant
• 🛒 Shopping Cart – Add, update, remove items
• 👤 User Profiles – Complete user management
• 🔍 Product Search – Advanced filtering and sorting
• 💳 Checkout Flow – Multi-step checkout process
• ⭐ Reviews & Ratings – Product review system
• 📊 Order Tracking – Track order status
• 🎥 Video Content – TikTok-style video feed
• 🎯 Responsive Design – Works on all devices

• 🔐 JWT Authentication – Secure user authentication
• 👥 User Management – Register, login, profile updates
• 📦 Product Management – CRUD operations for products
• 🛒 Shopping Cart API – Cart management endpoints
• 📋 Order Processing – Complete order lifecycle
• ⭐ Review System – Product reviews and ratings
• 🔒 Role-Based Access – User, Seller, Admin roles
• 📊 RESTful API – Clean, organized endpoints
• 💾 Database – SQLite with Sequelize ORM

• Framework: React 18
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: Redux Toolkit
• Routing: React Router v6
• Icons: Lucide React
• Forms: React Hook Form
• Animations: Framer Motion
• PWA: Vite PWA Plugin

• Runtime: Node.js 22
• Framework: Express.js
• Language: TypeScript
• Database: SQLite
• ORM: Sequelize
• Authentication: JWT (jsonwebtoken)
• Password Hashing: bcryptjs
• Validation: Express Validator
• Security: Helmet, CORS
• File Upload: Multer

• Frontend Hosting: AWS S3 + Static Website Hosting
• Backend Hosting: AWS Elastic Beanstalk
• CDN: CloudFront (optional)
• Region: us-east-1

ShopTok/
├── frontend/                 # React frontend application
│   ├── src/
│   │   ├── components/      # Reusable components
│   │   ├── pages/           # Page components
│   │   ├── store/           # Redux store
│   │   ├── hooks/           # Custom hooks
│   │   ├── utils/           # Utility functions
│   │   └── styles/          # Global styles
│   ├── public/              # Static assets
│   └── package.json
│
├── backend/                  # Node.js backend API
│   ├── src/
│   │   ├── controllers/     # Route controllers
│   │   ├── models/          # Database models
│   │   ├── routes/          # API routes
│   │   ├── middleware/      # Custom middleware
│   │   ├── config/          # Configuration files
│   │   └── utils/           # Utility functions
│   ├── uploads/             # File uploads
│   └── package.json
│
├── deploy-all.sh            # Deployment script
└── README.md                # This file

• Node.js 18+ and npm
• Git

cd frontend
npm install
npm run dev

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

cd backend
npm install

# Create .env file
cp .env.example .env

# Start development server
npm run dev

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

Frontend (.env):

VITE_API_URL=http://localhost:3001

Backend (.env):

NODE_ENV=development
PORT=3001
DB_NAME=shoptok_dev
JWT_SECRET=your-secret-key
JWT_REFRESH_SECRET=your-refresh-secret
CORS_ORIGIN=http://localhost:5173

• POST /api/v1/auth/register – Register new user
• POST /api/v1/auth/login – User login
• GET /api/v1/auth/me – Get current user
• POST /api/v1/auth/logout – User logout

• GET /api/v1/products – Get all products
• GET /api/v1/products/:id – Get single product
• POST /api/v1/products – Create product (seller/admin)
• PUT /api/v1/products/:id – Update product (seller/admin)
• DELETE /api/v1/products/:id – Delete product (seller/admin)

• GET /api/v1/cart – Get user cart
• POST /api/v1/cart – Add item to cart
• PUT /api/v1/cart/:id – Update cart item
• DELETE /api/v1/cart/:id – Remove from cart
• DELETE /api/v1/cart – Clear cart

• GET /api/v1/orders – Get user orders
• GET /api/v1/orders/:id – Get single order
• POST /api/v1/orders – Create order
• PUT /api/v1/orders/:id/cancel – Cancel order
• PUT /api/v1/orders/:id/status – Update order status (admin)

• GET /api/v1/reviews/product/:productId – Get product reviews
• POST /api/v1/reviews – Create review
• PUT /api/v1/reviews/:id – Update review
• DELETE /api/v1/reviews/:id – Delete review
• POST /api/v1/reviews/:id/helpful – Mark review as helpful

# Deploy both frontend and backend
./deploy-all.sh

The script will:

1. Build the frontend and deploy to AWS S3
2. Build the backend and deploy to AWS Elastic Beanstalk
3. Configure CORS between frontend and backend
4. Output the live URLs

Frontend to S3:

cd frontend
npm run build
aws s3 sync dist/ s3://your-bucket-name --delete

Backend to Elastic Beanstalk:

cd backend
npm run build
eb init
eb create environment-name
eb deploy

• ✅ Frontend: LIVE on AWS S3
• ✅ Backend: LIVE on AWS Elastic Beanstalk
• ✅ Database: SQLite (file-based)
• ✅ Authentication: JWT tokens
• ✅ CORS: Configured
• ✅ SSL: Available (can be added)

•  Connect frontend to backend API
•  Migrate to PostgreSQL/RDS
•  Add payment integration (Stripe)
•  Implement real-time notifications
•  Add video upload functionality
•  Enable HTTPS/SSL
•  Add custom domain
•  Implement CI/CD pipeline
•  Add email notifications
•  Analytics dashboard

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
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

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

Ngoubi Maximillian

• GitHub: @ngoubimaximillian12

• Inspired by TikTok’s engaging user experience
• Built with modern web technologies
• Deployed on AWS cloud infrastructure

For questions or support, please open an issue on GitHub.

⭐ Star this repo if you found it helpful! EOF

git add README.md git commit -m “📝 Add comprehensive README with live URLs” git push origin main

Project Lead: Maximillian Ngoubi Diamgha GitHub: @ngoubimaximillian12