vihan
rojitha
Graduated in Information Technology from UCSC (University of Colombo School of Computing) with a 3.27 GPA. Skilled in full-stack development with hands-on experience in - Java, Spring Boot, JPA, Hibernate - React, Node.js, Express.js, Tailwind CSS, Bootstrap - REST APIs Design - Databases (MySQL, MongoDB, PostgreSQL) - On page SEO
Tech stack
Projects
T-Shirt Design Studio - Interactive 3D Design Platform (T-Shirt Design Platform)
🔖 Introduction About the project The T-Shirt Design Studio is an interactive web-based platform that combines powerful 2D design tools with real-time 3D visualization, enabling users to create custom apparel designs with unprecedented ease and precision. This project addresses the growing demand for personalized fashion by providing an intuitive yet sophisticated design interface that bridges the gap between professional design software and consumer-friendly applications. The platform empowers users to create custom t-shirt designs through an innovative dual-canvas system that shows both front and back views, with all changes instantly reflected in a photo-realistic 3D preview. By leveraging modern web technologies like React.js, Three.js, and Fabric.js, the project delivers a seamless design experience across all device types, allowing users to manipulate text, images, and shapes with professional-grade tools while immediately visualizing the end product in three dimensions. The result is a comprehensive design solution that democratizes custom apparel creation, giving both casual users and design professionals the ability to bring their creative visions to life with confidence before production. 🤔 Problem space Problems to solve/Requirements to Create Custom t-shirt design platforms often provide either basic 2D design tools with limited visualization or complex 3D tools with steep learning curves. Users struggle to accurately envision how their designs will look in real life. 👉 Problem: Disconnection between 2D design and 3D visualization Users have difficulty imagining how their 2D designs will translate to an actual three-dimensional garment, leading to customer dissatisfaction with final products and increased return rates. Current solution Most existing platforms either offer only 2D mock-ups with flat templates or separate 3D previews that don't update in real-time, forcing users to switch between different views and imagine the final result. How do we know it is a problem User feedback consistently mentions difficulty visualizing final products Competitors' reviews frequently cite poor visualization as a major pain point Why solve these problems? Reducing the gap between expectation and reality directly impacts return rates and customer satisfaction First-mover advantage in creating a truly accessible 3D design experience would establish market leadership Goals Company objective 🎯 💡 To create a modern custom apparel design platform that democratizes professional-quality design capabilities while providing accurate visualization, leading to higher customer satisfaction and reduced returns. Project goals Build an intuitive dual-canvas system that synchronizes with a real-time 3D model to bridge the 2D-3D gap Develop a responsive design system that provides a consistent experience across all device types Create a comprehensive yet accessible set of design tools that empower users of all skill levels Implement efficient state management and storage solutions to ensure a seamless user experience 🌟 Design space UI Design The T-Shirt Design Studio features an intuitive split-screen interface that balances powerful design capabilities with ease of use. Design system 🎨 The project utilizes a hybrid design system combining Shadcn/UI components with custom-built design elements specifically for canvas interaction. This approach provided several advantages: Shadcn/UI delivered consistent, accessible UI components for navigation, buttons, dropdowns, and modals while allowing customization to match the project's aesthetic. Custom canvas controls were developed to maintain consistency with Shadcn/UI while providing specialized functionality for design manipulation. Development Phase Technology Stack Selection 💡 Discuss why the Technologies and Tools you used are chosen 1. Frontend - React.js Component Architecture : Facilitates reusable and modular UI elements, crucial for a design tool with multiple interactive components. Virtual DOM : Enables efficient rendering of the constantly changing canvas state without performance issues. Ecosystem Compatibility : Seamlessly integrates with Fabric.js, Three.js, and other libraries central to the project. 2. Canvas Management - Fabric.js Object-Oriented Canvas : Provides robust object management for manipulating design elements. Event Handling : Offers sophisticated event system for interactions like dragging, rotating, and scaling. Serialization : Facilitates converting complex canvas states to JSON for storage and restoration. Text Handling : Delivers powerful text manipulation capabilities with support for multiple fonts and styles. 3. 3D Rendering - Three.js with React Three Fiber WebGL Abstraction : Three.js provides high-level access to WebGL for 3D rendering. React Integration : React Three Fiber bridges Three.js with React's component system for declarative 3D development. Performance : Optimized rendering pipeline for smooth real-time 3D visualization even on moderate hardware. Material System : Sophisticated material handling for realistic fabric visualization. 4. State Management - Redux Toolkit & Context API (Hybrid Approach) Separation of Concerns : Redux for serializable UI states, Context API for non-serializable canvas objects. Performance Optimization : Prevents unnecessary re-renders by isolating canvas operations from general UI state. Persistence : Redux states easily persist to LocalStorage while canvas states require specialized serialization. 5. Styling - Tailwind CSS with Shadcn/UI Utility-First Approach : Tailwind enables rapid UI development with minimal CSS overhead. Component Library : Shadcn/UI provides accessible, consistent UI components while maintaining styling flexibility. Theme Customization : Supports dark mode and custom theming for the design environment. Key Features of the Software 1. Dual-Canvas Design System with 3D Synchronization Created a custom Canvas Manager service that maintains separate Fabric.js instances for front and back views while sharing a common state management system. 2. Real-Time 3D Visualization Engine Built a Three.js-based rendering system with React Three Fiber that provides photorealistic visualization of designs on a 3D t-shirt model. 3. Advanced Text Manipulation System Developed a comprehensive text editing module with typography controls like font, color, and size. 4. Persistent Storage Architecture Created a storage system with local storage that maintains design state across sessions. Challenges Faced and Solutions Problem: Complex Canvas State Management Initially, storing the Fabric.js canvas state in Redux proved problematic due to: Circular references in canvas objects Non-serializable data structures Performance implications with complex designs Solution: Implemented a hybrid state management approach (Redux + Context API) Separate state management for different concerns Redux: UI states (colors, views, selections) Context API: Complex canvas operations LocalStorage: Design persistence Problem: Design Persistence Across Views Designs were disappearing during: Front/back view switches Component remounts Page refreshes Solution: Developed a custom storage management system: Future Vision / next steps Planned Features Sleeve design customization Additional t-shirt styles: V-neck Long sleeve Henley Polo shirts Enhanced export options
PerfectorCV AI (Resume Analyze, SaaS Application, AI WebApp)
🔖 Introduction About the project PerfectoCV is an AI-powered web application designed to give job seekers a critical advantage in the competitive tech industry. The goal was to solve a major pain point for applicants: getting past automated screening systems (ATS) and creating application materials that stand out to human recruiters. To address this, I designed and developed a complete, end-to-end solution. The application allows users to upload their resume and a specific job description, then instantly receive an AI-generated analysis. This report identifies missing keywords, provides improvement suggestions, and automatically generates a tailored cover letter and professional LinkedIn follow-up message. 🤔 Problem space Problems to solve In today's competitive job market, even highly qualified candidates struggle to get noticed. The hiring process is often automated and impersonal, creating significant challenges for job seekers who need to tailor their applications for every role. 👉 Problem: Resume Rejection by Automated Systems (ATS) Problem Statement: Most companies use Applicant Tracking Systems (ATS) to scan and filter resumes before they ever reach a human recruiter. A candidate's resume, even if perfect for the role, will be automatically rejected if it doesn't contain the specific keywords and phrases the system is looking for. Job seekers have no reliable way of knowing if their resume is optimized for these systems. Current solution: Currently, job seekers manually read through job descriptions, trying to identify and sprinkle important keywords into their resumes. This process is slow, inefficient, and often feels like guesswork. Others use basic online word cloud tools which provide a chaotic list of words that lack actionable context, or they pay expensive career coaches for a one-time review, which isn't scalable for multiple job applications. How do we know it is a problem Evidence: Industry reports consistently show that up to 75% of resumes are automatically rejected by ATS before reaching a human recruiter. User Feedback: Online forums and communities for job seekers are filled with posts expressing frustration about the "application black hole," where hundreds of applications yield no response. Metrics: The primary metric of failure for the current manual solution is a low application-to-interview conversion rate. Candidates spend hours tailoring their resumes with no guarantee of passing the initial automated screening, leading to burnout and missed opportunities. 👉 Problem: The Manual Burden of Customization Problem Statement: Writing a unique, compelling cover letter for every single application is incredibly time-consuming and mentally draining. This leads many applicants to use generic templates or skip cover letters altogether, missing a key opportunity to stand out and tell their story. The same applies to crafting professional follow-up messages after applying. Current solution: Job seekers often stare at a blank page, trying to rephrase the same points for different roles. They use generic, one-size-fits-all templates found online which lack personalization and often sound robotic. The process involves manually copying details from their resume and the job description, leading to a document that feels disjointed and takes hours to perfect. For follow-up messages, they either don't send one, or they send a simple, uninspired "Just checking in" email. How do we know it is a problem Evidence: Career experts and hiring managers consistently advise that a customized cover letter significantly increases an applicant's chances, yet acknowledge that most candidates fail to do this effectively due to the effort required. User Feedback: A common sentiment among job seekers is "I hate writing cover letters." They describe the task as their least favorite part of the application process, viewing it as a high-effort, low-reward activity due to the lack of response. Metrics: The primary metric is time. A user might spend 1-2 hours writing a single cover letter. For someone applying to 10-20 jobs, this becomes a significant time sink that detracts from other job-seeking activities like networking or interview preparation. The high effort leads to a high rate of abandonment for this crucial application step. 👉 Problem: Ineffective Language and Lack of "Wow" Factor Problem Statement: Many job seekers, especially those early in their careers or non-native English speakers, struggle to write with confidence and impact. Their resumes and cover letters often use passive language ("was responsible for...") instead of powerful action verbs. They fail to quantify their achievements, leaving recruiters guessing about the real-world value they provided in past roles. They know what they did, but they struggle to make it sound impressive. Current solution: Currently, candidates ask friends or family (who are often not hiring experts) to review their documents. They use grammar tools which are great for catching typos but don't improve the strength or persuasiveness of the content. They might also read blog posts about "power words," but find it difficult to integrate these words naturally into their own experience, often resulting in a resume that sounds awkward or inauthentic. How do we know it is a problem Evidence: Hiring managers and career coaches consistently state that the difference between a good resume and a great one is the use of quantifiable achievements and strong, active language. User Feedback: A common question from job seekers is, "How do I make my resume sound more impressive?" They express a lack of confidence in their writing ability and worry that they are underselling their own accomplishments. Metrics: A resume with weak, passive language has a lower chance of capturing a recruiter's attention during the average 6-second scan. Improving the language directly increases the "scan-ability" and impact of the resume, leading to a higher likelihood of it being read in full. Why solve these problems? Addressing these challenges is critical because the modern job market is defined by high volume and automation, creating a significant power imbalance. Individual applicants are often overwhelmed and outmatched by faceless systems. Solving these problems now is essential because the technology (generative AI) has finally matured to a point where it can provide truly personalized, expert-level assistance, democratizing access to tools that were previously available only to those who could afford expensive career coaches. Reason 1: To Level the Playing Field. The current hiring landscape heavily favors companies that use automated filtering. PerfectoCV AI empowers individual job seekers, giving them a fighting chance to have their skills and experience fairly evaluated. Reason 2: To Combat Application Burnout. The sheer effort required to customize applications leads to significant stress and burnout, causing talented candidates to abandon their job search. By simplify the most tedious parts, we can keep candidates motivated and engaged. Explanation of the Matrix: Before PerfectoCV: The problems we identified all fall into the "High Importance, Low Satisfaction" quadrant. Optimizing for ATS is highly important, but user satisfaction with manual methods is extremely low. Writing custom cover letters is important, but satisfaction with the process is arguably the lowest of all application tasks. Using impactful language is highly important, but users are not satisfied with their ability to do it well. The Goal of PerfectoCV: The project's goal is to move all of these critical tasks into the "High Importance, High Satisfaction" quadrant. By making these frustrating but essential tasks fast, easy, and effective, we dramatically increase user satisfaction and confidence, directly improving their job search outcomes. Goals Company objective 🎯 💡 To build the definitive AI-powered platform that empowers job seekers to confidently navigate the automated hiring process and significantly increase their interview call rate. Project goals Implement a robust AI-powered analysis engine that accurately parses resumes and job descriptions, identifies keyword gaps, suggest improvements and generates high-quality, context-aware application documents (cover letters and follow-up messages). Develop a clean, modern, and fully responsive user interface using a consistent design system, ensuring an intuitive and accessible experience across all devices. Build a secure, scalable SaaS architecture with user authentication (Clerk) and a tiered pricing model (Free and Pro), establishing a foundation for future monetization and growth. User Stories User Type: The Job Applicant Description: The job applicant is actively searching for roles and wants to create the strongest possible application for each job. They expect a tool that can quickly give them an edge over the competition. Goals: To get past automated resume filters (ATS), save time on customization, and apply for jobs with confidence. Needs: A clear, structured way to upload their resume and the job description. Actionable, AI-powered feedback to identify keyword gaps and areas for improvement. An automated tool to instantly generate tailored cover letters and follow-up messages. Other characteristic: Focused on a quick, user-friendly process without unnecessary complexity. Likely to use the tool repeatedly for multiple applications if the experience is positive and effective. 🌟 Design space UI Design The UI design for PerfectoCV was driven by a philosophy of clean, modern minimalism and user-centric clarity. The goal was to create a friction-less experience that feels professional, trustworthy, and empowering. The user flow was designed as a logical funnel: The Homepage acts as a persuasive landing page, guiding the user through a narrative that explains the problem, presents the solution, and provides clear calls-to-action. The Analyze Page functions as a simple, step-by-step "workbench," removing all distractions and focusing the user on the single task of inputting their data. The Reports Dashboard provides a clean, card-based overview of all past analyses. Each card gives at-a-glance information, including missing keywords, allowing users to track their history effectively. The Single Report Page presents the full AI analysis in a clean, scrollable format. It uses a card-based system where each section—such as "Missing Keywords," "Improvement Suggestions," and the generated "Cover Letter", "LinkedIn Followup Message"—is a distinct, collapsible card. This allows the user to focus on one piece of information at a time, creating an organized and digestible experience. Low-fidelity Wireframes 💡 Before moving to high-fidelity mockups, I created low-fidelity wireframes to establish the core structure and flow of the application. The focus was entirely on layout and the user journey, ignoring visual design to ensure the fundamental user experience was solid. The core design concept was to create a clear and logical funnel for the user. I started with a wide, open layout for the marketing homepage to tell a story, narrowed the focus to a single-task "workbench" for the analysis page, and then presented the results in an organized, scrollable report format. Each step was designed to feel like a natural progression from the last. ✍️ Home Page Wireframe The top-level navigation. The large Hero Section to grab attention. The three-part "How It Works" section. The two-part Pricing section. The final CTA section. The Footer. ✍️ Analyze Page Wireframe simple, single-column layout designed to focus the user entirely on the task of inputting user data. three stacked content boxes representing the file upload for the resume, the large text area for the job description, and the smaller text area for optional details. ✍️ Report View Page Wireframe single-column, vertical layout for clarity and mobile-friendliness. It was designed as a series of stacked content cards, with each card representing a key part of the AI feedback. Each card included space for a title and associated actions (like "Copy All"), ensuring the final design would be both organized and highly functional. ✍️ Reports Dashboard Wireframe features a card-based grid layout to display all past reports, making them easy to scan. A prominent "+ New Analysis" button was placed in the header as the primary action. A dedicated space for a "limit warning" was also included to communicate the free plan's restrictions to the user. High-fidelity mockups Landing page 💡 summary of the strategic flow I created for the homepage content The Hook (Hero Section): I started with a bold, benefit-driven headline like "Turn your resume into a winning application." The goal was to immediately grab the visitor's attention and make a strong promise about the value they would receive. The Bridge & Proof ("Why PerfectoCV?"): This section was designed to be the core argument. It starts by validating the user's concern ("Generic applications get ignored") and then immediately provides the proof by detailing the core features: Resume Analysis, Cover Letters, and Follow-up Messages. This answers the "Why?" question by directly showing the powerful tools that make up the solution. The Process ("How It Works"): Once the user understands what the solution is, the next logical step is to show them how easy it is to use. To reduce hesitation, I used a simple, three-step process ("Transform your job application into a winning package") to demonstrate a clear and straightforward path to getting results. The Offer (Pricing Section): This is where transparently present the cost and features of the different plans ("Basic" vs. "Pro"). By placing it here, the user can evaluate the price after they fully understand the product's value, allowing them to make an informed decision. The Final Push (Final CTA): concluded with a final, action-oriented Call-to-Action section ("Ready to Land Your Next Interview?") to give the user one last, compelling reason to sign up and get started. Dynamic Navigation Based on User State Analyze page Report View Page Reports Dashboard Page (initial view) Reports Dashboard Page (after view) Development Phase Technology Stack Selection 💡 The technology stack for PerfectoCV was chosen to create a modern, scalable, and high-performance application. Each component was selected for its specific strengths in building a full-stack, AI-powered platform, ensuring a seamless development process and a robust end-user experience. 1. Frontend/Backend Framework - Next.js Why Next.js? Full-Stack Capabilities: Next.js enabled both the frontend and backend logic to live in a single, cohesive codebase. Its API routes were used to handle server-side tasks like communicating with the AI models and the database. Server-Side Rendering (SSR) & SEO: For the marketing homepage, SSR ensures fast initial page loads and optimal search engine optimization, which is critical for attracting new users. Component-Based Architecture: Built on React, it allowed for the creation of reusable UI components, making the application modular, maintainable, and easy to scale. 2. UI Development - Tailwind CSS & ShadCN Why Tailwind CSS? Rapid Development: As a utility-first framework, Tailwind allowed for styling components directly in the markup, dramatically speeding up the process of translating design mockups into a fully responsive UI. Design Consistency: It made it easy to enforce a consistent design language (spacing, fonts, colors) across the entire application without writing custom CSS.Why Tailwind CSS? Why ShadCN? Accessible & Unstyled Components: ShadCN provided a collection of beautifully designed, accessible components (like cards, buttons, and dialogs) that are not part of a restrictive library. This gave me complete creative control over the final look and feel while saving significant development time. 3. AI Engine - LangChain.js with OpenAI & Gemini Why LangChain.js? Essential AI Orchestration: LangChain served as the "brain" for all AI operations. It simplified the complex process of loading the user's PDF resume, chunking the text, and creating chains of prompts to guide the language models. Why Use Both OpenAI & Gemini? Resilience and High Availability: The primary reason for using a multi-model approach was to ensure the application remains highly available and reliable. If one AI service experiences its API usage limit is reached during a high-traffic period, the system is designed to seamlessly switch to the alternate model. This fallback mechanism ensures that the user experience is never interrupted, providing a continuous and robust service at all times. 4. Database - Neon DB (Serverless PostgreSQL) Why Neon DB? Power of Postgres, Simplicity of Serverless: It provided the robustness and relational integrity of a traditional PostgreSQL database, which is perfect for storing structured user data, reports, and subscriptions. Scalability & Cost-Effectiveness: Its serverless architecture means I don't have to manage infrastructure. The database automatically scales with user demand and is highly cost-effective, which is ideal for a new application. 5. Authentication & File Storage Why Clerk for User Management? Complete Authentication Solution: Clerk handled all aspects of user authentication—including sign-up, sign-in, session management, and security—out of the box. This saved dozens of hours of development time and provided enterprise-grade security. Why Uploadthing for File Storage? Simple & Secure File Uploads: Uploadthing provided a simple and secure way to handle the PDF resume uploads. Its integration with Next.js is seamless, abstracting away the complexities of file handling and storage. High-Level Architecture Diagram 💡 To visualize the application's structure, I created diagrams for the key services. The system is a full-stack, serverless application where Next.js API routes manage a sophisticated AI pipeline and user lifecycle events. This architecture integrates specialized third-party services to ensure scalability, security, and a robust user experience. I built a data processing pipeline to handle the core AI analysis. The key feature is a AI fallback mechanism between OpenAI and Gemini. If the primary AI service is unavailable with rate-limits, the system automatically switches to the secondary model, ensuring a seamless and uninterrupted experience for the user. To synchronize user data between the authentication provider and the application database, I leveraged Clerk's webhook system . When a new user signs up, Clerk sends a secure user.created event to a dedicated API endpoint. This endpoint verifies the request and then creates a corresponding user record in the NeonDB database, automatically assigning them to the "Basic" subscription plan. This event-driven architecture is highly reliable and ensures data consistency. For handling paid subscriptions, I implemented an event-driven system using Stripe webhooks . When a user upgrades, Stripe sends a checkout.session.completed event, which triggers a backend process to update the user's plan to "Pro" in the database. Similarly, a customer.subscription.deleted event handles cancellations, reverting the user to the basic plan. The frontend UI then reads the user's active subscription status from the database to enforce feature limits , such as allowing 3 analyses per month for Basic users and unlimited analyses for Pro users. Entity-Extended Relationship Diagram The database is structured around three primary tables: User Table: This is the central entity in the system. It stores essential user information and uses the clerk_id as a unique foreign key to link directly to the Clerk authentication service, ensuring a secure and reliable connection between the application's data and the user's identity. Reports Table: This table holds all the data generated from an AI analysis. Each record contains the user's inputs (job description, etc.) and the AI's outputs (missing keywords, cover letter). Relationship: There is a one-to-many relationship between User and Reports . A single user can generate many different reports over time, and each report belongs to exactly one user. Subscription Table: This table manages the user's billing and plan status, integrating directly with Stripe . It stores the user's subscription plan type (e.g., "Basic" or "Pro"), their Stripe customer ID, and the current status of their subscription. Relationship: There is a one-to-many relationship between User and Subscription . This allows a user to have a history of multiple subscription records (e.g., subscribing, cancelling, and re-subscribing), while ensuring they have only one active subscription at any given time. Key Features of the Software 💡 Here are the core features I implemented in PerfectoCV , along with the key technical decisions and implementation details for each one. Feature 1: AI-Powered Resume Analysis This is the core engine of the application. It provides users with data-driven, actionable feedback by intelligently comparing their resume against a specific job description to identify gaps and areas for improvement. PDF Handling & Data Extraction Decision: Chose Uploadthing for file handling due to its simple, secure API for managing file uploads within a Next.js environment. For parsing, I selected LangChain.js because of its robust document loaders, which can reliably extract text from various PDF resume formats. Implementation: The user uploads their resume via the UI, which calls a secure endpoint to store the file using Uploadthing. The file's URL is then passed to a LangChain process that loads and parses the PDF text, preparing it for analysis. AI-Driven Gap Analysis Decision: I selected a multi-model strategy ( OpenAI & Gemini ) to ensure high availability. The primary goal was to provide more than a simple keyword match. Implementation: I engineered a specific prompt chain that instructs the AI model to: Identify the core skills and qualifications required by the job description. Scan the prepared resume text for these keywords. Generate distinct lists of "Missing Keywords." Provide qualitative "Improvement Suggestions" based on resume-writing best practices, making the feedback truly actionable. Feature 2: Automated Document Generation This feature saves users hours of manual work by automatically generating a complete set of application documents that are context-aware and tailored to the specific job. Contextual Content Generation Decision: The AI needed to produce documents that were highly personalized, not generic. Therefore, the implementation needed to provide the AI with the full context of the user's background and the target role. Implementation: The prompt sent to the AI includes the parsed resume text, the full job description, and any "Additional Details" the user provided. This rich context allows the AI to generate a Custom Cover Letter and a LinkedIn Follow-up Message that are directly relevant to the user and the specific job they are applying for. User-Friendly Output & Editing Decision: The generated text needed to be easily accessible and editable. A user should feel in complete control of the final output. Implementation: The results are displayed in clean, card-based UI components built with ShadCN . Each generated document has "Copy" and "Edit" functions. Additionally, clear "Usage Tips" are provided with each document to guide the user on how to best personalize the content before sending it. Feature 3: Subscription & User Management System This feature establishes the SaaS foundation of the application, handling user authentication, payments, and tiered access to features.Authentication & Database Sync Authentication & Database Sync Decision: Chose Clerk for authentication to leverage its complete, secure user management system. I used a NeonDB (PostgreSQL) database for its relational integrity. Implementation: I built a webhook listener ( /api/clerk ) that listens for user.created events from Clerk. When a new user signs up, the webhook triggers a function to create a corresponding user record in the NeonDB database and automatically assigns them the "Basic" subscription plan. Payment & Feature Gating Decision: Stripe was chosen for its robust payment processing and developer-friendly webhook system. The application needed to enforce different limits for different plans. Implementation: A dedicated Stripe webhook handles subscription events. When a checkout.session.completed event is received, the user's plan is upgraded to "Pro" in the database. The application's backend and UI logic check the user's current plan before allowing an analysis. This system enforces the "3 analyses per month" limit for Basic users while granting unlimited access to Pro users, effectively "gating" the features based on the subscription status. Challenges Faced and Solutions Problem : AI Service Reliability and Rate Limiting The application's core functionality is entirely dependent on third-party AI services (OpenAI and Gemini). If the primary API service experienced downtime or if the application's usage spiked, we would hit API rate limits, causing the analysis feature to fail for users. Solution: Implemented a Multi-Model AI Fallback System To ensure high availability and a seamless user experience, I engineered a resilient fallback system Primary & Secondary Model: In the backend, I configured OpenAI as the primary AI provider for all analysis tasks, with Gemini designated as the hot-standby secondary provider. Error-Handling Logic: The AI analysis function was wrapped in a try...catch block. The system first attempts to process every request with the primary model (OpenAI). Seamless Fallback Mechanism: Inside the catch block, there is a condition that checks the specific error type . If the error is a 429 rate-limit error , the system automatically re-sends the exact same request to the secondary model (Gemini). This prevents the system from retrying on client-side errors and makes the fallback more efficient and intelligent. User Transparency: This entire fallback process is completely invisible to the end-user. From their perspective, they simply receive their report successfully, without any knowledge of backend issues. This creates a robust and reliable service. Future Vision / next steps 💡 While PerfectoCV V.1 successfully solves the critical problem of analyzing and tailoring existing application documents, the long-term vision is to evolve it from a reactive analysis tool into a proactive, all-in-one career toolkit. Long-term vision Become the Definitive AI Career Co-Pilot: The ultimate goal is to support the user through the entire job search lifecycle, from initial resume creation all the way to interview preparation and beyond. Data-Driven Job Search Strategy: To provide users with personalized analytics on their application history, helping them understand which skills are in demand for the roles they target and which versions of their resume perform best.
SmartNotes - AI (AI-Powered Note-Taking App, RAG Application, AI Application)
🔖 Introduction About the project Smart Notes is a modern productivity application designed to transform static personal knowledge into an interactive, AI-powered experience. Built for students and professionals who need to manage growing volumes of information, this project addresses the difficulty of quickly retrieving specific details from historical notes. I developed a full-stack solution featuring a Retrieval Augmented Generation (RAG) architecture. By implementing semantic search with Supabase pgvector and OpenAI embeddings, I enabled a context-aware chat interface where users can "talk" to their notes. The result is a highly responsive system that doesn't just store text, but understands it, providing instant answers based on the user's personal knowledge base. 🤔 Problem space Users struggle with "data graveyards" where knowledge is easy to record but impossible to find or synthesize quickly. Problem: Inefficient Keyword Search Traditional applications rely on exact keyword matching. If a user forgets the specific phrasing used months ago, the information is effectively lost. Current solution: Manually scrolling through hundreds of notes or guessing keywords. Problem: Context Fragmentation Knowledge is scattered across local notes, Notion, and Google Docs, leading to high cognitive load during context switching. Current solution: Opening multiple browser tabs and apps to find a single piece of info. Requirement: Intelligent Synthesis Users need more than just a list of notes; they need a system that can synthesize answers and provide direct insights from their personal data. Current solution: Manually reading through several old notes to summarize a topic. Goals Company objective 🎯 To build a state-of-the-art AI Knowledge Hub that consolidates fragmented information into a single, searchable, and interactive "brain" using modern web technologies. Project goals Effortless Knowledge Retrieval: Reduced information search time from minutes to seconds by allowing users to query their notes with natural language instead of manual scrolling. Unified Workspace Intelligence: Eliminated context-switching by centralizing fragmented data from Notion and Google Docs into a single, AI-powered interactive "brain." Intelligent Data Synthesis: Moved beyond simple storage to active synthesis, enabling the automatic generation of summaries and connections across unrelated notes. Responsive & Modular Architecture: Delivered a high-performance system that scales to hundreds of notes without degradation in speed, using a modular design for future integrations. User Stories Knowledge Worker / Researcher The Researcher uses the app to centralize learnings from various papers and documents, often needing to find "that one specific insight" from months ago. Goals: Quickly synthesize summaries from hundreds of previous entries. Needs: Powerful semantic search that understands intent over keywords. Characteristics: Highly organized but handles high volumes of information. Product Manager / Multi-Platform User The Admin/PM manages projects across Notion and Google Docs and needs to query all platforms simultaneously without manual data entry. Goals: Have a unified chat that "knows" everything stored in Notion and local notes. Needs: Secure OAuth integrations and automated syncing via MCP servers. Characteristics: Uses multiple SaaS tools and values workflow efficiency. 🌟 Design space UI Design The interface focuses on Minimalist Productivity. I chose a two-pane layout: a clean, grid-based dashboard for managing notes on the left, and a sophisticated, floating AI chat panel on the right. This layout allows for simultaneous content creation and AI-assisted interrogation. The design uses Glassmorphism for the AI panel and sidebar to create a sense of depth and hierarchy, while subtle micro-animations (like smooth streaming text and hover transformations) make the app feel "alive." High-fidelity design The final design implements a "Modern Dark Mode" with high contrast and accessibility in mind. Design system 🎨 To maintain consistency and speed up development, I utilized a system built on ShadCN/UI and customized it with a Tailwind CSS v4 backbone. Why a Design System? Consistency: Ensuring that every button, input, and modal follows the same visual language across different platforms (Local, Notion, Google Docs). Modularity: By building reusable atomic components (like ChatMessage, PromptInput, and NoteCard), I was able to iterate on complex features without breaking existing UI. Tokens: I used a custom color palette with OKLCH color values to ensure vibrant, consistent branding that adjusts perfectly between light and dark modes. Development Phase Technology Stack Selection 1. Core: Next.js 16 (App Router) & React 19 Performance : Used the latest server component features to reduce client-side bundle size. Real-time UX : Leveraged React 19’s actions and hooks for seamless UI updates. 2. AI Strategy: Vercel AI SDK v6 & OpenAI Streaming Response: Provided instant feedback using the useChat hook, delivering a premium "typing" feel. Tool Calling: Integrated GPT-4o with custom tool definitions, allowing the model to decide when to perform a semantic search. 3. Database: Supabase with pgvector Semantic Search : Unlike traditional databases, pgvector allows for cosine similarity searches, finding notes based on meaning rather than keywords. Security: Implemented Row Level Security (RLS) to ensure all user data and embeddings remain isolated and secure. High-Level Architecture Diagram The system utilizes a modern RAG (Retrieval-Augmented Generation) architecture to bridge the gap between static user knowledge and real-time AI intelligence. Database Design Key Features of the Software Intelligent Semantic Search Decision: Chunking & Overlapping To ensure no context is lost between paragraphs, I implemented a custom chunking strategy. Implementation: Notes are split by double newlines and indexed separately, allowing the AI to pinpoint the exact relevant section of a large document. Challenges Faced and Solutions Problem: AI SDK Versioning & Breaking Changes During development, the project transitioned between stable and cutting-edge versions of the Vercel AI SDK (v5/v6). Key properties like isLoading and handleSubmit were deprecated or moved, causing significant TypeScript errors and breaking the chat UI's reactivity. Solution: I refactored the useChat implementation to align with the latest modular architecture of the SDK. Instead of relying on legacy properties, I derived the loading state from the SDK's internal status state and implemented custom message handlers to ensure compatibility with the updated UIMessage types. Problem: Interactive Bridge (The "See Note" Link) A major UX challenge was making the AI responses "actionable." When the AI referenced a note, it provided a link, but clicking it didn't interact properly with the React state of the parent dashboard to open the correct note dialog. Solution: I implemented a custom callback architecture within the Markdown renderer. By passing an onNoteLinkClick handler through the component tree, I bridged the gap between the static AI message and the live dashboard state. Now, clicking a reference in the chat instantly triggers a UI event that opens the specific note for editing. Future Vision / next steps Long-term vision The ultimate goal for AI Notes is to become a "Universal Memory Layer." Instead of just being a place to store text, it will act as a proactive intelligence assistant that bridges the gap between different productivity ecosystems, helping users uncover connections across their entire digital footprint. The Unified Brain (MCP Integration) External Knowledge Sync: Implement the Model Context Protocol (MCP) to allow real-time indexing of Notion workspaces and Google Drive documents. Cross-Platform Querying: Enable the AI to answer questions like "What were the action items from my Google Doc meeting notes that conflict with my project plan in Notion?" Automated Tagging: Use AI to automatically categorize and tag incoming notes from all sources to maintain a pristine directory structure. Proactive Intelligence Speech-to-Knowledge: Integrate advanced speech-to-text for "voice notes" that are automatically summarized and added to the vector database. UI Enhancements Visual Mind Map: A dynamic, interactive graph view showing how different notes are semantically connected to one another. Command Palette: A "Slash command" (/) style interface for quick note creation and AI tool triggering without leaving the keyboard.
Log2AI: Multi-Agent Log Analysis RAG (Multi-Agent RAG System, Intelligent Log Analysis Platform)
🔖 Introduction About the project Log2AI is an advanced Multi-Agent RAG (Retrieval-Augmented Generation) system designed to transform chaotic application logs into actionable intelligence. Built for high-traffic healthcare systems (HealthHub), the goal was to eliminate the manual "needle-in-a-haystack" search during system outages. I developed a sophisticated pipeline that ingest JSON logs, intelligently chunks them by session/request ID, and stores them in a PostgreSQL vector database (pgvector) . By implementing a multi-agent architecture (Retrieval, Summarization, and Verification), I enabled DevOps teams to ask natural language questions like "What caused the payment failures on the 13th?" and receive verified, streaming answers in seconds. The result was a 25x increase in analysis speed compared to traditional manual log searching. 🤔 Problem space Problems to solve/Requirements to Create The central challenge was the High-Stakes Observability required in healthcare. When a system slows down or a patient record isn't loading, every second counts. 👉 Problem: The "Technical Barrier" to System Insights In modern DevOps, analyzing system health requires "Log Experts" who are proficient in complex query languages like SQL, Lucene (ELK), or KQL (Azure). The Issue : Non-technical stakeholders (Compliance Officers, Tech Managers) or even busy On-Call engineers cannot simply "ask" the system a question. They are bottlenecked by specialized syntax, turning a 10-second question into a 20-minute manual search. Current solution: DevOps teams build static, pre-defined dashboards. If a problem occurs that hasn't been "pre-built" into a dashboard, engineers must fall back to manual terminal grep commands. How do we know it is a problem: Industry Metric: High MTTR (Mean Time to Resolution). Only senior engineers hold the "tribal knowledge" to find specific traces, creating a single point of failure during outages. 👉 Requirement : The "Signal vs. Noise" Crisis in Healthcare Compliance Healthcare regulations (like HIPAA) mandate that every interaction—even successful ones—must be logged (INFO logs). This creates a "Data Haystack." The Issue: 99% of logs are "Normal Activity" (User viewing a record, Lab results generated). These are critical for audits but act as "noise" that buries the 1% of critical system errors. Traditional tools treat all logs with equal weight, making it impossible to quickly isolate the "story" of a failure among millions of successful events. Current solution Engineers often "filter out" INFO logs to make searching faster, but this destroys the audit trail. Alternatively, they pay massive costs for high-volume indexing in tools like Splunk or Datadog. How do we know it is a problem Observability Gap : When a compliance auditor asks, "Who accessed Record X on Tuesday?" , it can take hours of manual log parsing to reconstruct the timeline from the sheer volume of noise. Why solve these problems? It is critical to address these problems now because, in the healthcare industry, system downtime and data security are not just technical issues—they are matters of patient care and legal liability. Reason: Reducing "Log-Analysis Tax" : High-salary senior engineers currently spend ~30% of their time manually "detecting" errors. By automating this, the company shifts its most expensive human resources from "maintenance" to "feature innovation." Reason: Eliminating Compliance Blind spots : Manual audits are prone to human error. An AI-driven system ensures that no user activity trace is missed, significantly reducing the risk of multi-million dollar regulatory fines. Reason: Democratizing Data : By removing the "Technical Barrier," we empower non-technical staff to perform their own investigations, removing the bottleneck on the DevOps team. Goals Company objective 🎯 To achieve "Zero-Friction Observability"—reducing Mean Time to Repair (MTTR) and ensuring 100% compliance transparency by empowering any team member to audit and debug system activity using natural language. Project goals Enable Natural Language "System Chat" (Aligns with Problem: Technical Barrier) To eliminate the need for complex query syntax (SQL/Grep) by implementing a high-performance semantic search database (pgvector). The objective is to allow anyone—regardless of technical background—to find system insights through simple conversation. Implement "Intelligent Signal Isolation" (Aligns with Problem: Signal vs. Noise) To architect a custom ingestion pipeline that automatically groups millions of fragmented logs by request_id. This ensures that mandatory compliance INFO logs act as a rich context for the story, rather than "noise" that buries critical errors. Engineer a Hallucination-Free Verification Engine (Aligns with Problem: Trust-But-Verify Requirement) To develop a Multi-Agent architecture where a dedicated Verification Agent cross-references every AI claim against raw log snippets. This ensures that the system provides only fact-grounded, audit-ready sightings, meeting the rigorous trust standards of the healthcare industry. User Stories User type: On-Call DevOps Engineer The "first responder" during system outages or performance degradation. They are responsible for troubleshooting and restoring high-availability healthcare services as quickly as possible. Goals: Minimize the Mean Time to Repair (MTTR) by identifying the exact root cause of a system failure (e.g., a failing payment gateway or a database timeout) in seconds rather than minutes. Needs: A natural language interface to "ask" the logs about specific errors, and a system that automatically reconstructs the full "transactional story" by linking related log events across disparate services. Other characteristic: Highly technical but operates under extreme pressure; requires verified log snippets from the AI to maintain trust in the automated analysis. 🌟 Design space UI Design The UI for Log2AI was designed with a "Command Center" philosophy. Since the primary users are engineers working under high-pressure outage scenarios, the interface prioritizes clarity, speed, and real-time feedback. The Launchpad : Users arrive at a clean, dark-themed dashboard that emphasizes a central search bar. The Inquiry : Users type natural language questions (e.g., "What caused the lab record failure on 2026-01-17?" ). The Agentic Stream : As the Multi-Agent system works, a real-time stream appears. Users don't just see a final answer; they see the system searching, retrieving context, and verifying facts. The Resolution : The final verified answer is presented with cited log snippets and a clear "Audit Trail," allowing for immediate debugging action. Low-fidelity Wireframe The "Focus-First" UI The core concept was to merge a standard Chat interface with a technical "Log Feed." Floating Input: The input area is anchored at the bottom (Standard Chat UX), allowing the rest of the screen to serve as a high-visibility canvas for the log analysis stream. High-fidelity design The high-fidelity design realizes the "Command Center" vision with a premium, minimalist aesthetic that feels both modern and professional. By utilizing a deep obsidian background and high-contrast typography, the interface ensures maximum readability for technical data. Key Design Elements: Minimalist Hero Section : The center of the screen is dedicated to the primary action: "Analyze Your Logs" . By keeping the initial state clean, we reduce cognitive load for users who are already under pressure. Anchored Chat Interface : The query area is anchored at the bottom with a subtle glassmorphism effect. This familiar "Chat UX" makes the advanced Multi-Agent backend feel approachable and easy to use. Dynamic Theme Engine : A seamless theme-switching system allows users to toggle between a focused dark mode—ideal for late-night debugging—and a high-clarity light mode for daytime audits. Design system 🎨 For the Log2AI frontend, I implemented the shadcn/ui design system, built on top of Tailwind CSS and Radix UI. Why a Design System was Necessary: In a high-stakes industry like Health-Tech, the interface must communicate reliability and precision. Developing a custom UI kit from scratch would have been time-consuming and prone to visual inconsistencies. By utilizing a proven design system, I could ensure that every button, input, and modal followed a unified design language, giving the tool a "production-ready" feel from day one. How I Utilized it: Accessible Components: I used Radix-based primitives (like accessible Dialogs and Popovers) to ensure that the tool remains usable for all stakeholders, including those using screen readers—a critical requirement for enterprise healthcare software. Rapid Prototyping: The modular nature of shadcn allowed me to focus 90% of my development time on the complex streaming logic and Multi-Agent state management, rather than worrying about CSS-in-JS or component styling. Development Phase Technology Stack Selection The tech stack for Log2AI was carefully chosen to balance high-performance data processing with cutting-edge AI orchestration. 1. Backend - FastAPI (Python) Why FastAPI? Asynchronous Excellence: Logs can be massive. FastAPI’s async/await support allowed me to handle streaming responses (SSE) and heavy database I/O without blocking the main thread. Native AI Integration: Python is the lingua franca of AI. FastAPI provides the most robust environment for integrating LangChain, Google Gemini, and Pydantic-based data validation. Built-in Documentation: Auto-generated Swagger/OpenAPI docs made it effortless to test the complex /sync and /qa endpoints. 2. AI Orchestration - LangGraph Why LangGraph? Stateful Multi-Agent Workflows: Unlike standard linear chains, LangGraph allowed me to build a cyclic graph where agents can loop back and verify information. Precision Routing: It provided the granular control needed to route questions between the "Retrieval Agent" (to find logs) and the "Verification Agent" (to check for hallucinations). Persistence: Using LangGraph’s MemorySaver, I implemented conversation history, allowing the AI to remember context like "Show me the logs for the 13th" in follow-up questions. 3.Vector Database - PostgreSQL with pgvector (Supabase) Why pgvector? Enterprise Reliability: I chose PostgreSQL over niche vector databases because it is a battle-tested, relational engine. pgvector adds high-performance semantic search directly into the database. Hybrid Queries: It allows me to combine Vector Search (similarity) with Metadata Filtering (e.g., searching only for logs from lab_id: 42), which is essential for healthcare audits. 4. Frontend - Next.js with Tailwind CSS & shadcn/ui Why this stack? Server-Side Streaming: Next.js handles Server-Sent Events (SSE) beautifully, enabling the "Live Thinking" stream from the AI agents. Developer Velocity: Tailwind and shadcn/ui allowed me to create a premium "Command Center" aesthetic in a fraction of the time, ensuring the interface was as modern as the backend. 5. Streaming Interface - Vercel AI SDK Why the Vercel AI SDK? Seamless Streaming: It abstracts the complexity of handling Server-Sent Events (SSE). It allowed me to implement the "Typewriter effect" and the "Live Thinking" stream with just a few lines of code. State Management: The SDK's useChat hook automatically managed the conversation state, message history, and loading indicators, ensuring a smooth and responsive user experience. Interoperability: By building a backend compatible with the Vercel AI SDK, I ensured that the Log2AI core can be easily integrated into any modern React or Next.js application in the future. High-Level Architecture Diagram I designed the system using a Multi-Agent RAG (Retrieval-Augmented Generation) architecture. This modular approach separates log ingestion from intelligent analysis, ensuring scalability and high precision. Architecture Highlights: Stateful Graph Orchestration: I utilized LangGraph to manage the state of the conversation. This allows the system to support multi-turn dialogues where the AI remembers previous context (e.g., resolving "What about the 13th?" based on a prior request). Asynchronous Ingestion Pipeline: The Log Sync Engine performs request-based chunking and generates vector embeddings in parallel, ensuring that millions of logs are indexed into pgvector with high efficiency. Agentic Cross-Verification: To meet healthcare industry standards for accuracy, the Summarization Agent's output is reviewed by a Verification Agent. This agent's only job is to cross-check claims against raw log data, effectively neutralizing AI hallucinations. Interoperable Streaming: The system communicates via Server-Sent Events (SSE) using a format compatible with the Vercel AI SDK, allowing for a responsive, "live thinking" user experience. Entity-Extended Relationship Diagram or Class Diagram or Any other Detailed Diagrams Detailed Data Architecture: Request-Centric Schema A critical architectural decision in Log2AI was the design of a specialized log schema. Unlike traditional log search tools that treat every line as an isolated event, my schema is designed for Transactional Traceability. The Hybrid Chunking Strategy: To provide the AI with the best context, I implemented a hybrid chunking strategy during ingestion: Request-Grouped Chunks: Logs sharing the same request_id are grouped together, capturing the complete "story" of a user's transaction. Size-Aware Splitting: If a single request generates over 100 log lines, it is intelligently split into 10-minute windows to maintain high embedding precision. Semantic Metadata Enhancement: Every chunk is enriched with user IDs, lab IDs, and service names, allowing for ultra-fast filtering before the AI even begins its analysis. Key Features of the Software 1. Intelligent Log Sync & Hybrid Chunking Pipeline The core of the system’s high-precision retrieval is its specialized ingestion pipeline. Standard RAG systems use fixed-length chunking (e.g., every 1000 characters), which catastrophically breaks the context of software logs. Decision: Request-Centric Semantic Grouping: I developed a custom "Request-First" chunking strategy. Instead of arbitrary splits, the system identifies the request_id within the JSON logs and groups all related activities (INFO, WARN, ERROR) into a single semantic unit. Implementation: Session Reconstruction: A Python-based parser groups logs by unique session IDs, ensuring the "entire story" of a transaction is sent to the vector database as one document. Hybrid Fallback: For large-scale background processes that lack a Request ID, I implemented a 10-minute sliding time window to maintain temporal context. Metadata Enrichment: Each chunk is tagged with singular and array-based fields (user_ids, lab_ids, services) for high-speed pre-filtering in PostgreSQL. 2. Agentic Multi-Agent QA System (RAG) To meet the "Trust-But-Verify" requirement of healthcare, I replaced the traditional "one-shot" LLM response with a sophisticated Multi-Agent workflow using LangGraph. Decision: Verification-First Orchestration: I architected a cyclic state machine where specialized agents collaborate to produce a verified answer, rather than a "best-guess" summary. Implementation: The Retrieval Agent: Acting as the "Librarian," this agent uses specialized tools to perform pgvector semantic searches and MySQL identity lookups (e.g., converting a User Name into a User ID found in logs). The Summarization Agent: Analyzes the retrieved context to identify patterns, error sequences, and root causes, producing a draft response. The Verification Agent: The "Quality Controller." This agent cross-checks the draft against the raw log documents. If it detects a claim not supported by the data (hallucination), it forces a correction before the user ever sees the message. Real-Time Streaming: Leveraging Server-Sent Events (SSE), the entire multi-agent deliberation is streamed to the UI, providing the user with immediate visibility into the "Thinking Process." Challenges Faced and Solutions Problem 01: The "Silent Hang" & Latency in Multi-Agent Orchestration During early testing, the system faced a critical performance bottleneck. Response times were exceeding 4 minutes, and frequently, the AI would "hang" indefinitely without returning an answer. This was unacceptable for a real-time log analysis tool where DevOps engineers need answers in seconds. The Discovery: The issue was a deep technical conflict within the LangChain framework: combining native structured output (ProviderStrategy) with tool calls on the same model caused an internal processing loop that broke the streaming pipeline. The Solution: I implemented a Hybrid Strategy Orchestration to bypass the framework limitations: Critical Path Isolation: I restricted structured output only to the Retrieval Agent, which requires it for internal routing logic. Plain-Text Optimization: I switched the Summarization and Verification agents to a high-speed plain-text configuration. Regex Message Filtering: Since the Retrieval Agent now returned raw JSON in its stream, I developed a custom filtering layer on the backend to "clean" the JSON noise before it reached the user's screen. Performance Gain: These architectural changes reduced the response time from 4+ minutes to under 12 seconds—a ~25x improvement in speed. Problem 02: Recursive "Agentic Hallucination" Loops When users asked ambiguous or open-ended questions like "Is anything wrong?", the Retrieval Agent would often fall into an "Infinite Tool Loop." It would call the retrieval tool repeatedly with slight variations, hoping to find "something" relevant, leading to high API costs and a frozen UI. The Solution: I implemented a three-layered guardrail system to ensure agent reliability: Strict Recursion Limits: I configured the LangGraph execution with a deterministic cap of 15 steps. If an agent fails to reach a conclusion within this limit, the system gracefully terminates the loop and provides a summary of what it found so far. Context-Aware Prompt Engineering: I redesigned the system prompts with a "Minimal Search" protocol. The agent is explicitly instructed to review the conversation history first. If the history already contains the answer (e.g., resolving "the 13th" to "2026-01-13"), it is forbidden from calling the retrieval tool again. Multi-turn "Stateful" Memory: By using a unified MemorySaver checkpointer, I ensured the agent maintains a historical "mental model" of the conversation, preventing it from searching for data it had already analyzed in previous turns. Future Vision / next steps Long-term vision Predictive Anomalies : Moving from "Reactive" (searching logs after an error) to "Proactive"—using the RAG system to scan incoming logs in real-time and alert the team before a system crash occurs. Interactive Trace Visualization : Adding a UI feature that allows users to click on an AI-generated answer to visually "jump" into the exact spot in the log file, creating a seamless bridge between natural language and raw data.