PennyWise is a sophisticated expense tracking application built with React and TypeScript and Node.js + Express.js Backend, featuring an intuitive interface and powerful visualization tools to help users manage their personal finances effectively.
- 📊 Interactive dashboards with spending analytics
- 💳 Detailed expense tracking and categorization
- 📈 Visual data representation with charts and graphs
- 💡 Smart saving tips and financial insights
- 🎯 Budget planning and goal setting
- 📱 Responsive design optimized for all devices
- React.js with TypeScript
- Tailwind CSS for styling
- Shadcn UI components
- Chart.js for data visualization
- React Query for data fetching
- React Hook Form for form management
Backend PennyWise Backend
- Node.js
- Express.js
- Environment variables (.env) for configuration
- Node.js (v16 or higher)
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/yourusername/PennyWise-Frontend-React.git-
Navigate to the project directory:
-
Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open your browser and visit
http://localhost:5173
src/
├── components/
│ ├── dashboard/
│ │ ├── layout/
│ │ ├── ui/
│ │ └── savingTips/
│ └── ui/
├── hooks/
├── styles/
└── types/
- Sign in to your account
- Navigate the dashboard to view your financial overview
- Add new expenses using the "Add Transaction" button
- View detailed analytics in the charts section
- Check saving tips for personalized financial advice
- Manage your expenses through the detailed expenses table
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request