💰 Personal Finance Manager - GraphQL Application

A modern full-stack personal finance management application built with GraphQL, React, and Node.js. This project demonstrates advanced web development concepts including real-time data management, authentication, and responsive design.

+## 🚀 Live Demo

[Demo Link - (https://graphql-learn.onrender.com)]

✨ Features

+### 🔐 Authentication & Security

• User Registration & Login with secure password hashing
• Session Management using Express sessions with MongoDB store
• Protected Routes with GraphQL context-based authentication
• Passport.js Integration for robust authentication flow

💳 Financial Management

• Transaction Tracking with detailed categorization
• Multiple Payment Types (Cash, Card)
• Smart Categories (Saving, Expense, Investment)
• Location Tracking for transaction history
• Date-based Organization with timestamps

📊 Analytics & Visualization

• Interactive Charts using Chart.js and React-Chartjs-2
• Real-time Data Updates with GraphQL subscriptions
• Responsive Dashboard with modern UI/UX
• Data Export Capabilities

🎨 Modern UI/UX

• Responsive Design that works on all devices
• Smooth Animations with Framer Motion
• Toast Notifications for user feedback
• Modern Styling with Tailwind CSS
• Dark/Light Mode support

🛠️ Tech Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• Apollo Server - GraphQL server implementation
• MongoDB - NoSQL database
• Passport.js - Authentication middleware
• bcryptjs - Password hashing

Frontend

• React 19 - UI library with latest features
• Vite - Fast build tool and dev server
• Apollo Client - GraphQL client
• React Router - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Chart.js - Data visualization
• React Hot Toast - Notification system

Development Tools

• ESLint - Code linting
• Nodemon - Development server with auto-reload
• PostCSS - CSS processing

📁 Project Structure

graphql-learn/
├── backend/
│   ├── models/              # MongoDB schemas
│   │   ├── user.model.js    # User data model
│   │   └── transaction.model.js # Transaction data model
│   ├── typeDefs/            # GraphQL schema definitions
│   │   ├── user.typeDef.js  # User GraphQL types
│   │   ├── transaction.typeDef.js # Transaction GraphQL types
│   │   └── index.js         # Merged type definitions
│   ├── resolvers/           # GraphQL resolvers
│   ├── passport/            # Authentication configuration
│   ├── db/                  # Database connection utilities
│   ├── dummyData/           # Sample data for development
│   └── index.js             # Main server file
├── frontend/
│   ├── src/
│   │   ├── components/      # Reusable React components
│   │   ├── pages/           # Page components
│   │   │   ├── HomePage.jsx # Dashboard page
│   │   │   ├── LoginPage.jsx # Authentication page
│   │   │   ├── SignUpPage.jsx # Registration page
│   │   │   └── TransactionPage.jsx # Transaction details
│   │   ├── graphql/         # GraphQL queries and mutations
│   │   ├── utils/           # Utility functions
│   │   └── assets/          # Static assets
│   ├── public/              # Public assets
│   └── package.json         # Frontend dependencies
└── package.json             # Root project configuration

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or cloud instance)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/yourusername/graphql-finance-manager.git
   cd graphql-finance-manager

2. Install dependencies

   # Install root dependencies
   npm install
   
   # Install frontend dependencies
   npm install --prefix frontend

3. Environment Setup Create a .env file in the root directory:

   MONGO_URI=your_mongodb_connection_string
   SESSION_SECRET=your_session_secret_key
   NODE_ENV=development

4. Database Setup

   • Ensure MongoDB is running
   • The application will automatically create collections on first run

5. Run the application

   # Development mode
   npm run dev
   
   # Production build
   npm run build
   npm start

6. Access the application

   • Frontend: http://localhost:3000
   • GraphQL Playground: http://localhost:4000/graphql

🔧 Development

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm start           # Start production server

# Frontend specific
npm run dev --prefix frontend    # Start frontend dev server
npm run build --prefix frontend  # Build frontend
npm run lint --prefix frontend   # Lint frontend code

Build Process

# Build the entire application
npm run build

# Start production server
npm run start

👨‍💻 Author

NUT INORN

• GitHub: @inornnut01
• LinkedIn: Nut Inorn
• Portfolio:

🙏 Acknowledgments

• Apollo GraphQL team for excellent documentation
• React team for the amazing framework
• Tailwind CSS for the utility-first approach
• MongoDB team for the robust database solution

---

⭐ Star this repository if you found it helpful!