Bill Splitting App

Built using Next.js and Shadcn UI for the frontend, and Python Flask (with some Postman testing) for the backend, this is a modern, simple app for group outings and bill splitting. It allows users to split bills in just a few seconds. I deployed the frontend and backend separately on Vercel and Render, giving each app a distinct UI and design. This project was part of my self-study, where I practice Python and JavaScript independently to understand their syntax and differences. I had previously built the same app using plain JavaScript, and revisiting it with Next.js and Python was both a fun and educational experience. Having gained some deployment knowledge, I wanted to recreate the app and practice full-stack development. I’m very proud of this project, and I plan to use it with friends and family as well.

Design & UI

For the Next.js version, I used the classic Next.js color palette along with Shadcn UI components—buttons, cards, labels, and inputs. I really enjoy working with Shadcn UI because it makes building a clean, modern interface fast and consistent. For the JavaScript version, I chose a cutesy, fun spring-inspired palette that gives a slightly retro vibe. This creates a visual transition between the two projects: the JS version feels nostalgic and playful, while the Next.js version reflects a modern, sleek look.

Tech Stack Used

• NextJS
• Tailwind
• Shadcn UI
• Python
• Flask
• Postman
• Vercel
• Render
• JavaScript
• HTML
• CSS

Development Journey

I initially built this app using vanilla JavaScript, where all functionality was in a single package—simple, straightforward, and front-end only. The UI had a fun, spring-inspired palette, giving it a slightly retro, playful vibe. Later, I recreated the app as a full-stack project using Next.js and Shadcn UI for the frontend, with Python Flask powering the backend. This version features a modern, sleek design and was deployed separately on Vercel (frontend) and Render (backend). Deploying this version was a fun challenge that helped me practice full-stack development, terminal usage, and cloud deployment. Both versions demonstrate my growth from basic JS coding to modern full-stack development, and the project is now live and fully interactive on my portfolio.

Reflection

It was a great learning experience to build the same app in two different ways — first with vanilla JavaScript, and then with Next.js and Python. It allowed me to see how different technologies can be used to achieve the same goal, and it was rewarding to see the project evolve from a simple front-end app to a full-stack application.

Snippets