A modern financial management application built with Next.js, designed to help users track, analyze, and manage their financial transactions efficiently.

• Features
• Tech Stack & Libraries
• Getting Started
• Project Structure
• Environment Variables
• Database & Seeding
• Development Notes
• License

• Transaction Management: Add, edit, and delete financial transactions.
• Dashboard: Visual summaries and trends of your finances.
• Dark Mode: Toggle between light and dark themes.
• Form Handling & Validation: Robust forms using react-hook-form and Zod.
• Loading Skeletons: Smooth UX with skeleton loaders during data fetch.
• Server Actions: Efficient server-side data manipulation and caching.
• Database Seeding: Automated initial data setup for development/testing.
• Error Boundaries: Graceful error handling in the UI.

• Framework: Next.js
• Styling: Tailwind CSS
• Database: Supabase (SQL, server actions, seeding)
• API Mocking: JsonServer
• Icons: lucide-react
• State & Cookies: react-cookie
• Form Handling: react-hook-form
• Validation: Zod
• Utilities: tailwind-merge, custom hooks, and utility functions
• Other: React Suspense, forwardRef, dotenv, RPC (Remote Procedure Calls)

git clone <your-repo-url>
cd NextJs_financeApp

npm install
# or
yarn install
# or
pnpm install

Create a .env.local file in the root directory and add the required environment variables (see Environment Variables).

node seed.mjs

npm run dev
# or
yarn dev
# or
pnpm dev

Visit http://localhost:3000 to view the app.

NextJs_financeApp/
│
├── app/                # Next.js app directory (pages, layouts, components)
│   ├── dashboard/      # Dashboard and transaction management
│   ├── (auth)/         # Authentication pages and logic
│   └── components/     # Shared UI components
│
├── components/         # Reusable UI components
├── hooks/              # Custom React hooks
├── lib/                # Utilities, constants, validation, Supabase logic
├── db.json             # JsonServer mock data
├── seed.mjs            # Database seeding script
├── tailwind.config.js  # Tailwind CSS configuration
├── next.config.mjs     # Next.js configuration
└── ...

Create a .env.local file and add the following (example):

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# Add other environment variables as needed

• The app uses Supabase for storing and querying transactions.

• To seed the database with initial data, run:

  node seed.mjs

• For local development, you can also use db.json with JsonServer.

• Server Actions: Utilizes Next.js server actions for secure data operations and caching.
• Form Validation: All forms are validated using Zod schemas.
• Error Handling: React Error Boundaries are implemented for robust error management.
• Loading States: Skeleton components provide feedback during async operations.
• Dark Mode: Toggle available in the UI, with preference saved in cookies.

This project is licensed under the MIT License.

Feel free to further customize this README for your team or deployment needs! If you need a specific section or more details, let me know.