Track your income and expenses with Finance.

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

finance-dashboard/
  |- app/
    |-- (auth)/
    |-- (dashboard)/
    |-- api/
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- ui/
  |- config/
    |-- index.ts
  |- db/
    |-- drizzle.ts
    |-- schema.ts
  |- drizzle/
  |- features/
    |-- accounts/
    |-- categories/
    |-- summary/
    |-- transactions/
  |- hooks/
    |-- use-confirm.tsx
  |- lib/
    |-- hono.ts
    |-- utils.ts
  |- providers/
    |-- query-provider.tsx
    |-- sheet-provider.tsx
  |- public/
    |-- data.csv
    |-- github.svg
    |-- logo.svg
  |- scripts/
    |-- seed.ts
  |- .env.example
  |- .env.local
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc
  |- bun.lockb
  |- components.json
  |- drizzle.config.ts
  |- environment.d.ts
  |- middleware.ts
  |- next.config.mjs
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# .env.local

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk redirect url
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# neon db url
DATABASE_URL=postgresql://<username>:<password>@<hostname>/<database>?sslmode=require

# app base url
NEXT_PUBLIC_APP_URL=http://localhost:3000

5. Obtain Clerk Authentication Keys

   1. Source: Clerk Dashboard or Settings Page
   2. Procedure:
      • Log in to your Clerk account.
      • Navigate to the dashboard or settings page.
      • Look for the section related to authentication keys.
      • Copy the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY provided in that section.

6. Retrieve Neon Database URI

   1. Source: Database Provider (e.g., Neon, PostgreSQL)
   2. Procedure:
      • Access your database provider's platform or configuration.
      • Locate the database connection details.
      • Replace <username>, <password>, <hostname>, and <database> placeholders in the URI with your actual database credentials.
      • Ensure to include ?sslmode=require at the end of the URI for SSL mode requirement.

7. Specify Public App URL

   1. Procedure:
      • Replace http://localhost:3000 with the URL of your deployed application.

8. Save and Secure:

   • Save the changes to the .env.local file.

9. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

10. Migrate database:

In terminal, run npm run db:generate to generate database client and npm run db:migrate to make sure that your database is up-to-date along with schema.

11. Run the Seed Script:

In the same terminal, run the following command to execute the seed script:

npm run db:seed

This command uses npm to execute the Typescript file (scripts/seed.ts) and writes transaction data in database.

12. Verify Data in Database:

Once the script completes, check your database to ensure that the transaction data has been successfully seeded.

13. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Finance.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @clerk/backend: ^1.1.3
• @clerk/nextjs: ^5.0.8
• @hono/clerk-auth: ^2.0.0
• @hono/zod-validator: ^0.2.1
• @hookform/resolvers: ^3.3.4
• @neondatabase/serverless: ^0.9.3
• @paralleldrive/cuid2: ^2.2.2
• @radix-ui/react-checkbox: ^1.0.4
• @radix-ui/react-dialog: ^1.0.5
• @radix-ui/react-dropdown-menu: ^2.0.6
• @radix-ui/react-label: ^2.0.2
• @radix-ui/react-popover: ^1.0.7
• @radix-ui/react-select: ^2.0.0
• @radix-ui/react-separator: ^1.0.3
• @radix-ui/react-slot: ^1.0.2
• @radix-ui/react-tooltip: ^1.0.7
• @tanstack/react-query: ^5.35.5
• @tanstack/react-table: ^8.16.0
• class-variance-authority: ^0.7.0
• clsx: ^2.1.1
• date-fns: ^3.6.0
• drizzle-orm: ^0.30.10
• drizzle-zod: ^0.5.1
• hono: ^4.3.4
• lucide-react: ^0.378.0
• next: 14.2.3
• next-themes: ^0.3.0
• query-string: ^9.0.0
• react: ^18
• react-countup: ^6.5.3
• react-currency-input-field: ^3.8.0
• react-day-picker: ^8.10.1
• react-dom: ^18
• react-hook-form: ^7.51.4
• react-icons: ^5.2.1
• react-papaparse: ^4.4.0
• react-select: ^5.8.0
• react-use: ^17.5.0
• recharts: ^2.12.7
• sonner: ^1.4.41
• tailwind-merge: ^2.3.0
• tailwindcss-animate: ^1.0.7
• zod: ^3.23.8
• zustand: ^4.5.2
• @types/node: ^20
• @types/react: ^18
• @types/react-dom: ^18
• dotenv: ^16.4.5
• drizzle-kit: ^0.21.2
• eslint: ^8
• eslint-config-next: 14.2.3
• eslint-plugin-unused-imports: ^3.2.0
• pg: ^8.11.5
• postcss: ^8
• prettier: ^3.2.5
• prettier-plugin-tailwindcss: ^0.5.14
• tailwindcss: ^3.4.1
• typescript: ^5

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)