Findash - Financial Dashboard

Findash is a comprehensive financial dashboard that helps users track, analyze, and manage their financial data. The project leverages Next.js, React, Tailwind CSS, and Drizzle ORM with PostgreSQL for efficient data management and a user-friendly UI.

Table of Contents

• Features
• Tech Stack
• Installation
• Environment Variables
• Running the Project
  • Using Bun
  • Using Node.js with TSX
• Deployment
  • Vercel
  • Netlify
  • Render
  • Railway
• Scripts
• License

Features

• Real-time financial data tracking
• Visual financial insights with charts and graphs
• Expense and income management
• Investment portfolio tracking
• User authentication via Clerk
• Dark mode support

Tech Stack

• Frontend: Next.js, React, Tailwind CSS, Radix UI
• Backend: Drizzle ORM, PostgreSQL, Hono (for serverless functions)
• Authentication: Clerk
• State Management: Zustand
• Forms: React Hook Form with Zod validation
• Charts: Recharts
• Database: PostgreSQL hosted on Neon.tech

Installation

Prerequisites

• Node.js (>= 18.0.0) or Bun (>= 1.0.0)
• PostgreSQL (or use a hosted solution like Neon.tech)
• Clerk Account for authentication (Clerk.dev)

Steps

1. Clone the repository:

   git clone https://github.com/yourusername/findash.git
   cd findash

2. Install dependencies:

   • Using Node.js:

     npm install

   • Using Bun:

     bun install

3. Set up environment variables:

   • Copy .env.example to .env
   • Fill in the required environment variables (see Environment Variables).

   cp .env.example .env

Environment Variables

You need to configure the following environment variables in a .env file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
DATABASE_URL=
NEXT_PUBLIC_APP_URL=

• Get the Clerk keys from Clerk's dashboard.
• Get the database credentials from your PostgreSQL provider (e.g., Neon.tech).

Running the Project

Using Bun

If you prefer to use Bun, the project is already set up to work seamlessly with it.

1. Start the development server using Bun:

   bun run dev

2. For production builds:

   bun run build
   bun run start

3. Running Drizzle ORM database scripts with Bun:

   • Generate schema:

     bun run db:generate

   • Run migrations:

     bun run db:migrate

   • Seed the database:

     bun run db:seed

Using Node.js with TSX

If you're using Node.js and want to execute TypeScript files, TSX is a great option.

1. Install TSX globally:

   npm install -g tsx

2. Modify the package.json to use tsx for running TypeScript scripts:

   "scripts": {
     "db:migrate": "tsx ./scripts/migrate.ts",
     "db:seed": "tsx ./scripts/seed.ts"
   }

3. Run database scripts with Node.js using TSX:

   • Run migrations:

     npm run db:migrate

   • Seed the database:

     npm run db:seed

Deployment

Vercel

1. Install the Vercel CLI if you haven't already:

   npm install -g vercel

2. Deploy your project:

   vercel

3. Follow the prompts to link or create a new project.

4. Set up environment variables on Vercel's dashboard under "Settings".

Netlify

1. Install the Netlify CLI if you haven't already:

   npm install -g netlify-cli

2. Deploy your project:

   netlify deploy

3. Follow the prompts to link or create a new site.

4. Set up environment variables on Netlify's dashboard under "Site settings" > "Build & deploy" > "Environment".

Render

1. Install the Render CLI if you haven't already:

   npm install -g render-cli

2. Deploy your project:

   render deploy

3. Follow the prompts to link or create a new web service.

4. Set up environment variables on Render's dashboard under "Environment".

Railway

1. Install the Railway CLI if you haven't already:

   npm install -g railway

2. Deploy your project:

   railway up

3. Follow the prompts to link or create a new project.

4. Set up environment variables on Railway's dashboard under "Settings".

Scripts

• npm run dev or bun run dev: Starts the development server.

• npm run build or bun run build: Builds the app for production.

• npm run start or bun run start: Starts the production server.

• npm run lint or bun run lint: Runs ESLint for code quality checks.

• npm run format or bun run format: Formats code using Prettier.

• npm run db:generate or bun run db:generate: Generates Drizzle ORM schema from PostgreSQL.

• npm run db:migrate or bun run db:migrate: Runs database migrations.

• npm run db:seed or bun run db:seed: Seeds the database.

• npm run db:studio or bun run db:studio: Opens Drizzle Studio for database inspection.

License

This project is licensed under the MIT License. See the LICENSE file for more details.