Joja Broast
A restaurant website focused on strong visual presentation, clear menu sections, smooth navigation, and a responsive experience across desktop and mobile devices.
Six builds, six different problems. Each section below breaks down what I was solving, how I actually built it, the stack decisions behind it, and what went wrong along the way because that last part is usually the most useful one in an interview.
Scroll to begin ↓
• The Problem
Most demo banking applications focus on visual design while relying on static or unrealistic data. I wanted FineTech to behave like a real digital banking platform, where users could securely manage accounts, perform deposits, withdrawals, and transfers, and see balances update instantly with every transaction. The goal was to build a system that prioritized data integrity, secure authentication, and a seamless user experience instead of simply replicating a banking interface.
• The Build
The frontend is built with React and Redux Toolkit, communicating with a Node.js and Express REST API, while MongoDB stores users, accounts, ledger entries, and transaction records in separate collections. Every transfer request passes through a secure authenticated endpoint where the sender's account is validated, the available balance is verified, and the transfer amount is debited from the sender before being credited to the recipient. Each operation generates corresponding ledger entries and a transaction record, ensuring every financial movement is fully traceable and account balances remain synchronized. Once the transfer is successfully completed, Nodemailer automatically dispatches confirmation emails to both the sender and the recipient, providing immediate transaction notifications and improving transparency across the platform.
• Stack Breakdown
• Key Challenge
Maintaining financial consistency during money transfers. Every transfer needed to update two separate accounts while also creating ledger entries and a transaction record. I designed the transfer workflow to validate the sender's available balance before processing the transaction, execute the debit and credit operations in sequence, record the transfer in the ledger, and only send confirmation emails after the transaction completed successfully. This ensured account balances remained accurate and every financial operation was fully traceable..
• The Problem
Most AI assistants are limited to answering questions through text or voice, requiring users to manually switch between applications to perform everyday tasks. I wanted JARVIS to go beyond conversation by acting as a desktop assistant capable of automating real actions, such as sending WhatsApp messages, initiating voice or video calls, and responding to voice commands through a single interface.
• The Build
I built JARVIS as an AI-powered desktop assistant with both voice and text interaction, combining natural language capabilities with task automation. The application understands user commands, processes them through a Python backend, and performs actions such as sending WhatsApp messages, initiating voice and video calls, and responding conversationally. Browser automation is powered by Selenium, while desktop interactions are handled with PyAutoGUI, enabling JARVIS to automate tasks that would otherwise require manual user input.
• Stack Breakdown
• Key Challenge
Creating a reliable automation workflow across multiple applications. The primary challenge was translating voice commands into accurate browser and desktop actions while maintaining a smooth user experience. I solved this by combining Selenium for browser automation with PyAutoGUI for desktop interactions, allowing JARVIS to execute WhatsApp messaging, voice calls, and video calls through a consistent command-processing pipeline.
• The Problem
Most AI website generators either produce generic templates or require significant manual editing before a site is ready to use. I wanted Quantum AI to eliminate that friction by allowing users to describe their idea in plain English and receive a modern, responsive website that is organized, editable, and ready to deploy in just a few clicks.
• The Build
I built Quantum AI as a full-stack AI-powered website generation platform using React, Node.js, Express.js, and MongoDB. Users can authenticate with Google, describe their website using a single prompt, and instantly generate a complete frontend with modern layouts, responsive design, and clean code. The platform manages generated projects, stores them securely in MongoDB, and integrates OpenRouter to power AI-driven code generation. Once satisfied with the result, users can deploy their website with a streamlined one-click deployment workflow.
• Stack Breakdown
• Key Challenge
Transforming a single user prompt into a complete, deployable website. The challenge was designing a workflow that could reliably convert natural-language requirements into structured frontend code while maintaining responsiveness, modern UI standards, and deployment readiness. I solved this by creating an AI-driven generation pipeline that processes prompts, structures project files, manages generated code, and enables one-click deployment through an integrated deployment workflow.
• The Problem
Most online currency converters only provide one-time calculations without preserving previous conversions, making it difficult for users to review or compare past exchange results. I wanted to build a responsive currency exchange application that not only delivers accurate real-time exchange rates but also maintains a searchable history of conversions with timestamps, creating a more practical and user-friendly experience.
• The Build
I developed a full-stack Global Currency Exchanger using React.js, integrating a real-time exchange rate API to provide accurate conversions across hundreds of international currencies. The application displays each currency alongside its corresponding national flag, supports instant currency swapping, and performs real-time calculations with asynchronous API requests. To extend its functionality beyond simple conversion, every exchange is recorded in a MySQL database with timestamps, allowing users to review their conversion history while demonstrating persistent data management and backend integration.
• Stack Breakdown
• Key Challenge
Combining real-time financial data with persistent conversion history. The primary challenge was integrating live exchange-rate updates while maintaining an accurate record of each conversion. I designed the application to fetch real-time exchange rates, perform instant calculations, and persist every successful conversion to a MySQL database with timestamps, enabling users to revisit previous exchanges without affecting application performance.
• The Problem
Many AI image generation tools prioritize powerful models but overlook the overall user experience, often requiring users to regenerate images or losing previously created content between sessions. I wanted to build Luminia as a fast and intuitive AI image generator that produces high-quality images from simple text prompts while preserving generation history locally and minimizing unnecessary API requests.
• The Build
I built Luminia as a responsive AI image generation application using React.js and Node.js. Users can generate high-quality images from natural-language prompts through the Pollinations AI API and instantly preview their creations within a modern, intuitive interface. To improve performance and usability, generated images and prompt history are cached and persisted in the browser using localStorage, allowing users to revisit previous generations without relying on a backend database. The application combines efficient client-side state management with caching strategies to deliver a faster and more seamless creative experience.
• Stack Breakdown
• Key Challenge
Balancing performance with a smooth user experience. The primary challenge was preventing unnecessary image generation requests while ensuring users could easily access their previous creations. I addressed this by implementing client-side caching and localStorage persistence, allowing generated images and prompt history to be reused across sessions. This reduced redundant API calls, improved application responsiveness, and provided users with a more seamless creative workflow.
• The Problem
Modern educational institutions require a reliable network infrastructure capable of supporting thousands of devices, multiple departments, and continuous communication across campus. I wanted to design a scalable campus network that provided efficient connectivity, logical network segmentation, and secure communication while minimizing congestion and simplifying network management.
• The Build
I designed a complete campus network architecture using Cisco Packet Tracer, connecting multiple academic departments, administrative offices, computer laboratories, and shared campus services. The network was segmented using VLANs to improve security and reduce broadcast traffic, while routers and Layer 3 switching enabled inter-VLAN communication. Dynamic routing and IP addressing were carefully planned to ensure reliable communication, efficient traffic flow, and a scalable infrastructure capable of supporting future expansion.
• Stack Breakdown
• Key Challenge
Designing a network that balanced scalability, security, and efficient communication. The primary challenge was segmenting multiple campus departments while ensuring seamless connectivity across the entire network. I addressed this by implementing VLAN-based network segmentation, structured IP addressing, and inter-VLAN routing, creating a design that reduces unnecessary broadcast traffic, improves security, and remains easy to manage as the network grows.
A collection of smaller client and personal builds focused on practical solutions, polished interfaces, responsive layouts, and real-world web experiences.
A restaurant website focused on strong visual presentation, clear menu sections, smooth navigation, and a responsive experience across desktop and mobile devices.
A clean food-brand website designed to showcase the menu, atmosphere, and brand identity through an engaging interface while maintaining a simple and responsive user experience.
A professional business website redesigned with a modern interface, responsive layouts, structured content, smooth interactions, and a functional contact form backed by a Node.js and Express.js server.