Trackr is designed to help users manage their finances with ease. This full-stack app allows users to sign up for an account to create, update, and delete their invoices and expenses, making it simple to keep track of their finances.
- Next.js
- MongoDB
- Clerk
- TailwindCSS
- Call to action buttons for signing up and logging into an account with email & password using Clerk Authentication
- View Demo button to allow users to test out the application as a demo user
- Displays the total dollar amount of invoices and expenses
- Displays bar graph to visually represent the total amount for each month in a year view
-
- Toggle theme between light and dark mode
- Create, read, update, and delete invoices and expenses
- Receive form validations when trying to create/edit an invoice or expense
- Save invoices as drafts and mark pending invoices as paid
- Filter invoices by status (Draft, Pending, Paid)
- Create, read, update, and delete expenses
- Receive form validations when trying to create/edit an expense
- Mark pending expenses as paid
- Filter expenses by status (Pending, Paid)
- how to use Clerk's Next.js SDK for authentication and user management
From the repo:
- Clone this project locally
- Open the project in your preferred code editor
- Open your terminal and
cdto the project directory - Create
.envvariablesNEXT_PUBLIC_API_TOKENand API tokens from Clerk forNEXT_PUBLIC_CLERK_PUBLISHABLE_KEYandCLERK_SECRET_KEY - Run
npm installto install all relevant dependencies - Run
npm run devto start a dev server and view the project in your browser
- Store Receipts
- Users can upload a copy of their receipts within each invoice/expense
- Email invoices
- Sending an invoice will directly mail it to the client's inbox
- Search and Filters
- Easily find and filter invoices/tasks based on keywords, or expense categories, streamlining the search process