Mesos is a financial dashboard application that offers users a comprehensive overview of their transactions, income, and expenses. Built with Next.js, TypeScript, and Tailwind CSS, it features dynamic charts, account insights, and a customizable date range selector to provide detailed financial reports.
-
Financial Overview: Get insights on remaining balances, income, and expenses.
-
Customizable Reports: Select date ranges and filter by account to view detailed financial summaries.
-
Data Visualizations: Leverage multiple graphs and charts to easily view your financial insights at a glance.
-
Secure Authentication: Integrated with Clerk for user authentication.
-
Responsive Design: Optimized for all screen sizes with a clean and intuitive UI.
-
Bulk Delete and Bulk Imports for transactions: Easily bulk import transaction data from a .csv file and bulk delete accounts, transactions, and categories.
Note: As a default, the API only returns the last 30d of transactions if filters aren't set.
-
Frontend: Next.js, React, TypeScript, Tailwind CSS
-
State Management: React Query, Zustand
-
Backend: Drizzle ORM, Hono, Neon Database (PostgreSQL), Clerk
-
Charts: Recharts
- Clone the repository:
git clone https://github.com/Phil1999/Mesos.git
cd mesosInstall dependencies:
npm installSet up environment variables: Duplicate .env.example to .env.local and fill in the required fields.
Run the development server:
npm run devAccess the app at http://localhost:3000.
dev: Start the development server.
npm run devbuild: Build the project for production.
npm run buildstart: Start the production server.
npm startdatabase:
npm run db:generate
npm run db:migrate
npm run db:seed # optionally fill in db with seed script.
npm run db:studio # View the database locally at https://local.drizzle.studioScreenshots
