Full-stack e-commerce application built with the MERN stack, featuring secure authentication, product management, image uploads, Google OAuth, shopping cart functionality and Stripe-powered payments.
A complete walkthrough of the application, from browsing products to authentication and checkout.
- LINK: Link in production
Screen.Recording.2026-09-15.120224.mp4
Stripe Ecommerce is a full-stack e-commerce platform designed to simulate a modern online store from both the customer's and administrator's perspective.
The project was built to go beyond a simple CRUD application by implementing real-world features such as:
- 🔐 Authentication with JWT
- 🔑 Google OAuth 2.0
- 🛒 Shopping cart
- 💳 Stripe checkout and payments
- 📦 Product management
- 🖼️ Cloudinary image uploads
- 🛡️ Password hashing with bcrypt
- ✅ Request validation with Zod
- 🍪 HTTP-only cookie authentication
- 📱 Responsive interface
- 🔄 Client/server communication through REST APIs
The goal of the project was to understand how a complete e-commerce application is structured, how the frontend communicates with the backend, and how external services such as Stripe, Google and Cloudinary can be integrated into a production-style application.
The application provides a complete authentication system.
- User registration
- User login
- Secure password hashing
- JWT authentication
- HTTP-only cookies
- Authentication middleware
- Protected routes
- Google OAuth 2.0
- Logout functionality
Products are managed through the backend API and stored in MongoDB.
Each product can contain:
- Name
- Description
- Price
- Category
- Images
- Stock
- Product metadata
Images are uploaded and stored using Cloudinary.
Users can manage their shopping cart directly from the application.
Supported functionality includes:
- Add products
- Remove products
- Update quantities
- Calculate totals
- Persist cart information
- Continue to checkout
The application integrates Stripe Checkout to process payments securely.
The general flow is:
User
│
▼
Frontend
│
│ Create checkout request
▼
Backend
│
│ Stripe API
▼
Stripe Checkout
│
▼
Payment
│
▼
Success / Cancel
Stripe handles the sensitive payment information, meaning the application does not directly process or store card details.
Users can authenticate using their Google account.
User
│
▼
Google OAuth
│
▼
Backend
│
├── Existing user → Login
│
└── New user → Create account
Product images are handled through Cloudinary.
The upload flow is:
Admin
│
▼
Frontend
│
▼
Backend
│
▼
Cloudinary
│
▼
Image URL
│
▼
MongoDB
MongoDB stores the image reference rather than the actual image file.
| Technology | Purpose |
|---|---|
| React | User interface |
| Vite | Development/build tooling |
| Tailwind CSS | Styling |
| React Router | Client-side routing |
| React Hook Form | Form management |
| Swiper | Interactive UI components |
| React Icons | Icons |
| Technology | Purpose |
|---|---|
| Node.js | JavaScript runtime |
| Express | REST API |
| MongoDB | Database |
| Mongoose | MongoDB ODM |
| Zod | Request validation |
| JWT | Authentication |
| bcryptjs | Password hashing |
| Multer | File handling |
| CORS | Cross-origin requests |
| Service | Purpose |
|---|---|
| Stripe | Payment processing |
| Cloudinary | Image storage |
| Google OAuth | Social authentication |
| MongoDB Atlas | Cloud database |
| Vercel | Frontend deployment |
| Railway | Backend deployment |
The project follows a separated frontend/backend architecture.
┌─────────────────┐
│ Client │
│ React │
└────────┬────────┘
│
│ HTTP / REST
▼
┌─────────────────┐
│ Backend │
│ Express │
└────────┬────────┘
│
┌──────────────┼──────────────┐
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ MongoDB │ │ Cloudinary│ │ Stripe │
└──────────┘ └──────────┘ └──────────┘
│
▼
Persistent Data
The frontend is responsible for the user experience and application state, while the backend handles business logic, authentication, database operations and communication with external services.
Stripe-Ecommerce/
│
├── client/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ ├── context/
│ │ ├── hooks/
│ │ ├── pages/
│ │ ├── routes/
│ │ ├── services/
│ │ └── App.jsx
│ │
│ └── package.json
│
├── server/
│ ├── src/
│ │ ├── config/
│ │ ├── controllers/
│ │ ├── middleware/
│ │ ├── models/
│ │ ├── routes/
│ │ ├── services/
│ │ └── server.js
│ │
│ └── package.json
│
└── README.md
The exact structure may vary depending on the current version of the project.
git clone https://github.com/XantBuildd/Stripe-Ecommerce.git
cd Stripe-Ecommercecd client
npm installcd ../server
npm installCreate a .env file inside the backend directory.
PORT=5000
MONGODB_URI=
JWT_SECRET=
CLIENT_URL=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=For the frontend, create the required environment variables according to the current Vite configuration.
VITE_API_URL=
VITE_GOOGLE_CLIENT_ID=Never commit your
.envfiles or expose private API keys.
cd server
npm run devThe API will run locally on:
http://localhost:5000
Open another terminal:
cd client
npm run devThe application will be available at:
http://localhost:5173
The project requires several external services.
Used as the primary database for users, products and other application data.
Used to create and process checkout sessions.
Used to store and serve product images.
Used for OAuth authentication.
Authentication is handled through JWT-based sessions.
Register / Login
│
▼
Validate data
│
▼
Verify credentials
│
▼
Generate JWT
│
▼
HTTP-only Cookie
│
▼
Authenticated requests
Protected backend routes verify the user's authentication before allowing access to restricted resources.
The Stripe integration follows a server-controlled checkout flow.
┌─────────────┐
│ User │
└──────┬──────┘
│
│ Checkout
▼
┌─────────────┐
│ Frontend │
└──────┬──────┘
│
│ POST /checkout
▼
┌─────────────┐
│ Backend │
└──────┬──────┘
│
│ Create Stripe Session
▼
┌─────────────┐
│ Stripe │
└──────┬──────┘
│
▼
Checkout Page
│
▼
Payment
│
├──────────────► Success
│
└──────────────► Cancel
Testing and additional validation are part of the project's improvement roadmap.
Future testing coverage includes:
- Authentication
- Product endpoints
- Cart functionality
- Stripe checkout
- Protected routes
- Form validation
- Error handling
The application can be deployed using separate frontend and backend services.
Recommended deployment:
Vercel
Recommended deployment:
Railway
MongoDB Atlas
Cloudinary
Stripe
This project helped me strengthen my understanding of full-stack development by working with a complete application rather than isolated technologies.
Some of the main concepts explored were:
- Designing REST APIs
- Structuring an Express backend
- MongoDB data modeling
- Authentication with JWT
- Secure password handling
- OAuth 2.0
- HTTP-only cookies
- API validation with Zod
- File uploads
- Cloudinary integration
- Stripe payment integration
- Frontend/backend communication
- Protected routes
- Environment configuration
- Deployment of full-stack applications
More importantly, the project helped me understand how these technologies work together as a single system.
The project can continue evolving with features such as:
- Admin dashboard
- Order history
- Order management
- Product reviews
- Wishlist
- Advanced product filtering
- Pagination
- Email notifications
- Automated testing
- Improved error handling
- Performance optimization
- CI/CD pipeline
- Better accessibility
- More comprehensive documentation
Additional screenshots can be added here as the interface evolves.
screenshots/
├── home.png
├── products.png
├── product-details.png
├── authentication.png
├── cart.png
└── checkout.png
🟢 Active / Completed
The core e-commerce functionality is implemented, including authentication, product management, shopping cart functionality and Stripe integration.
The project is still open to improvements in testing, UX, performance and additional e-commerce functionality.
Nicolas
Computer Systems Engineering Student Full-Stack / Web Development
- GitHub: @XantBuildd
- LinkedIn: XantB-Nicolas
If you found this project interesting, consider giving the repository a ⭐.
It helps support the project and motivates further development.