ShopSphere is a production-ready, full-stack e-commerce solution built using a decoupled architecture. It features a high-performance ASP.NET Core Web API backend and a reactive, modern Vue 3 frontend, seamlessly integrated with Supabase PostgreSQL and Supabase Storage.
- 🖥️ Frontend Web App: https://shopsphere-red.vercel.app
- ⚙️ Backend API Service: https://shopsphere-api-2mb2.onrender.com
- Framework: Vue 3 (Composition API)
- Build Tool: Vite (Next-Gen Frontend Tooling)
- Styling Engine: Tailwind CSS
- HTTP Client: Axios (Configured for seamless JWT management)
- Routing: Vue Router
- Icons: Font Awesome
- Framework: ASP.NET Core Web API (RESTful Design Patterns)
- ORM: Entity Framework Core
- Database: PostgreSQL
- Security Layer: JWT Authentication & Role-Based Authorization
- Containerization: Docker
- Database Cluster: Supabase PostgreSQL
- Cloud Storage: Supabase Storage Bucket
- Backend Hosting: Render (Container Deployment)
- Frontend Hosting: Vercel
- Dynamic Catalog: Browse products smoothly with fluid user interfaces.
- Granular Filtering: Filter available inventory items dynamically by category.
- Cart Management: Add products, update quantities, and calculate totals in real time.
- Frictionless Checkout: Streamlined Cash on Delivery (COD) processing pipeline.
- Order History: Complete historical tracking logs for authenticated user purchases.
- Executive Dashboard: Centralized metrics and management access.
- Product Lifecycle (CRUD): Complete control to add, edit, and delete products.
- Media Asset Pipeline: Automated, secure image uploads for product variants.
- Category Governance: Manage categories and update associated visual assets.
- Order Fulfillment: Comprehensive tracking and real-time status updates for client orders.
- Identity & Access Management (IAM): Complete user roster oversight.
- Administrative Provisioning: Create and promote secondary administrative profiles securely.
- Access Control: Instantly activate or deactivate specific user accounts.
| Role | Badges | Authorized Scopes & Access Boundaries |
|---|---|---|
| User | 🌐 Customer |
Product discovery, active cart context, checkout routines, order logs. |
| Admin | 🛡️ Management |
Full catalog manipulation, category configuration, order processing. |
| MasterAdmin | 👑 Super User |
Complete global access, system administration, and user account lifecycle control. |
ShopSphere/
├── backend/
│ └── ShopSphere.Api/
│ ├── Controllers/ # REST API Controllers (RBAC Guarded)
│ ├── DTOs/ # Unified Data Transfer Objects
│ ├── Data/ # DBContext & Data Migrations Layer
│ ├── Models/ # Strongly-typed Domain Entities
│ └── Program.cs # Middleware Pipeline & Service Container
│
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── components/ # Reusable, Atomic UI Components
│ │ ├── views/ # Dashboard & Page Layouts
│ │ ├── router/ # Guarded Navigation Mapping
│ │ ├── services/ # API Layer (Axios Context Interceptors)
│ │ └── stores/ # Central Reactive State Contexts
│ ├── package.json
│ ├── vite.config.js
│ └── vercel.json # Production SPA Routing Rules
│
├── Dockerfile # Multi-stage Backend Build Template
├── .dockerignore
└── README.md
- Navigate to the API directory:
cd backend/ShopSphere.Api
- Restore core dependencies via NuGet:
dotnet restore
- Initialize your environment variables or local User Secrets system:
ConnectionStrings__DefaultConnection=<Your_Supabase_PostgreSQL_String>
Jwt__Key=<Your_Secure_Super_Secret_JWT_Key_Signature>
Jwt__Issuer=ShopSphere
Jwt__Audience=ShopSphereClient
Supabase__Url=[https://your-project-id.supabase.co](https://your-project-id.supabase.co)
Supabase__ServiceRoleKey=<Your_Private_Service_Role_Key>
AllowedOrigins__0=http://localhost:5173
AllowedOrigins__1=[https://shopsphere-red.vercel.app](https://shopsphere-red.vercel.app)
⚠️ Security Warning: Do not commit secret keys or database passwords to public repositories.
- Launch the local runtime server:
dotnet run
The server boots up locally at: http://localhost:5106
- Navigate to the frontend directory:
cd frontend
- Install the node package dependencies:
npm install
- Create a local development configuration file
.envin the root frontend directory:
VITE_API_BASE_URL=http://localhost:5106/api
# Production Mapping: VITE_API_BASE_URL=[https://shopsphere-api-2mb2.onrender.com/api](https://shopsphere-api-2mb2.onrender.com/api)
- Start the Vite hot-reloading development server:
npm run dev
The application will render natively at: http://localhost:5173
The persistent storage tier is hosted on Supabase PostgreSQL, driven by the following core structural tables:
app_users— Normalized customer profiles, authentication records, and system roles.categories— Product classifications and metadata.products— Core catalog inventory records.carts— Active client session references.cart_items— Relational joins detailing specific item allocations inside customer carts.orders— Permanent historical invoices with stateful tracking flags.order_items— Granular mapping of products included in a completed purchase order.
Product and category media assets are pushed asynchronously to Supabase Storage buckets through dedicated API handlers. Transactions utilize an isolated, server-side Service Role Key ensuring that sensitive storage read/write bucket privileges are completely hidden from the client browser context.
GET /api/products— Fetch full product list.GET /api/products/{id}— Specific product inspection.GET /api/categories— Fetch all product categories.POST /api/auth/register— Account creation pipeline.POST /api/auth/login— Authentication gateway (Returns valid JWT token).
GET /api/cart/{userId}— Retrieve active cart context.POST /api/cart/add— Append product item to current cart.PUT /api/cart/items/{cartItemId}— Modify item volume.DELETE /api/cart/items/{cartItemId}— Drop item from cart instance.POST /api/orders/checkout— Finalize order execution via COD.GET /api/orders/user/{userId}— Pull user specific purchase history.
GET /api/admin/products|POST /api/admin/products— View / Create products.PUT /api/admin/products/{id}|DELETE /api/admin/products/{id}— Modify / Remove target products.GET /api/admin/categories|POST /api/admin/categories— View / Build new categories.PUT /api/admin/categories/{id}|DELETE /api/admin/categories/{id}— Modify / Drop categories.GET /api/admin/orders— Audit global client orders.PUT /api/admin/orders/{id}/status— Transition order fulfillment state.POST /api/admin/uploads/product-image— Stream product image binaries to Supabase.POST /api/admin/uploads/category-image— Stream category asset binaries to Supabase.
GET /api/master/users— Comprehensive platform user roster inspection.POST /api/master/users— Direct administrative profile provisioning.PUT /api/master/users/{id}/status— Enforce global account lockouts or activations.
- Cryptographic Authorization: Secure stateless session validation via JWT signatures.
- Dual Layer Route Defenses: Component routing hooks prevent navigation visually on the client-side, while strict controller attributes re-verify identity token signatures on every API request server-side.
- Strict CORS Contracts: Explicit domain whitelisting enforces strict cross-origin access blocks, accepting traffic exclusively from the secure Vercel client deployment ecosystem.
- Integration of Online Payment Processing Gateways (Stripe, PayPal).
- Implementation of full-text indexing for advanced search and elastic queries.
- Customer Wishlist context scopes.
- Interactive User Ratings matrix and review tracking per catalog item.
- Rich Admin Analytics charts summarizing transactional velocity.
- Automated Order Confirmation and status update Email/SMS pipelines.
Argho Chakma Full-Stack Software Engineer focused on crafting performant, scalable digital platforms.