Full-Stack E-Commerce
A complete e-commerce platform featuring user authentication, cart management, and a live admin support dashboard. Built with a highly polished React frontend and a robust ASP.NET Core Web API backend.
The Problem
I wanted to build an application that went beyond standard CRUD operations to tackle real-world architecture challenges—like secure authentication, real-time dual-interface chat, and cloud media storage—while maintaining a seamless, blazing-fast single-page user experience.
Approach
Built a decoupled architecture using React for a dynamic single-page frontend and ASP.NET Core Web API for a strictly typed backend.
Designed a responsive, component-driven frontend using Tailwind CSS, React Router for nested role-based layouts (Admin vs. Customer), and the Context API for global authentication state.
Integrated SignalR WebSockets for real-time communication to engineer a synchronized live chat system, utilizing Optimistic UI updates to instantly render messages before the server round-trip completes.
Implemented a secure JWT authentication flow with refresh token rotation and BCrypt password hashing, strictly managing CORS policies across Vercel and Render deployments.
Configured Cloudflare R2 for secure, scalable profile picture storage, actively handling broken links or forbidden access with automated fallback UI avatars.
Key Features
- Responsive React UI with role-based routing and custom SVG components.
- JWT-based secure user authentication with refresh token rotation.
- Live dual-interface support desk powered by SignalR WebSockets.
- Scalable cloud media storage via Cloudflare R2 integration.
- Admin dashboard for inventory and customer management.
Challenges
Connecting the React frontend to the .NET SignalR hub introduced notorious 'phantom bugs.' React's Strict Mode caused duplicate event listeners, resulting in echoed messages. I also faced a serialization mismatch where the live SignalR broadcasts defaulted to PascalCase, causing the React frontend (expecting camelCase) to drop live messages. On the UI side, managing React's component lifecycles caused visual glitches, such as a split-second flash of authenticated UI during token validation and incorrect scroll preservation between routes. Finally, aggressive browser autofill extensions caused 'ghost submits' on auth forms, requiring custom frontend validation shields.
Outcome
A fully deployed, production-ready e-commerce platform that smoothly handles real-time WebSocket communication, secure file uploads, and robust authentication. The frontend feels native and highly polished, leveraging custom scroll-to-top routing utilities, strict initialization states, and graceful error handling to deliver a seamless user experience.