Drip: Future of E-commerce with TypeScript and Next.js

Younis Ahmed

Completed work

Fullstack Engineer

Next.js

Stripe

TypeScript

E-Commerce

Drip: Building the Future of E-commerce with TypeScript and Next.js

Imagine launching your own modern online store with robust features, a beautiful interface, and seamless integrations—all powered by open-source technology. Meet Drip, a full-stack e-commerce application crafted by Younis Ahmed to make online shopping development both accessible and powerful.

What is Drip?

Drip is a TypeScript-based, full-stack e-commerce platform designed for developers who want to build scalable, feature-rich online stores. Leveraging the latest web technologies, Drip provides a solid foundation for everything from product listings to secure payments and analytics dashboards.

The Tech Stack: Power Meets Flexibility

Drip’s architecture is a showcase of modern web development best practices:

TypeScript: Ensures type safety and maintainable code.

Next.js: Delivers fast, SEO-friendly React applications.

Tailwind CSS: Enables rapid, utility-first UI development.

Drizzle ORM & Neon: Simplify database operations with a serverless Postgres backend.

Stripe: Handles secure, global payment processing.

Uploadthing: Manages file uploads with an S3-compatible interface.

Resend: Powers transactional email notifications.

Algolia: Provides lightning-fast semantic search for products.

React Hook Form & Zod: Streamline form handling and validation.

ESLint & Prettier: Keep code clean and consistent.

Key Features

Drip isn’t just a template—it’s a full-featured e-commerce solution:

Authentication: Secure OAuth2 login with Google and Twitter, managed by next-auth.

Product Management: Add, edit, and organize products with image uploads.

Order Tracking: Monitor customer orders and statuses in real time.

Analytics Dashboard: Visualize sales and order data for business insights.

User Settings: Let users manage their profiles and preferences.

Payment Integration: Accept payments seamlessly with Stripe.

Semantic Search: Help users find products quickly using Algolia-powered search.

Email Notifications: Keep customers informed with order updates via Resend.

Developer Experience

Drip is built with developers in mind:

Easy Setup: Clone, install dependencies with pnpm, set up your .env.local, and you’re ready to go.

API Endpoints: Well-documented RESTful endpoints for authentication, product management, file uploads, and more.

Type Safety: End-to-end TypeScript and Zod validation for reliable development.

Database Operations: Effortlessly manage schema and migrations with Drizzle commands.

Open Source: MIT-licensed and ready for your contributions or customizations.

Getting Started

bash git clone https://github.com/Younis-Ahmed/drip.git
cd drip
pnpm install
# Set up your .env.local variables
pnpm run dev

Need to handle payments, uploads, or analytics? Drip’s documentation walks you through configuring Stripe, Uploadthing, Algolia, and more.

Why Drip?

Drip is perfect for:

Developers launching new e-commerce projects

Startups needing a customizable, scalable storefront

Learners exploring full-stack TypeScript and Next.js

Anyone who wants a modern, open-source alternative to Shopify or WooCommerce

Final Thoughts

Drip isn’t just another e-commerce boilerplate—it’s a thoughtfully engineered platform that brings together the best of modern web tech for online shopping. Whether you’re building a side hustle or the next big thing, Drip gives you the tools and flexibility to succeed.

Ready to take your e-commerce ideas to the next level? Check out Drip on GitHub and start building today!

Built with love, TypeScript, and a vision for a better shopping experience.

Developer Corner

Drip is a TypeScript-based Full stack e-commerce application designed to facilitate online shopping with features for e-commerce platform. The project utilizes TypeScript, TailwindCSS, Neon, Drizzle, Stripe etc..

Database scheme

Tech Stack

Uploadthing: s3 bucket wrapper for blob storage.

Resend: Email Notification provider.

TypeScript: Provides type safety and enhances code quality.

CSS: Used for styling the application.

Drizzle: Utilized for database operations and ORM functionalities.

Neon: Employed for serverless database management.

Next.js: A React framework used for building the user interface.

Tailwind CSS: A utility-first CSS framework for styling.

Stripe: Integrated for payment processing.

React Hook Form: Used for managing form state and validation.

Zod: A TypeScript-first schema declaration and validation library.

React: The core library used for building the user interface.

Postgres: The database used for storing application data.

Eslint and Prettier: Tools for maintaining code quality and formatting.

Agloia Search: vector/sematic powered search.

Installation

To get started with this project, follow these steps:

Clone the repository:

git clone https://github.com/Younis-ahmed/drip.git
cd drip

Install dependencies:

pnpm install

Set up environment variables: Create a .env.local file in the root directory and add the necessary environment variables. You can use the provided .env.local file as a reference.

Run the development server:

pnpm run dev

Build the project:

pnpm run build

Start the production server:

pnpm run start

Lint the code:

pnpm run lint

Format the code:

pnpm run format

Run type checks:

pnpm run typecheck

Database operations:

Generate database schema: sh pnpm run db:generate

Push database schema: sh pnpm run db:push

Stripe webhook listener:

pnpm run stripe:listen

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

Neon and Postgres environment variables

POSTGRES_URL

DB_HOST

DB_USER

DB_PASSWORD

DB_NAME

DEV_DB_HOST

DEV_DB_USER

DEV_DB_PASSWORD

DEV_DB_NAME

OAuth2 environment variables

GOOGLE_CLIENT_ID

GOOGLE_CLIENT_SECRET

TWITTER_CLIENT_ID

TWITTER_CLIENT_SECRET

next-auth

AUTH_SECRET

Resend api key

RESEND_API_KEY

Email environment variables for Resend API

EMAIL

uploadthing s3 bucket wrapper

UPLOADTHING_SECRET

UPLOADTHING_APP_ID

UPLOADTHING_TOKEN

Algolia environment variables

NEXT_PUBLIC_ALGOLIA_APP_ID

NEXT_PUBLIC_ALGOLIA_SEARCH_KEY

ALGOLIA_WRITE_KEY

Stripe environment variables

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

STRIPE_SECRET_KEY

STRIPE_WEBHOOK_SECRET

API Reference

Handles authentication-related requests

  GET /api/auth/

Parameter Type Description api_key string Required. Your API key

Handles actions such as signing in,

  POST /api/auth/signin

Parameter Type Description api_key string Required. Your API key

Handles actions such as signing out,

  POST /api/auth/signout

Parameter Type Description api_key string Required. Your API key

Handles actions such as session,

  GET /api/auth/session

Parameter Type Description api_key string Required. Your API key

Handles actions such as callback,

GET /api/auth/callback/:provider

Parameter Type Description api_key string Required. Your API key provider string Required. The provider name

Endpoint: Handles Stripe Webhook Events

Webhook Event

This endpoint handles Stripe webhook events. It verifies the event signature and processes the event accordingly.

POST /api/stripe/webhook

Parameter Type Description stripe-signature string Required. The signature to verify the event

Endpoint: Handles File Uploads using UploadThing

Avatar Upload

This endpoint handles avatar image uploads. It allows users to upload images with a maximum file size of 2MB.

POST /api/uploadthing/avatarUploader

Parameter Type Description image file Required. The image file to upload

Variant Upload

This endpoint handles variant image uploads. It allows users to upload up to 10 images.

POST /api/uploadthing/variantUploader

Parameter Type Description image file[] Required. The image file to upload

Endpoint: Handles New Password Form

New Password This endpoint serves the new password form, allowing users to reset their password.

GET /auth/new-password

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles Email Verification Form

Email Verification This endpoint serves the email verification form, allowing users to request a new verification token.

GET /auth/new-verification-token

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles User Registration

User Registration This endpoint serves the user registration form, allowing users to create a new account

GET /auth/register

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles Password Reset

Password Reset This endpoint serves the password reset form, allowing users to reset their password.

GET /auth/reset

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles Adding a New Product

Add Product This endpoint serves the form for adding a new product. It ensures that only users with the ADMIN role can access the form.

GET /dashboard/add-product

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles Analytics Dashboard

Analytics Dashboard This endpoint serves the analytics dashboard, providing insights into recent orders and sales data.

GET /dashboard/analytics

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles Orders Dashboard

Orders Dashboard This endpoint serves the orders dashboard, providing a detailed view of recent orders.

GET /dashboard/orders

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles Products Dashboard

Products Dashboard This endpoint serves the products dashboard, providing a detailed view of all products and their variants.

GET /dashboard/products

Parameter Type Description api_key string Required. Your API key

Endpoint: Handles User Settings

User Settings This endpoint serves the user settings page, allowing authenticated users to view and update their settings

GET /dashboard/settings

Parameter Type Description api_key string Required. Your API key

https://github.com/Younis-Ahmed/drip

Like this project

Completed work

Posted Jun 5, 2025

Developed Drip, a TypeScript-based e-commerce platform with modern web technologies.

Likes

Views

Timeline

Feb 5, 2025 - Ongoing