Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/soumojit622/invoice-app

Chromatic is an invoicing platform to create, manage, and send invoices 📑💼 with features like custom PDFs 📝, email notifications 📧, and automated reminders ⏰. Perfect for freelancers 👨‍💻 and businesses 🏢!
https://github.com/soumojit622/invoice-app

authjs jspdf magic-ui mailtrap neondb nextjs prisma reactjs shadcn-ui tailwindcss typescript vercel zod

Last synced: 2 months ago
JSON representation

Chromatic is an invoicing platform to create, manage, and send invoices 📑💼 with features like custom PDFs 📝, email notifications 📧, and automated reminders ⏰. Perfect for freelancers 👨‍💻 and businesses 🏢!

Awesome Lists containing this project

README 

        
# 🚀 Chromatic - Simplify Invoicing with Ease



[![Chromatic Banner](https://github.com/soumojit622/Invoice-App/blob/master/public/banner.png)](https://invoice-app-beryl-one.vercel.app)



**Chromatic** is a feature-rich, full-stack invoicing application built from scratch using cutting-edge technologies. This platform is designed to help you create, manage, and send professional invoices effortlessly. With a clean user experience, powerful backend, and seamless integrations, it's your go-to solution for all things invoicing. 📑💼



## 🌐 [Live Demo](https://invoice-app-beryl-one.vercel.app) 🚀



Check out the live demo of **Chromatic** [here](https://invoice-app-beryl-one.vercel.app) 🎉.



---



## 📚 Table of Contents



- 📌 [Features](#-features)

- 🛠️ [Technologies](#-technologies)

- 🔧 [How It Works](#-how-it-works)

- 🏅 [Use Cases](#-use-cases)

- 🤝 [Contributions](#-contributions)

- ⚡ [Future Improvements](#-future-improvements)

- 📬 [Contact](#-contact)

- 🙏 [Acknowledgments](#-acknowledgments)

- 🎉 [Special Thanks](#-special-thanks)



---



## 🚩 Features 🎯



- 🌐 **Next.js App Router**: Dynamic routing and server-side rendering for optimal performance. 🏎️

- 📧 **Mailtrap Email API**: Beautiful, customizable email templates for invoice sharing and reminders. 📩

- 💪 **Create, Edit, and Mark Invoices as Paid**: Full invoice management with easy customization. 🖋️✔️

- 🚀 **Send Emails with Beautiful Email Templates**: Professional email notifications for invoices. 📤

- 🔒 **Custom Authentication using Auth.js**: Secure, customizable login system with Magic Link authentication. 🔑

- 📃 **REAL Custom PDF Generation**: Generate professional, shareable PDFs for invoices. 📄

- 👀 **Send Invoices to Clients**: Effortlessly send invoices directly to clients via email. 📧

- 🏄‍♂️ **Automated Reminder Emails**: Set up and send reminder emails for unpaid invoices. ⏳

- 💽 **Neon Postgres Database**: Lightning-fast and scalable data storage with advanced query capabilities. 🗄️

- 💨 **Prisma ORM**: Efficient, easy-to-use ORM for handling database interactions. 🔧

- 🏎️ **Animated Dashboard**: Visualize key business metrics and track performance with dynamic charts. 📊

- ✅ **Server Validation using Zod and Conform**: Robust, type-safe validation for all forms and inputs. 🛡️

- 🎨 **Styling with Tailwind CSS and Shadcn UI**: Sleek and responsive design for optimal user experience. 🎨

- 😶‍🌫️ **Deployed on Vercel**: Fast and scalable deployment for seamless access anywhere. 🚀

- 🌟 **Beautiful Landing Page**: Designed to make an outstanding first impression with professional visuals. 🌟

- ⚡ **Optimized Performance (React Streaming)**: Smooth and fast rendering, even with heavy traffic. 🚀

- 📜 **Clean, Maintainable Code**: Code written with clarity, scalability, and best practices in mind. 🧑‍💻



---



## 📑 Technologies ⚙️



- [**Next.js**](https://nextjs.org) - Framework for building server-rendered React applications.

- [**Mailtrap**](https://mailtrap.io) - Email testing and management platform.

- [**Neon Postgres**](https://neon.tech) - Serverless PostgreSQL for modern applications.

- [**Prisma**](https://prisma.io) - A next-generation ORM for efficient database queries.

- [**Tailwind CSS**](https://tailwindcss.com) - A utility-first framework for building modern designs.

- [**Shadcn UI**](https://ui.shadcn.com) - Reusable UI components for building efficient user interfaces.

- [**Auth.js**](https://authjs.dev) - A secure and customizable authentication solution.

- [**Conform**](https://conform.guide/) - A server-side form validation library.

- [**Vercel**](https://vercel.com) - A platform for deploying and hosting web applications.

- [**Zod**](https://zod.dev) - Type-safe schema validation for improved developer experience.

- [**Magic UI**](https://magicui.design/) - A UI library to create clean, modern, and beautiful web designs.



---



## 🔧 How It Works 🛠️



1. **User Authentication**: Users can sign in using Magic Link authentication, ensuring a seamless and secure login experience.

2. **Invoice Management**: Once logged in, users can create, edit, and mark invoices as paid. Each invoice is stored in a secure Neon Postgres database.

3. **PDF Generation**: Users can generate and download invoices as PDFs, which are customized based on their requirements.

4. **Email Notifications**: When an invoice is created or marked as paid, the platform sends automatic email notifications using customizable Mailtrap email templates.

5. **Automated Reminders**: Users can set up reminder emails that are automatically sent for unpaid invoices.



---



## 🏅 Use Cases 🚀



- **Freelancers and Contractors**: Easily create and manage invoices for clients, track payments, and send reminder emails for overdue invoices.

- **Small Business Owners**: Simplify your invoicing process with automatic PDF generation, email sending, and reminder notifications.

- **Agencies**: Manage multiple clients, generate professional invoices, and track payments with ease.

- **Service Providers**: Send customized invoices for services rendered and track payment statuses.



---



## 🤝 Contributions 🌱



We welcome contributions! If you'd like to contribute to this project, please follow these steps:



1. Fork the repository.

2. Create a new branch (`git checkout -b feature-name`).

3. Commit your changes (`git commit -am 'Add feature'`).

4. Push the branch (`git push origin feature-name`).

5. Create a new Pull Request.



---



## ⚡ Future Improvements 🔮



- **Multi-currency Support**: Add the ability to create invoices in multiple currencies.

- **Advanced Reporting**: Implement more advanced reporting and analytics for businesses to track income and expenses.

- **Integrations**: Integrate with payment gateways like Stripe or PayPal to allow direct payments through the platform.

- **Recurring Invoices**: Add functionality to create recurring invoices for clients on a scheduled basis.

- **Improved Email Templates**: Expand email templates to include more customizable options, such as different themes or invoice layouts.



---



## 📬 Contact 💬



For questions, feedback, or suggestions, feel free to reach out:



- **Email**: [[email protected]](mailto:[email protected])

- **LinkedIn**: [Soumojit Banerjee](https://www.linkedin.com/in/soumojit-banerjee-4914b3228/)

- **GitHub**: [soumojit622](https://github.com/soumojit622)



---



## 🙏 Acknowledgments 👏



A heartfelt thank you to the following technologies and their creators:



- **Next.js** for building the full-stack framework.

- **Mailtrap** for streamlining email workflows.

- **Prisma** and **Neon** for simplifying database management.

- **Tailwind CSS** and **Shadcn UI** for creating beautiful and responsive UI designs.

- **Vercel** for making deployment and hosting seamless.

- **Zod** for providing type-safe schema validation.

- **Magic UI** for its beautiful design components that enhance user experience.



---



## 🎉 Special Thanks ❤️



Special thanks to **ChatGPT** for providing invaluable assistance throughout the development of this project, helping with code, ideas, and documentation. 🙏



A big shoutout to **YouTube** for being an incredible learning platform. Many of the resources and tutorials that guided the development of this application came from YouTube creators. 🎥



Your support and knowledge made this project possible! 🙌



---



**Happy Invoicing!** 🎉



---



This README will provide a comprehensive overview of your project, its features, and how others can contribute or use it. You can copy this text into the `README.md` file of your GitHub repository.