Skip to content

niyati34/Arthik

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🏦 Arthik

The Modern Finance Management Platform

Take control of your financial future with intelligent insights and beautiful design

Live Demo Made with React Node.js Backend


🌟 Why Arthik?

"Your money should work as hard as you do. Arthik makes it simple."

Arthik isn't just another expense trackerβ€”it's your personal financial command center. Built for modern professionals who demand both power and simplicity.

✨ What Makes Us Different

🎯 Zero Learning Curve β€” Intuitive design that feels natural from day one
⚑ Lightning Fast β€” No loading screens, no lag, just pure performance
🎨 Beautiful Design β€” Professional aesthetic that doesn't sacrifice functionality
πŸ“± Mobile First β€” Perfect experience across all your devices


πŸš€ Key Features

πŸ’° Smart Income Tracking

  • Multi-source management with automatic categorization
  • Real-time insights into your earning patterns
  • Growth tracking with visual progress indicators

πŸ“Š Intelligent Expenses

  • Advanced filtering by category, date, and amount
  • Smart search across all transactions
  • Spending insights with actionable recommendations

🎯 Goal Achievement

  • Visual progress tracking for every financial goal
  • Milestone celebrations to keep you motivated
  • Smart notifications to stay on track

πŸ“ˆ Analytics Dashboard

  • Beautiful charts showing income vs expenses
  • Trend analysis to predict future patterns
  • Export capabilities for deeper analysis

�️ Built With Modern Tech

Frontend Backend Database Tools
React Node.js MongoDB ESLint
Styled Components Express MongoDB Atlas Jest
React Router JWT Prettier

οΏ½ Quick Start Guide

Prerequisites

  • Node.js 18+
  • npm or yarn
  • MongoDB Atlas account (free tier available)

⚑ Installation

# πŸ“₯ Clone the repository
git clone https://github.com/niyati34/Arthik.git
cd Arthik

# πŸ“¦ Install dependencies
npm install

# πŸ”§ Setup backend
cd backend
npm install

πŸ” Environment Configuration

Create .env in the backend/ directory:

MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_key
PORT=5000
NODE_ENV=development

🎯 Launch the Application

# πŸ–₯️ Terminal 1: Start Backend
cd backend
npm run dev

# 🌐 Terminal 2: Start Frontend
cd ..
npm start

πŸŽ‰ That's it! Open http://localhost:3000 and start managing your finances like a pro!


🎨 Design Philosophy

"Simplicity is the ultimate sophistication" β€” Leonardo da Vinci

Our Design Principles

🎯 Minimalist First
Clean interfaces that focus on what matters mostβ€”your financial data.

⚑ Performance Obsessed
Sub-second load times and smooth interactions on every device.

🌈 Consistent Experience
Unified color palette, typography, and spacing throughout the entire app.

β™Ώ Accessibility Built-in
WCAG AA compliant with full keyboard navigation and screen reader support.

Color System

/* 🎨 Brand Colors */
Primary: #10b981    /* Success Green */
Secondary: #339989  /* Teal Accent */
Background: #ffffff /* Clean White */
Text: #1f2937      /* Rich Dark */
Subtle: #f8fafc    /* Light Gray */

οΏ½ Project Architecture

πŸ—οΈ Arthik/
β”œβ”€β”€ �️ backend/           # API Server
β”‚   β”œβ”€β”€ πŸ“Š models/        # Database schemas
β”‚   β”œβ”€β”€ πŸ›£οΈ routes/        # API endpoints
β”‚   └── βš™οΈ config/        # Configuration
β”œβ”€β”€ 🌐 src/               # React Frontend
β”‚   β”œβ”€β”€ 🧩 Components/    # Reusable UI components
β”‚   β”‚   β”œβ”€β”€ πŸ“Š Dashboard/ # Main dashboard
β”‚   β”‚   β”œβ”€β”€ πŸ’° Income/    # Income management
β”‚   β”‚   β”œβ”€β”€ πŸ’Έ Expenses/  # Expense tracking
β”‚   β”‚   β”œβ”€β”€ 🎯 Goals/     # Goal setting
β”‚   β”‚   └── πŸ“ˆ Charts/    # Data visualization
β”‚   β”œβ”€β”€ 🎨 styles/        # Global styling
β”‚   β”œβ”€β”€ πŸ”— context/       # State management
β”‚   └── πŸ› οΈ utils/         # Helper functions
└── οΏ½ docs/              # Documentation

πŸ§ͺ Testing & Quality

Running Tests

# πŸ§ͺ Run all tests
npm test

# πŸ“Š Test coverage report
npm run test:coverage

# πŸ”§ Lint code
npm run lint

Quality Standards

  • 100% TypeScript coverage on critical paths
  • Jest + RTL for comprehensive component testing
  • ESLint + Prettier for consistent code style
  • Accessibility testing with axe-core

πŸ“Έ Screenshots

πŸ“Š Dashboard Overview

Clean, minimal interface showing your financial health at a glance

πŸ’° Income Management πŸ’Έ Expense Tracking
image image
🎯 Goal Setting πŸ“ˆ Analytics
image image

οΏ½ Note: Add your screenshots to docs/screenshots/ to display them here


πŸš€ Deployment

Frontend (Vercel - Recommended)

# πŸ—οΈ Build for production
npm run build

# πŸš€ Deploy to Vercel
npx vercel --prod

Backend (Railway/Render)

# Set environment variables
export MONGODB_URI=your_connection_string
export JWT_SECRET=your_secret
export NODE_ENV=production

# πŸš€ Deploy
npm run start:prod

πŸ› οΈ Development

Code Standards

  • Functional Components with hooks
  • Custom hooks for reusable logic (useDataFiltering, useNotifications)
  • Styled-components for component styling
  • Context API for global state management

Performance Optimizations

  • React.memo for expensive components
  • useMemo/useCallback for derived values
  • Lazy loading for route-based code splitting
  • Optimized bundle with Webpack analysis

οΏ½ Contributing

We welcome contributions! Here's how to get started:

  1. 🍴 Fork the repository
  2. 🌿 Create a feature branch (git checkout -b feature/amazing-feature)
  3. πŸ’Ύ Commit your changes (git commit -m 'Add amazing feature')
  4. πŸ“€ Push to the branch (git push origin feature/amazing-feature)
  5. 🎯 Open a Pull Request

Development Setup

# πŸ”§ Install dependencies
npm install && cd backend && npm install

# πŸ§ͺ Run tests
npm test

# 🎨 Check code style
npm run lint

πŸ—ΊοΈ Roadmap

πŸš€ Q1 2024

  • Multi-currency support
  • Bank integration APIs
  • Advanced charts with D3.js
  • Mobile app (React Native)

🎯 Q2 2024

  • AI insights and predictions
  • Investment tracking
  • Bill reminders
  • Receipt scanning

⚑ Q3 2024

  • Team collaboration
  • API for developers
  • Advanced reporting
  • White-label solution

οΏ½ License

MIT License - feel free to use this project for learning, personal use, or commercial applications.


πŸ’ Made with Love by the Arthik Team

⭐ Star this repo if it helped you manage your finances better!

GitHub stars GitHub forks

"Arthik empowers you to make every rupee count."

Releases

No releases published

Packages

No packages published

Languages