https://github.com/underprotectiondev/invoicing-app
Invoice App
https://github.com/underprotectiondev/invoicing-app
Last synced: about 2 months ago
JSON representation
Invoice App
- Host: GitHub
- URL: https://github.com/underprotectiondev/invoicing-app
- Owner: UnderprotectionDev
- Created: 2025-03-05T14:58:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-05T15:37:13.000Z (about 1 year ago)
- Last Synced: 2025-03-05T16:24:39.794Z (about 1 year ago)
- Language: TypeScript
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://www.postgresql.org/)
[](https://clerk.com/)
[](https://stripe.com/)
[](https://orm.drizzle.team/)
[](https://tailwindcss.com/)
[](https://ui.shadcn.com/)
[](https://resend.com/)
[](https://vercel.com/)
## ✨ 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
```bash
# 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](http://localhost:3000) to explore the application.
## 🛠️ Tech Stack
Click to expand tech stack details
### Core Frameworks
- **[Next.js](https://nextjs.org/)** - React framework with App Router for server-side rendering
- **[TypeScript](https://www.typescriptlang.org/)** - Enhances development experience with robust type safety
- **[React](https://reactjs.org/)** - Library for building interactive user interfaces
### Database & ORM
- **[PostgreSQL](https://www.postgresql.org/)** - Powerful, open-source relational database
- **[Drizzle ORM](https://orm.drizzle.team/)** - TypeScript ORM with strong type safety
### Authentication
- **[Clerk](https://clerk.com/)** - Complete authentication and user management solution
### Payments
- **[Stripe](https://stripe.com/)** - Secure payment processing infrastructure
### Email
- **[Resend](https://resend.com/)** - Email API for developers
- **[React Email](https://react.email/)** - Build and send emails using React components
### UI & Styling
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework for rapid UI development
- **[Shadcn UI](https://ui.shadcn.com/)** - Unstyled, accessible UI components
- **[Lucide Icons](https://lucide.dev/)** - Beautiful, consistent icon set
### Development & Deployment
- **[Vercel](https://vercel.com/)** - 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
```