top
Project Images
Cali Store: A Production-Grade E-commerce Platform This project, Cali Store, represents a fully realized, production-ready full-stack e-commerce platform designed for serious businesses. It's built from the ground up to handle the complexities of online retail, offering a robust solution for merchants looking to establish or enhance their digital storefront. What sets Cali Store apart is its technical depth, employing a modern, scalable stack to ensure performance and maintainability. Core Technologies and Architecture At its core, Cali Store leverages the power of Next.js with the App Router for a streamlined, server-centric application architecture. TypeScript provides static typing for enhanced developer experience and reduced runtime errors. Data persistence is handled by PostgreSQL, hosted on the high-performance Neon serverless platform, with Drizzle ORM offering a type-safe and efficient way to interact with the database. Client-side data fetching and state management are expertly managed by TanStack Query, ensuring a responsive user interface.
Developing Cali Store, a full-stack e-commerce platform, presented a significant engineering challenge: orchestrating numerous complex subsystems into a cohesive, production-grade experience. This case study details the architectural decisions, technical implementations, and problem-solving strategies employed to build a robust storefront, an intuitive admin panel, secure payment processing, reliable email delivery, and a consistent data model.
For the frontend, I chose Next.js with the App Router, leveraging server and client components to optimize rendering and data fetching. This allowed for dynamic server-side rendering for SEO and faster initial loads, while client components enabled rich interactivity. The backend and database interaction were managed by Drizzle ORM, providing a type-safe way to interact with a PostgreSQL database hosted on Neon. Neon's serverless architecture offered scalability and performance benefits crucial for an e-commerce platform. Client-side data management and caching were handled by TanStack Query, specifically its optimistic update feature, which dramatically improved perceived performance by updating the UI instantly before the server confirmed the operation.
๐ก The combination of Next.js App Router, Drizzle ORM, and TanStack Query provided a robust and performant foundation for the entire application, enabling rapid development with strong type safety.
Managing the order lifecycle was a critical area. A 10-item cart capacity was enforced at both the database (via a CHECK constraint) and UI levels. Order creation was primarily driven by Stripe webhooks. This approach ensures that orders are only officially created and processed after successful payment confirmation from Stripe, preventing data inconsistencies. We implemented logic to reuse a 'pending' order state if a user initiated checkout but didn't complete it, allowing them to resume their purchase. The webhook handler was designed to be idempotent and robust, handling potential retries and ensuring reliable order creation.
A dual-pronged email strategy was adopted. Nodemailer was used for transactional emails like order confirmations and shipping updates, integrated directly into the backend workflow. For authentication-related emails (e.g., OTP verification, password resets), Brevo was integrated, offering a dedicated service for these sensitive communications. To ensure deliverability and provide visibility, a comprehensive `email_logs` table was implemented. This table tracks all outgoing emails, their status, and timestamps. An admin UI was built to monitor these logs and manually trigger retries for failed deliveries, crucial for maintaining customer trust and communication.
The admin panel provides comprehensive control over the store. This includes managing products, categories, promotional banners, and discount coupons. Order management allows for viewing, updating status, and processing returns. A real-time analytics dashboard was a key feature, with aggregations performed directly at the database level using PostgreSQL's powerful querying capabilities to ensure performance. To maintain accountability, all admin actions are logged, with cursor-based pagination implemented for efficient retrieval of historical data.
The customer profile section offers a unified view of their interactions with Cali Store, including order history, current cart, wishlist items, product reviews, available coupons, and account settings. Account management is secured with OTP email verification. Beyond core functionality, Cali Store incorporates modern web features: PWA support for app-like experiences, a cookie consent manager, full dark mode support, and engaging scroll animations powered by GSAP and Three.js for a visually rich user interface.
๐ Enforcing constraints at both the database and UI levels is crucial for data integrity in e-commerce systems.
Cali Store represents a robust, production-ready e-commerce platform built with modern, performant technologies. The focus on architectural clarity, reliable data handling, and a rich user experience, both for customers and administrators, was paramount throughout its development.
Implemented a robust end-to-end order processing pipeline, integrating seamlessly with Stripe for payment gateway functionality. This flow culminates in a webhook-driven confirmation that ensures data integrity by creating a persistent database record.
Developed real-time administrative analytics dashboards. These dashboards provide critical business insights through database-level aggregations, visualizing key metrics such as revenue trends, top-selling products, category performance, and detailed order status breakdowns.
๐ก The integration of Stripe webhooks ensures transactional reliability, guaranteeing that every order is accurately reflected in the database post-payment confirmation.
Engineered comprehensive email observability within the admin panel. All transactional emails are logged, tracked, and designed with retry mechanisms, providing full visibility and control over communication.
Leveraged TanStack Query (React Query) to implement optimistic UI updates for the cart, wishlist, and product reviews. This architectural choice significantly enhances perceived performance by providing instant visual feedback to user interactions.
Implemented infinite scroll for product reviews utilizing `useInfiniteQuery` and employed cursor-based pagination for admin logs. This design choice addresses high-volume data scenarios, ensuring scalable and performant data retrieval.
๐ก Cursor-based pagination is crucial for maintaining stable performance as the volume of logs and reviews grows, avoiding the pitfalls of offset-based pagination.
Successfully deployed the application on Vercel, utilizing Neon PostgreSQL for the database. Ensured a fully validated environment configuration for production stability and implemented PWA (Progressive Web App) installability for enhanced user accessibility.