I Built 4 Web Apps in One Weekend with CursorAI
Last weekend, I ventured beyond my usual role and discovered something amazing: I could build functional, useful tools simply by conversing with an AI. Despite having only a basic understanding of coding—I can distinguish JavaScript from CSS and recognize HTML and Python code—I challenged myself to create four practical apps for Singapore residents. Each project has its own backstory, rooted in my frustration with services often bundled with costly consultations.
Every line of source code is available for free on my GitHub.
Singapore PR Eligibility Calculator
[ Overview ]
I noticed that online PR calculators were never truly "free" or simple—they often served as gateways to immigration consulting services, charging not only for the assessment but also for further advice. I wanted a tool that provided a rough idea of your eligibility without requiring personal data or leading to an expensive consultation.
What I built
I developed a straightforward, client-side PR eligibility calculator that computes your score based on factors such as age, education, work experience, professional industry, and salary range. All calculations occur directly in your browser, ensuring your data remains private. It's a lightweight solution that offers a quick percentage estimate—no strings attached.
[ The Challenge ]
Environment Setup
At the beginning of this journey, a significant amount of time was spent setting up the right environment. I had some experience working on projects and doing light front-end development, but I had never built anything to the point where features were fully functional—it was mostly for mock-ups and visual direction.
This time, before starting development, I had to ensure that I had the right setup and environment. Using Next.js as the framework made things much easier, as it is quite straightforward. I simply asked Claude to install it in the repository. Initially, I thought I could deploy it directly to the server via Vercel, but I quickly realised I needed to create a GitHub account to sync my repository before deployment.
Once everything was set up and I could deploy to Vercel, the process of building the web app became more straightforward. I explained to Claude what I needed and provided calculations based on the official ICA PR Application Page and the Ministry of Manpower (MOM) Work Pass Framework. The scoring system was developed through an analysis of successful cases and publicly available information.
[ Technicality ]
Tech Stacks
Next.js: A React-based framework for server-rendered applications.
TypeScript: A statically typed superset of JavaScript.
Tailwind CSS: A utility-first CSS framework for styling.
Jest: A testing framework for JavaScript and TypeScript applications.
React Hook Form: A library for managing form state and validation in React applications.
Zod: A TypeScript-first schema declaration and validation library.
Features
Privacy-Focused Calculation: Entirely client-side using Next.js, TypeScript, and Tailwind CSS.
Modular Point System: Easily adaptable scoring criteria based on public data.
User-Friendly Interface: Designed to be as simple as possible while delivering clear feedback.
Singapore Tax Calculator
[ Overview ]
Tax calculators are another domain dominated by professional services. Many platforms tie tax calculations directly to consultations with tax experts or firms, meaning you often pay for a "quick estimate" that leads you down a consulting path. While accurate tax planning is important, sometimes you just want a rough estimate and a few tips on saving money—without being locked into a service contract.
What I built
I created a tax calculator that not only computes your tax liability according to Singapore's progressive tax system (for YA2024) but also provides suggestions on tax-saving opportunities through CPF cash top-ups and SRS contributions. The tool guides you on potential reliefs you might be missing, making it a practical aid for everyday financial planning.
[ The Challenge ]
Complex Algorithm and Calculation
Singapore’s tax system is progressive, meaning different portions of income are taxed at different rates. Implementing this in code requires handling:
Progressive Tax Brackets: Correctly applying the tiered tax rates to different portions of taxable income.
Tax Reliefs & Deductions: Factoring in CPF top-ups, SRS contributions, and other deductions while ensuring they stay within statutory limits.
Edge Cases: Handling scenarios like different relief eligibility conditions and ensuring compliance with tax rules.
Performance Optimization: Ensuring calculations remain fast and responsive, even with complex formulas and multiple input scenarios.
Claude 3.5 Sonnet Context Limit
When developing the tax calculation logic with Claude, one key challenge was its context limit—the model tends to forget earlier instructions when too many details are provided. This means:
Multiple Iterations Required: Getting an accurate algorithm often takes several attempts because Claude loses track of previous constraints or formula logic.
Difficulty Handling Complex Interdependencies: Since tax calculations involve multiple interdependent rules (e.g., relief caps, CPF limits, tax brackets), ensuring consistency across different sections of the calculation was a challenge.
Increased Manual Guidance: To get a reliable formula, I had to repeatedly re-feed previous instructions and test different breakdowns to prevent gaps in the calculations.
[ Technicality ]
Tech Stacks
Next.js: A React-based framework for server-side rendering and building web applications.
TypeScript: A statically typed superset of JavaScript that enhances code quality and maintainability.
Tailwind CSS: A utility-first CSS framework that streamlines the process of designing custom user interfaces.
Chart.js: A JavaScript library used to create interactive and responsive charts, providing visual representations of tax breakdowns.
XLSX: A library that enables exporting data to Excel-compatible formats, allowing users to save or print their tax calculations.
React Hook Form: A library for managing form state and validation in React applications, ensuring accurate user input.
Zod: A TypeScript-first schema declaration and validation library that enforces robust input validation.
Features
Dynamic Tax Bracket Calculation: Uses up-to-date tax brackets and progressive rates.
Relief Optimization: Calculates both CPF and SRS contributions in real-time.
Visual Insights: Integrates Chart.js to display your tax breakdown and includes XLSX export functionality for saving or printing results.
Robust Input Validation: Leverages React Hook Form and Zod for accurate, reliable user input.
Singapore Rent Map Dashboard
[ Overview ]
Rent prices in Singapore can feel like a mystery—if you're curious whether you're paying too much, you might find yourself comparing your situation to an expensive consulting report. There's a gap between raw data and actionable insight for everyday residents. I aimed to bridge that gap by creating an interactive tool that visually maps rental prices across neighborhoods, allowing you to see exactly where you stand without needing professional advice.
What I built
I developed a rent dashboard that pulls in official rental data and displays it on an interactive map. Using Supabase as the backend, the dashboard provides an immediate visual sense of rental trends across Singapore, making it easier to gauge whether your rent aligns with the market.
[ The Challenge ]
Cleaning Up Data and Standardization with Python
Singapore’s rental data comes from multiple sources, each with its own formatting, missing values, and inconsistencies. To make the data useful, I had to:
Normalize Data Formats: Different datasets had varying structures, requiring standardization of column names, address formats, and rental values.
Handle Missing & Duplicate Data: Some records had incomplete information (e.g., missing unit sizes or rental prices), while others contained duplicates that needed to be removed.
Convert Unstructured Data into Usable Formats: Address data needed geocoding to map it accurately, and rental listings had to be categorized by property type, district, and lease terms.
Automate the Data Cleaning Pipeline: I used Python (Pandas, NumPy, and GeoPandas) to preprocess data efficiently before feeding it into the Supabase backend.
Complex Filtering Property Types System
One of the biggest challenges was implementing a robust filtering system that allows users to find relevant rental data easily. This involved:
Multi-Level Filtering: Users can filter by property type (HDB, Condo, Landed), district, price range, and lease term—ensuring that selections dynamically adjust based on available data.
Handling Diverse Property Classifications: The URA dataset includes various sub-categories (e.g., 3-room HDB, Executive Condos), requiring detailed mapping to broader property types.
Optimizing Query Performance: Since filtering happens dynamically on the frontend, I had to balance performance with real-time responsiveness. I optimized database queries in Supabase and preprocessed some data to minimize load times.
User-Friendly UI/UX: The filter system needed to be intuitive, with clear dropdowns, sliders, and toggle options that update the map and charts in real time.
[ Technicality ]
Tech Stacks
Next.js: A React-based framework for server-side rendering and building web applications.
TypeScript: A statically typed superset of JavaScript that enhances code quality and maintainability.
Tailwind CSS: A utility-first CSS framework that streamlines the process of designing custom user interfaces.
Leaflet: An open-source JavaScript library for interactive maps, enabling dynamic visualization of rental data across Singapore.
Supabase: An open-source Firebase alternative that provides a real-time database and authentication services.
Features
Data Integration: The dashboard incorporates datasets from data.gov.sg and eservice.ura.gov.sg, which are updated quarterly. While these updates are not real-time, the data remains current and reflective of recent market conditions. The system is designed to facilitate manual updates in sync with the release schedules of these agencies.
Interactive Mapping: Built with Next.js and Tailwind CSS to create a dynamic, user-friendly map interface.
Geospatial Data Handling: Integrates Leaflet.js to manage and display geospatial data effectively on the map interface.
FlightTrack
[ Overview ]
For many expatriates and frequent travelers, keeping track of your days in and out of Singapore is crucial—especially concerning tax residency rules like the 183-day rule. Typically, tracking such details is part of a broader, often complex service offered by travel consultants or tax advisors. I wanted to create a tool that allows you to self-manage your travel records in a transparent, accessible way.
What I built
FlightTrack is a comprehensive dashboard that helps users log their flights, calculate total days spent abroad, and monitor their tax residency status. With a focus on user privacy and convenience, the app supports both guest access and full account logins, ensuring that even those seeking a temporary solution can benefit.
[ The Challenge ]
User Authorization
One of the key challenges was implementing a user authorization system that accommodates both registered users and guest access. This included:
Firebase Authentication: Manually setting up Firebase Authentication to handle different sign-in methods, including Google Sign-In and anonymous access.
Guest Data Expiration: Ensuring guest data disappears after 24 hours, requiring a system that stores temporary data while maintaining privacy and efficiency.
Date Range Picker Integration
Another challenge was creating a seamless date range selection experience that aligns with how airline apps handle flight booking. This involved:
Intuitive Date Picker UI: Implementing an intuitive date picker that mirrors airline-style selections while integrating smoothly with the dashboard.
Accurate Date Calculations: Ensuring selected dates accurately reflect in calculations, particularly for tracking total days spent abroad and tax residency implications.
[ Technicality ]
Tech Stacks
Next.js: A React-based framework for server-side rendering and building web applications.
TypeScript: A statically typed superset of JavaScript that enhances code quality and maintainability.
Tailwind CSS: A utility-first CSS framework that streamlines the process of designing custom user interfaces.
Recharts: A charting library built with React and D3, used for creating interactive data visualizations within the dashboard.
Firebase Authentication: Provides secure user authentication, including support for Google Sign-In.
Firestore: A NoSQL document database from Firebase, used for storing user flight records and related data.
Features
Authentication & Data Management: Utilizes Firebase Authentication (Google Sign-In) and Firestore to securely handle your flight records.
Comprehensive Flight Management: Allows you to add, edit, or delete flight entries, complete with country selection and flag visualization.
Insightful Dashboard: Uses Recharts to visually display key travel metrics like total flights, days abroad, and average stay durations.
Tax Residency Insights: Automatically calculates how your travel affects your Singapore tax residency.
Guest Mode Option: For users not ready to commit, guest mode stores data temporarily (for 24 hours), while full account access offers persistent tracking.
Reflection
Working with CursorAI was a bizarre yet transformative experience—it showed me that even with my limited coding background, I could build functional, useful tools simply by conversing naturally with an AI agent.
The weekend was filled with a mix of frustration, amazement, and humorous setbacks—like moments when Claude would get stuck in a loop, and I'd find myself begging it to just fix the issue—alongside valuable lessons in modern tech stacks and integrations. I built these apps mostly for fun and to push the limits of the new AI tools that are now available.
Every line of source code is available for free on my GitHub.
