Invoicipedia 📄

A modern, full-stack invoicing platform built with Next.js, featuring secure authentication, real-time updates, and seamless payment processing with Stripe. Create, manage, and track invoices with an intuitive user interface.

✨ Features

Feature	Description
📑 Invoice Management	Create, view, and manage your invoices with an intuitive dashboard
💳 Stripe Integration	Process payments securely using Stripe's checkout system
🔐 Secure Authentication	Protect user data with robust authentication via Clerk
📧 Email Notifications	Automated email notifications when invoices are created
🏢 Organization Support	Manage invoices for personal use or within organizations
📊 Invoice Tracking	Track invoice status (open, paid, overdue) with visual indicators
👥 Customer Management	Store and manage customer information for quick invoice creation
📱 Responsive Design	Enjoy a consistent experience across all devices with a modern, responsive design

🌟 Tech Highlights

• Secure authentication and user management with Clerk
• Type-safe database interactions with Drizzle ORM and PostgreSQL
• Server-side rendering with Next.js App Router for improved SEO and performance
• Email notifications with Resend and React Email components
• Sleek, responsive UI built with modern Tailwind CSS components
• Secure payment processing with Stripe integration
• Edge-ready deployment for fast and reliable performance

🚀 Quick Start

# Clone the repository
git clone https://github.com/yourusername/invoicipedia.git

# Navigate into the project directory
cd invoicipedia

# Install dependencies
npm install
# or with pnpm
pnpm install

# Set up your environment variables
cp .env.example .env

# Run database migrations
npm run migrate

# Start the development server
npm run dev

Visit http://localhost:3000 to explore the application.

🛠️ Tech Stack

Click to expand tech stack details

Core Frameworks

• Next.js - React framework with App Router for server-side rendering
• TypeScript - Enhances development experience with robust type safety
• React - Library for building interactive user interfaces

Database & ORM

• PostgreSQL - Powerful, open-source relational database
• Drizzle ORM - TypeScript ORM with strong type safety

Authentication

• Clerk - Complete authentication and user management solution

Payments

• Stripe - Secure payment processing infrastructure

Email

• Resend - Email API for developers
• React Email - Build and send emails using React components

UI & Styling

• Tailwind CSS - Utility-first CSS framework for rapid UI development
• Shadcn UI - Unstyled, accessible UI components
• Lucide Icons - Beautiful, consistent icon set

Development & Deployment

• Vercel - Deployment platform optimized for Next.js

📸 Screenshots

Invoice Creation

Invoice Detail

Invoice Payment

Stripe

Organization

🔐 Environment Variables

Create a .env file in the root directory with the following variables:

Variable	Description
XATA_DATABASE_URL	PostgreSQL connection string
CLERK_SECRET_KEY	Clerk secret key for server-side authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk publishable key for client-side auth
NEXT_PUBLIC_CLERK_SIGN_IN_URL	URL for sign-in page
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL	Fallback redirect URL after sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL	URL for sign-up page
STRIPE_API_SECRET	Stripe secret API key
RESEND_API_KEY	API key for Resend email service
ME_ID	ME_ID variable

Example .env file:

XATA_DATABASE_URL=your_postgresql_connection_string

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

STRIPE_API_SECRET=your_stripe_secret_key

RESEND_API_KEY=your_resend_api_key