https://smart-trackwise.vercel.app
This is my first fully deployed full-stack application, built through Project-Based Learning. I created this project to apply and solidify my understanding of modern web development concepts by solving real-world problems. It represents a significant milestone in my learning journey, moving from local development to a live production environment.
Key Concepts Learned and Applied:
- Advanced Authentication: Implemented secure JWT authentication using Access & Refresh Token Rotation for seamless and secure user sessions.
- Security Best Practices: Integrated Rate Limiting to prevent abuse, Input Sanitization to block XSS attacks, and Image Validation for safe uploads.
- AI Integration: Integrated Google Gemini AI to process unstructured receipt images and convert them into structured JSON data.
- Full Stack Architecture: Built a complete REST API with Node.js/Express and a reactive frontend with React.
- Deployment: Configured a split-stack architecture, handling CORS policies, environment variables, and production builds on Vercel and Render.
- Token Management: Secure implementation of Access Tokens (short-lived) and Refresh Tokens (long-lived/rotated).
- Rate Limiting: Backend protection against brute-force and DDoS attacks.
- Data Protection: Input sanitization and comprehensive image validation.
- Account Controls: Secure "Change Password" and "Delete Account" features.
- Themes: Full Dark Mode / Light Mode support.
- Privacy Mode: One-click feature to blur sensitive financial amounts (Privacy Mode UI).
- Localization: customizable Currency, Date Format, and Number Format settings.
- Smart Scanning: AI-powered receipt scanning (Merchant, Date, Total).
- Advanced Search: Backend-driven search and filtering for transactions.
- Smart Dashboard: "Today", "This Week", and "Monthly" expense visualization logic.
- UX Improvements: Interactive Toasts for feedback and Loading Spinners for better perceived performance.
- Frontend: React (Vite), Tailwind CSS, ShadCN UI, Recharts, Lucide React
- Backend: Node.js, Express.js, Multer
- Database: MongoDB Atlas (Mongoose)
- AI: Google Gemini API
- Tools: JWT, Axios, Express-Rate-Limit
- Cloudinary Integration: For permanent and scalable receipt image storage (currently using local storage).
- Advanced Analytics: Personalized spending breakdowns with pie charts and monthly comparison bars.
- Mobile App: Developing a React Native version for on-the-go scanning.
- Export Data: Feature to download transaction history as CSV or PDF files.