A modern, full-stack personal finance tracking application built with Next.js 15, TypeScript, and Tailwind CSS. Zen Finance helps you manage your finances with a clean, intuitive interface and powerful features.
- 📊 Interactive dashboards with Recharts
- 💰 Transaction tracking and management
- 🔐 Secure authentication with Clerk
- 📱 Responsive design for all devices
- 🎨 Dark/Light theme support
- 📈 Data visualization and analytics
- 📤 CSV import/export functionality
- 🔄 Real-time updates
- 🗃️ Database management with Drizzle ORM
Check out the live version of the app: https://zen-finance.vercel.app/
- Node.js (v18.18.0 or higher)
- npm or yarn
- A Clerk account for authentication
- NeonDB account (or another PostgreSQL database)
- Clone the repository
git clone https://github.com/yourusername/zen-finance.git
cd zen-finance- Install dependencies
npm install
# or
yarn install- Set up environment variables
Create a .env file in the root directory with the following variables:
# Authentication (Clerk)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key
# Database
DATABASE_URL=your_database_url
# App
NEXT_PUBLIC_APP_URL=http://localhost:3000- Set up the database
# Generate database schema
npm run db:generate
# Run migrations
npm run db:migrate
# (Optional) Seed the database with sample data
npm run db:seed- Start the development server
npm run dev
# or
yarn devThe application will be available at http://localhost:3000.
- Next.js - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Radix UI - Accessible components
- React Query - Data fetching
- Recharts - Data visualization
- Framer Motion - Animations
- Zustand - State management
- Hono - API routing
- Drizzle ORM - Database ORM
- NeonDB - PostgreSQL database
- Clerk - Authentication
- Zod - Schema validation
zen-finance/
├── src/
│ ├── app/ # Next.js pages and API routes
│ ├── components/ # Reusable UI components
│ ├── db/ # Database schema and configurations
│ ├── features/ # Feature-specific components and logic
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and shared logic
│ ├── providers/ # React context providers
│ └── styles/ # Global styles and Tailwind configurations
├── public/ # Static assets
├── scripts/ # Database and utility scripts
└── drizzle/ # Database migrations
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run db:generate- Generate database schemanpm run db:migrate- Run database migrationsnpm run db:seed- Seed database with sample datanpm run db:studio- Open Drizzle Studio
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.