Full-Stack E-Commerce App

This is a full-stack e-commerce application I built from scratch as part of my learning journey to master modern web development. The goal of this project was to deeply understand how all layers of a modern web app fit together from the frontend interface to backend logic, data management, and deployment.

Website Trailer

video.mp4

Project Objectives

• Build a feature-rich e-commerce application using React and Next.js
• Learn how to implement AI-powered search with Algolia
• Design accessible and visually appealing interfaces using shadcn/ui
• Add smooth, user-friendly animations with Framer Motion
• Handle image uploads and retrieval efficiently using Uploadthing
• Set up a scalable backend using PostgreSQL and Drizzle ORM
• Build intuitive and reliable forms with React Hook Form
• Manage both client and server state using Zustand and React Query
• Utilize serverless functions for backend logic and scalability
• Integrate Stripe for secure and reliable payment processing
• Learn how to deploy and configure a full-stack application for production

Technologies Used

Frontend:

• React
• Next.js
• Tailwind CSS
• shadcn/ui
• Framer Motion

Backend:

• Next.js API Routes / Serverless Functions
• PostgreSQL
• Drizzle ORM

State Management:

• Zustand
• React Query

Additional Tools:

• Uploadthing (image storage)
• Algolia (search)
• Stripe (payments)

Setup Instructions

1. Clone the repository:

   git clone https://github.com/asifazimi/sprout-scribble.git
   cd sprout-scribble

2. Install dependencies:

   npm install

3. Create a .env file in the root directory and add your configuration values (e.g., Algolia keys, Stripe keys, database URL).

4. Run the development server:

   npm run dev

5. For deployment, you can use platforms like Vercel or Netlify.

What I Learned

This project gave me hands-on experience with the modern web development stack. I now have a much deeper understanding of full-stack architecture, real-world application structure, performance optimization, and production deployment. It also taught me how to work with third-party tools like Algolia, Stripe, and image hosting services, which are common in industry-grade applications.