Financial Goal-Based Task Manager

A lightweight web application that helps users turn long-term financial goals into actionable daily tasks. This app emphasizes behavioral finance and productivity by making financial progress tangible and motivating through simple, intentional design.

Features

• User Authentication - Secure login and signup system
• Goal Management - Create and manage financial goals (Savings, Debt Payoff, Investment, etc.)
• Task Tracking - Break down goals into actionable tasks
• Progress Visualization - Visual progress indicators and statistics
• Beautiful UI/UX - Professional design with smooth animations
• Responsive Design - Works seamlessly on desktop and mobile devices

Tech Stack

• React - UI library
• Vite - Build tool
• React Router - Navigation
• Framer Motion - Animations
• Tailwind CSS - Styling
• Lucide React - Icons
• date-fns - Date formatting

Getting Started

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

Usage

1. Sign Up/Login - Create an account or login with existing credentials
2. Create Goals - Add financial goals with descriptions and target amounts
3. Add Tasks - Break down each goal into actionable tasks
4. Track Progress - Monitor your progress through visual indicators
5. Complete Tasks - Mark tasks as complete to see your progress grow

Project Structure

src/
  ├── components/     # Reusable UI components
  ├── contexts/       # React context providers
  ├── pages/          # Page components
  ├── App.jsx         # Main app component
  ├── main.jsx        # Entry point
  └── index.css       # Global styles

Data Storage

Currently, the app uses localStorage for data persistence. In a production environment, you would want to replace this with a proper backend API.