Overview

Shoppy is a fully functional fictionale-commerce platform designed to simulate a real online shopping experience.

The website offers a wide range of digital and physical products, allowing users to browse items, filter them, manage their shopping cart, authenticate through Google, place orders, and track their delivery status.

The project was built with Next.js, TypeScript, TailwindCSS, and Supabase, and deployed on Vercel with a focus on performance, scalability, and clean UI.

Technical Decisions

• Nextjs: I opted for Next.js to leverage server-side rendering, API routes, and an optimized developer experience that suits e-commerce use cases.

• TypeScript: Typescript was used throughout the project to ensure type safety and more maintainable code.

• Supabase: The database and authentication layer were implemented using Supabase, chosen for its fast setup, real-time capabilities, and seamless integration with row-level security.

• Authentication: Auth.js with Google OAuth was selected to provide a frictionless login flow.

• Styling: For styling, I used TailwindCSS to quickly build a consistent, responsive UI with utility-first classes and custom components.

• Architecture: Client and server components were structured to keep the product list, filters, and user data access efficient and organized.

• Images: Image optimization and dynamic routing were used to keep the website fast and scalable.

Challenges

One of the main challenges was managing variations requiring a flexible schema and conditional UI logic.

Implementing a cart system that updates quantities, persists data, and handles price recalculations introduced edge cases, especially when switching between authenticated and unauthenticated states.

Another challenge was integrating order tracking, which required creating a status-based workflow that the user can follow in real time. Ensuring accurate syncing between Supabase and the UI required careful handling of async operations and error states.

Finally, building a clean filtering system for price range and product status required optimized queries and debouncing to avoid unnecessary load on the database.

Key features

1. Authentication: Implemented authentication using Auth.js for handling modern auth flows, along with Google OAuth for seamless login. User accounts are managed through Supabase, which stores additional profile information.

2. Full e-commerce flow: Implemented authentication using Auth.js for handling modern auth flows, along with Google OAuth for seamless login. User accounts are managed through Supabase, which stores additional profile information, such as delivery address.

3. Responsive Design: The project is fully responsive, allowing both mobile and desktop users to navigate the platform smoothly and complete purchases.

4. Order Tracking: Order tracking with real-time status updates is one of the key features of the app. Users can follow all their orders and view the live shipping status.

5. Deployment on Vercel: The app is deployed on Vercel with optimized performance and fast loading times, thanks to its global CDN architecture.

Future Improvements

• Real payment integration: Integrate a real payment system using Stripe to enable secure and seamless checkout.

• Delivery address auto-suggestion: Implement an API-based address auto-suggestion feature to streamline the shipping address input during checkout.

• Wishlist: Add a wishlist functionality that allows users to save products for future reference.

• Tracking notifications: Enable push or email notifications to alert users whenever their order status is updated.

Lessons & Final Considerations

This project significantly improved my ability to build responsive and consistent interfaces, strengthening both my design skills and my understanding of layout patterns.

Working with Next.js helped me refine my approach to structuring full-stack applications, while implementing authentication deepened my knowledge of secure user flows.

I also gained solid experience with Supabase as a backend solution, learning how to manage data efficiently and integrate it smoothly into the frontend.

Building reusable components proved essential for speeding up development and keeping the codebase maintainable.

Handling dates with date-fns and integrating less common libraries such as react-range taught me how to rely on documentation when external resources are limited.

This process reinforced how important it is to read, understand, and navigate official docs, which has noticeably improved my overall workflow and problem-solving approach.