Sonjoy C. Barman
Full Stack Dev building scalable SaaS apps with Next.js
New to Contra
Sonjoy is ready for their next project!
FinanceAI ā AI-Powered Personal Finance & Expense Tracker
Overview
FinanceAI is a modern full-stack web application designed to help users manage their personal finances more effectively using AI. It combines real-time expense tracking with intelligent financial insights powered by Googleās Gemini 3 Flash model.
Problem
Most expense tracking tools only record transactions but fail to provide actionable insights. Users often struggle to understand their spending behavior and improve their financial habits.
Solution
FinanceAI solves this by integrating AI directly into the financial workflow. The system analyzes user spending patterns and generates personalized insights, budget recommendations, and savings strategies in real time.
Key Features
AI Financial Insights: Generates smart recommendations based on user data
Expense Tracking: Categorized tracking across multiple spending types
Interactive Dashboard: Visual breakdown of expenses using charts
Smart Budgeting: Monthly budget control with overspending alerts
Secure Authentication: JWT-based login with protected sessions
Modern UI/UX: Smooth animations and responsive design
Tech Stack
Frontend: Next.js, React, TypeScript
Backend: Next.js API Routes (serverless architecture)
Database: MongoDB with Mongoose
Authentication: NextAuth.js (JWT, bcryptjs)
AI Integration: Google Gemini 3 Flash API
Visualization: Recharts
Styling & Animation: Tailwind CSS, GSAP
My Role
Designed and developed the full-stack architecture
Integrated AI for real-time financial analysis
Built responsive UI with modern animations
Implemented secure authentication and API structure
Optimized performance and data flow
Outcome
FinanceAI demonstrates how AI can enhance traditional financial tools by transforming raw expense data into meaningful, actionable insights. It highlights my ability to build scalable, AI-driven applications with a strong focus on user experience and clean architecture.
Links
Live Demo: https://web-finance-ai.vercel.app/
1
26
Nova Creator OS: Premium Portfolio & Analytics Platform
Elevate your personal brand with Nova, a cutting-edge portfolio platform designed specifically for high-impact digital creators and influencers. Built on the powerhouse combination ofĀ Next.js 15 and React 19, Nova isn't just a websiteāit's a complete digital business card.
Designed to wow brands and followers alike, Nova features high-performance animations, a built-in case study showcase, and a dedicated analytics dashboard to prove your value to sponsors. Whether you are a YouTuber, Instagrammer, or digital entrepreneur, Nova provides the tools you need to secure more deals and sell your services professionally.
Highlights
ā”ļø Bleeding Edge Tech Stack: Built with Next.js 15 (App Router), React 19, and TypeScript for future-proof performance.
šØ Stunning Visuals: Immersive animations and micro-interactions powered by Framer Motion and Three.js.
š Analytics Dashboard: A dedicated section to showcase your social reach, engagement rates, and growth metrics to potential sponsors.
š° Monetization Ready: Pre-configured with Stripe integration to sell services or products directly.
š¤ Brand Collaboration Hub: distinctive layouts to highlight past partnerships, ambassadorships, and testimonials.
š± Fully Responsive: Mobile-first design that looks perfect on every device.
š Modular UI Kit: Built with Radix UI and Tailwind CSS for accessible, easily customizable components.
š SEO Optimized: 100% Lighthouse scores with best-in-class SEO practices and metadata configuration.
1
31
Aura Salon - Premium React Beauty Salon & Spa Website Template.
Aura SalonĀ is a meticulously crafted, modern React website template tailored for beauty salons, hairdressers, spas, and wellness centers. Built withĀ React 19,Ā TypeScript, andĀ Tailwind CSS, it combines cutting-edge performance with an elegant design to help you turn visitors into loyal clients.
This single-page application (SPA) offers a seamless browsing experience, enhanced byĀ GSAPĀ (GreenSock Animation Platform) for buttery-smooth scroll animations and interactions. It comes fully equipped with essential sections to showcase your brand, services, and work.
Key Features:
Modern & Elegant Design: A clean, minimalist aesthetic with a focus on visual storytelling, perfect for high-end beauty brands.
Smooth Animations: Integrated GSAP ScrollTrigger animations bring the page to life as users scroll.
Fully Responsive: Looks flawless on all devices, from desktops to mobile phones.
Component-Based Architecture: Built with reusable React components and Radix UI primitives for maximum flexibility and accessibility.
Hero Section: Captivating landing area with call-to-action buttons.
Services Showcase: detailed list of treatments and prices.
Image Gallery: A masonry-style or grid gallery to display your portfolio.
Testimonials: Social proof section to build trust with potential clients.
Contact & Location: Integrated contact form (powered by React Hook Form & Zod) and location details.
Fast Performance: Powered by Vite for lightning-fast loading and development.
Uses:
Hair Salons & Barbershops
Nail Salons & Spas
Massage Therapy Centers
Skincare & Dermatology Clinics
Makeup Artists' Portfolios
1
32
Gentleman's Edge - Premium Barbershop & Men's Grooming Website Template.
Gentleman's EdgeĀ is a premium, feature-rich website template designed specifically for luxury barbershops, men's grooming salons, and styling studios. Built with cutting-edge web technologies and featuring stunning scroll-based animations, this template delivers a sophisticated online presence that matches the premium nature of high-end grooming services.
Why This Template Stands Out:
šÆĀ Professional-Grade AnimationsĀ Every section features meticulously crafted GSAP animations with ScrollTrigger integration. From parallax effects to stagger animations and smooth transitions, this template creates an immersive user experience that keeps visitors engaged.
ā”Ā Performance-First ArchitectureĀ Built with Vite for lightning-fast development and optimized production builds. The modular component structure ensures excellent performance scores and fast page load times.
šØĀ Premium Design System
Custom Tailwind CSS configuration with barbershop-specific design tokens.
Dual-font typography system (Oswald for headings, Inter for body).
Professional color palette centered around black, white, and signature red accents.
Responsive grid layouts optimized for all screen sizes
1
33
Zikanti Book Reading Website
Creating the Zikanti website using Tailwind CSS and the latest version of Next.js involves creating a visually appealing and efficient website that adheres to best practices. Here's a detailed description of the approach you can take:
1. Project Setup:
Initialize a Next.js project with version 14 to leverage the latest features and improvements.
Integrate Tailwind CSS using the recommended method, such asĀ @tailwindcss/jit.
2. Folder Structure:
Organize your project with a clean and modular folder structure.
Use components for reusable UI elements.
Keep styles, images, and other assets well-organized.
3. Responsive Design:
Implement a responsive design to ensure an optimal viewing experience across various devices and screen sizes.
Utilize Tailwind CSS responsive classes to handle different breakpoints.
4. Styling with Tailwind:
Leverage Tailwind CSS utility classes for styling, ensuring a clean and efficient design process.
5. Performance Optimization:
Optimize images and assets for faster page loading.
Implement lazy loading for images and use the appropriate Next.js features for code splitting and efficient resource loading.
6. SEO Best Practices:
Implement SEO-friendly meta tags, including title, description, and Open Graph tags.
Use semantic HTML5 tags for improved search engine optimization.
7. Deployment:
Choose a suitable hosting platform for your Next.js application.
Set up continuous deployment for seamless updates.
8. Testing:
Write unit tests for critical components and functions.
Perform cross-browser testing to ensure compatibility.
9. Documentation:
Document your code, especially if working in a team.
Include a README file with instructions for setting up the project and running it locally.
1
35
š Excited to share my latest project: AI-Powered Resume Analyzer & ATS Optimizer. I built a full-stack, AI-driven SaaS application that helps users analyze and improve their resumes based on ATS (Applicant Tracking System) standards.
š” The idea was simple:
Most resumes fail not because of skills, but because they are not ATS-friendly.
So I built a platform that not only scores resumes but also improves them intelligently using AI.
š Key Features:
ā¢ AI-powered ATS scoring (0ā100) with detailed section-wise breakdown
ā¢ Smart AI suggestions to rewrite weak content using professional language
ā¢ Side-by-side comparison (original vs. improved) with one-click copy
ā¢ PDF & DOCX resume parsing with cloud storage
ā¢ Modern SaaS dashboard with dark/light mode and smooth UI interactions
ā¢ Secure Google authentication with full history tracking
āļø Tech Stack:
Next.js, TypeScript, Tailwind CSS, Shadcn UI, MongoDB, Mongoose, NextAuth, UploadThing, Google Gemini AI
šÆ What I focused on:
Clean and scalable architecture
Real-world SaaS UI/UX (inspired by Vercel & Stripe)
Performance optimization and smooth user experience
AI integration for practical use cases (not just demo)
This project helped me deepen my understanding of:
š AI integration in real applications
š Building production-ready SaaS products
š Designing modern dashboards with great UX
1
34