Split Keyboard Shop - Full-Stack E-Commerce Platform

A modern, full-stack e-commerce platform for selling premium ergonomic split keyboards. Built with React, Express.js, MongoDB, and Stripe integration.

🎯 Project Overview

This is a production-ready e-commerce platform designed specifically for selling ergonomic split keyboards. The platform emphasizes user experience, modern design, and comprehensive functionality for both customers and administrators.

Key Features

🛍️ Full E-Commerce Functionality: Browse products, add to cart, and complete purchases
🔐 User Authentication: Secure JWT-based authentication with bcrypt password hashing
💳 Payment Integration: Ready for Stripe payment processing
📦 Order Management: Complete order tracking from placement to delivery
⭐ Product Reviews: Customer review system with verified purchases
👤 User Profiles: Manage personal information and view order history
🎨 Modern UI: Beautiful, responsive design with Tailwind CSS and Framer Motion
📱 Mobile-First: Fully responsive across all devices
🔧 Admin Dashboard: Comprehensive tools for managing products and orders

🛠️ Tech Stack

Frontend

React 18 - UI library
Vite - Build tool and dev server
React Router v6 - Client-side routing
Tailwind CSS - Utility-first CSS framework
Zustand - Lightweight state management
React Hook Form - Form validation
Zod - Schema validation
Framer Motion - Animations
Axios - HTTP client
React Hot Toast - Notifications
React Icons - Icon library

Backend

Node.js - Runtime environment
Express.js - Web framework
MongoDB - NoSQL database
Mongoose - ODM for MongoDB
JWT - Authentication
bcryptjs - Password hashing
Stripe - Payment processing
Helmet - Security middleware
Express Rate Limit - API rate limiting
Morgan - HTTP request logger
Cors - Cross-origin resource sharing

📁 Project Structure

smart-reader/
├── client/                     # Frontend React application
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   │   ├── layout/        # Header, Footer
│   │   │   ├── product/       # ProductCard
│   │   │   ├── cart/          # Cart components
│   │   │   └── common/        # Reusable components
│   │   ├── pages/
│   │   │   ├── Home.jsx
│   │   │   ├── Products.jsx
│   │   │   ├── ProductDetail.jsx
│   │   │   ├── Cart.jsx
│   │   │   ├── Checkout.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Profile.jsx
│   │   │   ├── OrderHistory.jsx
│   │   │   ├── OrderDetail.jsx
│   │   │   └── admin/         # Admin pages
│   │   ├── store/             # Zustand state management
│   │   ├── services/          # API service layer
│   │   ├── utils/             # Utility functions
│   │   └── App.jsx
│   ├── package.json
│   ├── vite.config.js
│   └── tailwind.config.js
│
├── server/                     # Backend Express application
│   ├── src/
│   │   ├── controllers/       # Route controllers
│   │   ├── models/            # Mongoose models
│   │   ├── routes/            # API routes
│   │   ├── middleware/        # Custom middleware
│   │   ├── config/            # Configuration files
│   │   ├── utils/             # Utility functions
│   │   └── server.js          # Server entry point
│   └── package.json
│
└── README.md

🚀 Getting Started

Prerequisites

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

Installation

Clone the repository

git clone <repository-url>
cd smart-reader

Install server dependencies
```
cd server
npm install
```
Install client dependencies
```
cd ../client
npm install
```

Set up environment variables

Create a .env file in the server directory:

PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/split-keyboard-shop
JWT_SECRET=your_jwt_secret_key_change_this_in_production
JWT_EXPIRE=30d
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
CLIENT_URL=http://localhost:5173

Create a .env file in the client directory:

VITE_API_URL=http://localhost:5000/api
VITE_STRIPE_PUBLIC_KEY=pk_test_your_stripe_public_key

Seed the database (optional)
```
cd server
npm run seed
```
Start the development servers

Terminal 1 (Backend):
```
cd server
npm run dev
```
Terminal 2 (Frontend):
```
cd client
npm run dev
```
Access the application
- Frontend: http://localhost:5173
- Backend API: http://localhost:5000

👥 Demo Accounts

After seeding the database, you can use these demo accounts:

Customer Account:

Email: john@example.com
Password: password123

Admin Account:

Email: admin@splitkeyboard.com
Password: admin123

📋 Features Breakdown

Customer Features

✅ Browse products with filtering and sorting
✅ View detailed product information with images and specifications
✅ Add products to cart with quantity selection
✅ Complete checkout with shipping information
✅ User registration and authentication
✅ Profile management
✅ Order history and tracking
✅ Product reviews and ratings

Admin Features

✅ Admin dashboard with statistics
✅ Product management (CRUD operations)
✅ Order management and status updates
✅ View customer information
✅ Sales analytics (basic)

Technical Features

✅ JWT-based authentication
✅ Protected routes (client and server)
✅ Password hashing with bcrypt
✅ Input validation (client and server)
✅ Error handling and user feedback
✅ Responsive design for all screen sizes
✅ Loading states and spinners
✅ Toast notifications
✅ Cart persistence in local storage
✅ Rate limiting on API endpoints
✅ Security headers with Helmet
✅ CORS configuration

🔒 Security Features

JWT token authentication
Password hashing with bcrypt (10 rounds)
Protected API routes
Input validation on both client and server
Rate limiting to prevent abuse
Security headers with Helmet
CORS configuration
Environment variable protection

📊 Database Schema

User

firstName, lastName, email, password (hashed)
role (customer/admin)
addresses array
timestamps

Product

name, slug, description, price, compareAtPrice
images array
category, stock, variants
specifications (object)
features array
rating (average, count)
timestamps

Order

orderNumber (auto-generated)
user reference
items array with product details
shippingAddress (object)
paymentMethod, paymentResult
subtotal, shippingCost, tax, total
status (pending, processing, shipped, delivered, cancelled)
timestamps

Cart

user reference (optional)
sessionId (for guest users)
items array
timestamps

Review

product and user references
rating (1-5), title, comment
verified (boolean)
timestamps

🎨 Design Philosophy

Clean & Modern: Minimalist design with clear visual hierarchy
Product-First: Large, high-quality images and detailed information
Trust Signals: Reviews, ratings, and security badges
Mobile-First: Responsive design optimized for all devices
Performance: Optimized images, code splitting, and fast loading

🚢 Deployment

Backend Deployment (Railway/Render)

Create a new project on Railway or Render
Connect your GitHub repository
Set environment variables
Deploy

Frontend Deployment (Vercel)

Install Vercel CLI: npm i -g vercel
Navigate to client directory: cd client
Run: vercel
Follow the prompts

Database (MongoDB Atlas)

Create a free cluster on MongoDB Atlas
Update MONGODB_URI in your environment variables
Whitelist your deployment IP addresses

🧪 Testing

# Run tests (when implemented)
npm test

# Run linting
npm run lint

📈 Future Enhancements

🤝 Contributing

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

Fork the repository
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

📄 License

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

👨‍💻 Developer

Built with ❤️ for ergonomic typing enthusiasts

🙏 Acknowledgments

Product images from Unsplash
Icons from React Icons
UI inspiration from Lofree and NuPhy
Community feedback and support

📞 Support

For support, email support@splitkeyboard.com or open an issue in the GitHub repository.

Happy Coding! 🚀⌨️

Transform the typing experience, one split keyboard at a time.

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
client		client
server		server
.gitignore		.gitignore
README.md		README.md
README_ROBOTICS_3D.md		README_ROBOTICS_3D.md
TROUBLESHOOTING_3D.md		TROUBLESHOOTING_3D.md
index.html		index.html
main.js		main.js
package-lock.json		package-lock.json
package.json		package.json
preload.js		preload.js
render.js		render.js
robotics_lab_3d.py		robotics_lab_3d.py
run_robotics_3d.sh		run_robotics_3d.sh
styles.css		styles.css

Folders and files

Latest commit

History

Repository files navigation

Split Keyboard Shop - Full-Stack E-Commerce Platform

🎯 Project Overview

Key Features

🛠️ Tech Stack

Frontend

Backend

📁 Project Structure

🚀 Getting Started

Prerequisites

Installation

👥 Demo Accounts

📋 Features Breakdown

Customer Features

Admin Features

Technical Features

🔒 Security Features

📊 Database Schema

User

Product

Order

Cart

Review

🎨 Design Philosophy

🚢 Deployment

Backend Deployment (Railway/Render)

Frontend Deployment (Vercel)

Database (MongoDB Atlas)

🧪 Testing

📈 Future Enhancements

🤝 Contributing

📄 License

👨‍💻 Developer

🙏 Acknowledgments

📞 Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages