Drip: Future of E-commerce with TypeScript and Next.js
Younis Ahmed
Like this project
Posted Jun 5, 2025
Developed Drip, a TypeScript-based e-commerce platform with modern web technologies.
Likes
0
Views
2
Timeline
Feb 5, 2025 - Ongoing
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
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:
Install dependencies:
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:
Build the project:
Start the production server:
Lint the code:
Format the code:
Run type checks:
Database operations:
Generate database schema:
sh pnpm run db:generatePush database schema:
sh pnpm run db:pushStripe webhook listener:
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_URLDB_HOSTDB_USERDB_PASSWORDDB_NAMEDEV_DB_HOSTDEV_DB_USERDEV_DB_PASSWORDDEV_DB_NAMEOAuth2 environment variables
GOOGLE_CLIENT_IDGOOGLE_CLIENT_SECRETTWITTER_CLIENT_IDTWITTER_CLIENT_SECRETnext-auth
AUTH_SECRETResend api key
RESEND_API_KEYEmail environment variables for Resend API
EMAILuploadthing s3 bucket wrapper
UPLOADTHING_SECRETUPLOADTHING_APP_IDUPLOADTHING_TOKENAlgolia environment variables
NEXT_PUBLIC_ALGOLIA_APP_IDNEXT_PUBLIC_ALGOLIA_SEARCH_KEYALGOLIA_WRITE_KEYStripe environment variables
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYSTRIPE_SECRET_KEYSTRIPE_WEBHOOK_SECRETAPI Reference
Handles authentication-related requests
Parameter Type Description
api_key string Required. Your API keyHandles actions such as signing in,
Parameter Type Description
api_key string Required. Your API keyHandles actions such as signing out,
Parameter Type Description
api_key string Required. Your API keyHandles actions such as session,
Parameter Type Description
api_key string Required. Your API keyHandles actions such as callback,
Parameter Type Description
api_key string Required. Your API key provider string Required. The provider nameEndpoint: Handles Stripe Webhook Events
Webhook Event
This endpoint handles Stripe webhook events. It verifies the event signature and processes the event accordingly.
Parameter Type Description
stripe-signature string Required. The signature to verify the eventEndpoint: 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.
Parameter Type Description
image file Required. The image file to uploadVariant Upload
This endpoint handles variant image uploads. It allows users to upload up to 10 images.
Parameter Type Description
image file[] Required. The image file to uploadEndpoint: Handles New Password Form
New Password This endpoint serves the new password form, allowing users to reset their password.
Parameter Type Description
api_key string Required. Your API keyEndpoint: Handles Email Verification Form
Email Verification This endpoint serves the email verification form, allowing users to request a new verification token.
Parameter Type Description
api_key string Required. Your API keyEndpoint: Handles User Registration
User Registration This endpoint serves the user registration form, allowing users to create a new account
Parameter Type Description
api_key string Required. Your API keyEndpoint: Handles Password Reset
Password Reset This endpoint serves the password reset form, allowing users to reset their password.
Parameter Type Description
api_key string Required. Your API keyEndpoint: 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.
Parameter Type Description
api_key string Required. Your API keyEndpoint: Handles Analytics Dashboard
Analytics Dashboard This endpoint serves the analytics dashboard, providing insights into recent orders and sales data.
Parameter Type Description
api_key string Required. Your API keyEndpoint: Handles Orders Dashboard
Orders Dashboard This endpoint serves the orders dashboard, providing a detailed view of recent orders.
Parameter Type Description
api_key string Required. Your API keyEndpoint: Handles Products Dashboard
Products Dashboard This endpoint serves the products dashboard, providing a detailed view of all products and their variants.
Parameter Type Description
api_key string Required. Your API keyEndpoint: Handles User Settings
User Settings This endpoint serves the user settings page, allowing authenticated users to view and update their settings
Parameter Type Description
api_key string Required. Your API key