A full-stack invoicing and sales analytics app built with NextJs, TypeScript, Shadcn UI, and Supabase. It allows users to generate and manage invoices in PDF format, track all related data, and view detailed sales analytics through a dynamic dashboard.
Features
- š Secure sign-in and user management to keep each userās data safe.
- š§¾ Easily create and manage invoices for sold items.
- š Download invoices in a PDF template.
- š Keep track of all invoice data with comprehensive records.
- š Get an overview of sales with a dynamic dashboard.
- šļø Customize your dashboard view with daily, weekly, monthly, or all-time preference option.
Technologies
- Next.js: A React framework for server-rendered and statically generated web applications.
- TypeScript: For adding static type definitions.
- Supabase: An open-source backend-as-a-service platform that provides real-time databases and authentication.
- Shadcn UI: A collection of components for building UI.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
- InvoiceTemplateJsPdf: A library for creating PDF invoices using JavaScript.
The Process
I began by setting up the backend with Supabase. I designed a database schema featuring three key tables: invoices for all invoice data, invoice_items for individual items, and profiles for user and his company details.
For the frontend, I chose Next.js and Shadcn UI. Next.js helped me lay the foundation, while Shadcn UI allowed me to craft a sleek and functional user interface.
User authentication was powered by Supabaseās built-in features, ensuring a secure and seamless experience. I also created an onboarding screen to collect and store user and his company data in the profiles table.
Managing invoices was next. I integrated the Supabase API to both create and display invoices. To handle PDF generation, I used a library to create and format invoices based on a template.
Lastly, I built a dynamic sales dashboard to show analytics. By fetching data from Supabase, I was able to populate the dashboard and display key metrics, providing users with valuable sales analytics.
Along the way, while building everything, I took notes on what Iāve learned so I donāt miss out on it. I also documented the behind-the-scenes processes every time a feature was added.
Itās funny how writing down what Iāve built made me understand it better. When I started documenting the features and processes, I realized that stepping back and reflecting on it really helps me get a clearer picture. Itās a great habit to develop when learning something new.
Images
Dashboard:
Create Invoice:
Invoice Pdf:
Demo
You can view a fully working demo at trade-ease.vercel.app.
Test User Credentials: Email: Zubairimtiaz395@gmail.com Password: Zubi1234.
Feel free to generate an invoice with your name for test purposesājust donāt go overboard and crash the system! š
How it can be improved
- Public Sign-Ups: Our current architecture can handle multiple user data concurrently, so the next step is to enable public sign-ups, allowing a broader user base to access and utilize the app.
- Custom Product Management: Allow users to add their own products and customize product attributes, such as size, to better fit their specific needs.
- Additional PDF Templates: Expand the range of available PDF invoice templates to offer more options for users, enabling them to choose or design templates that best suit their branding and presentation needs.