Expense Tracker
Next JSPostgreSQLtRRPCPrismaShadCNTailwind CSSAuth JSRecharts
A responsive web application to help users manage their finances by recording their expenses and visualize their spending habits. It simplifies budgeting and provides insights to make smarter financial decisions.
Features
- Comprehensive Expense Management: Categorize transactions, record expenses, and monitor financial trends with ease.
- Discord OAuth Integration: Secure and seamless user authentication for a smooth login experience.
- Visual Spending Analytics: Interactive charts to help users understand and analyze their financial patterns.
- Responsive Design: Optimized for web with fast load times and compatibility across all devices.
- Theme Customization: Supports dark mode and light mode for a personalized user experience.
Tech Stack
- Database: PostgreSQL (Supabase)
- Backend: Next JS, tRPC, Prisma, Auth JS
- Frontend: React JS, Tailwind CSS, Shadcn UI
- VCS and Deployment: Git, GitHub, Vercel
Learnings
- Gained hands-on experience with advanced features like Server-Side Rendering (SSR) and Static Site Generation (SSG)
- Learned to effectively integrate these tools to create a robust and type-safe backend connected to a PostgreSQL database.
- Implemented secure user authentication using Discord OAuth, improving my understanding of OAuth flows.
- Enhanced my design skills by creating a responsive and visually appealing interface using Tailwind CSS, including light and dark themes.
- Mastered the use of ReCharts to build interactive and insightful spending analytics for users.
Customizable bar chart page