Overview
Shoppire is a full-stack MERN e-commerce project built to demonstrate a production-style shopping experience with customer-facing screens and admin management workflows.
My Role
I worked across the frontend and backend: UI implementation, shopping workflows, API integration, and deployment preparation.
Problem
A realistic e-commerce app needs more than product cards. It needs a connected frontend, persistent data, user flows, checkout handling, and admin operations that feel like one coherent product.
Solution
Used clear feature boundaries and reusable UI patterns.
Target Users
- Online shoppers
- Store admins
- Portfolio reviewers
Workflow
Product flow from interface to deployment
01
UI
02
API
03
Auth
04
Data
05
Deploy
Key Features
- Product listing and detail-oriented shopping flow
- Cart and checkout experience
- Authentication-aware user flows
- Admin management for product/order operations
- Stripe payment integration
Frontend Implementation
- Built responsive React screens for browsing, cart, and dashboard-style flows.
- Used reusable UI patterns for cards, buttons, forms, and state-driven actions.
- Handled API-driven states for product and shopping data.
Backend / API Implementation
- Node.js and Express.js API foundation for e-commerce resources.
- Separated product, user, cart, order, and payment concerns across the API layer.
- Integrated backend responses into frontend flows.
Database Design
- MongoDB is used for product, user, and order-style data.
Authentication and Security
- Authentication is part of the product flow.
API Overview
- The API layer supports product, authentication, cart, order, and checkout workflows.
Architecture Decisions
- MERN stack chosen to keep frontend, API, and MongoDB data flow aligned.
- Admin and customer flows are separated conceptually to make the product easier to reason about.
Challenges
- Keeping shopping state consistent across cart, checkout, and persisted data.
- Presenting admin functionality without overwhelming the customer-facing UX.
Solutions
- Used clear feature boundaries and reusable UI patterns.
- Kept the project focused on core e-commerce workflows before adding extras.
Deployment Notes
- Frontend is deployed publicly for demo access.
Database Schema Notes
User
profileauthorders
Product
catalogpricestock
Order
itemsstatuspayment
- Schema cards summarize the core product, user, cart, and order data areas.
User -> OrderOrder -> ProductCart -> Product
Screenshots
Project Screenshot
Project Screenshot
What This Project Proves
Full-stack product delivery
E-commerce workflow understanding
API-connected React UI
Payment-oriented application flow