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 🚀
Check out the live demo of Chromatic here 🎉.
- 📌 Features
- 🛠️ Technologies
- 🔧 How It Works
- 🏅 Use Cases
- 🤝 Contributions
- ⚡ Future Improvements
- 📬 Contact
- 🙏 Acknowledgments
- 🎉 Special Thanks
- 🌐 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. 🧑💻
- Next.js - Framework for building server-rendered React applications.
- Mailtrap - Email testing and management platform.
- Neon Postgres - Serverless PostgreSQL for modern applications.
- Prisma - A next-generation ORM for efficient database queries.
- Tailwind CSS - A utility-first framework for building modern designs.
- Shadcn UI - Reusable UI components for building efficient user interfaces.
- Auth.js - A secure and customizable authentication solution.
- Conform - A server-side form validation library.
- Vercel - A platform for deploying and hosting web applications.
- Zod - Type-safe schema validation for improved developer experience.
- Magic UI - A UI library to create clean, modern, and beautiful web designs.
- User Authentication: Users can sign in using Magic Link authentication, ensuring a seamless and secure login experience.
- Invoice Management: Once logged in, users can create, edit, and mark invoices as paid. Each invoice is stored in a secure Neon Postgres database.
- PDF Generation: Users can generate and download invoices as PDFs, which are customized based on their requirements.
- Email Notifications: When an invoice is created or marked as paid, the platform sends automatic email notifications using customizable Mailtrap email templates.
- Automated Reminders: Users can set up reminder emails that are automatically sent for unpaid invoices.
- 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.
We welcome contributions! If you'd like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature-name). - Commit your changes (
git commit -am 'Add feature'). - Push the branch (
git push origin feature-name). - Create a new Pull Request.
- 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.
For questions, feedback, or suggestions, feel free to reach out:
- Email: soumojitbanerjee22@gmail.com
- LinkedIn: Soumojit Banerjee
- GitHub: soumojit622
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 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.