Next.js 14 Expense Tracker and Money Manager App

Set up sign-in and sign-up pages using Clerk in a Next.js 14 app, configure environment variables, wrap the app with ClerkProvider, and implement custom sign-in and sign-up pages.

Explore sign-in and sign-up workflows in the Next.js 14 expense tracker app, including OTP email verification, user creation, current user details, and sign-out redirects.

Style the sign in and sign up pages for the Next.js 14 expense tracker using a bg jar svg background, auth.css, centered forms, Montserrat font, and tailwind colors.

Develop a mongoose user model to store clerkUserId, name, email, and username in MongoDB, with default income and expense categories, and implement a server action to save user data.

Write a server action to store the current user in MongoDB on first login, checking for existing users via clerk ID and creating a new record if none exists.

Implement a private layout in a Next.js 14 expense tracker app with a shared header and layout provider, fetching the logged-in user from MongoDB and fixing sign-out routing.

Conditionally render the layout in Next.js 14 by excluding sign in and sign up pages, using use path name with a layout provider to fetch current user for private routes.

Learn to implement a global user store with Zustand for the Next.js 14 expense tracker app, exposing a logged-in user across pages and header, with a setLoggedInUser function.

Build a profile page in a Next.js 14 expense tracker app, displaying user details and managing income and expense categories with add, delete, and save actions that persist updates.

Show default income and expense categories, enable on-the-fly edits with remove buttons, and add new categories via a modal, updating state for future profile updates.

Create the transactions module for the Next.js 14 expense tracker, enabling add, display, and editing of transactions with a reusable transaction form and a structured, underscore-named folder layout.

Build a dynamic transaction form for the next.js expense tracker, updating categories by income or expense and submitting name, date, amount, type, category, and description.

Create a Mongoose transaction model with fields user, name, amount, type, category, date, and optional note, and implement a save new transaction server action with validation and loading states.

Show transactions in Next.js 14 expense tracker by wiring get transactions server action and rendering a server data component with a client transactions table for date, amount, type, and category.

Learn the edit transaction workflow in a Next.js 14 expense tracker: populate details, pass initial values with JSON.stringify, and update by id with a server action.

Implement delete transaction functionality by passing the transaction ID to a server action, revalidating the page after deletion, while disabling the table and showing loading, success, or error messages.

Design a filters UI for the Next.js expense tracker, applying and displaying transaction filters via query strings. Build a root-level filters component with a modal and an applied filters list.

Show applied expense filters and build a dynamic URL with URL search params, update the Next.js router on filter changes, render closable filter tags, and handle the no filters state.

Learn to implement filters for a Next.js 14 expense tracker using server actions. Manage search params, clear filters, and date, type, category, and sort filters with loading states.

Create four statistics cards showing total income, total expense, total transactions, and total balance by aggregating transactions, formatting currency, and building a responsive grid in the Next.js 14 expense tracker.

Build the data structure for income and expense analysis in the dashboard using category-based objects and totals, then map it to a pie chart-friendly format for visualization.