Boba Business Management, a team project, is a comprehensive platform for simulating an online bubble tea business. Every time you open the app, you'll be greeted with new orders to manage, reviews to moderate, emails to read, and products to restock. You can switch between Admin and Shopper modes at any time, and every action you take in one mode directly affects the other.
Monitor your store's health at a glance with an intuitive dashboard that highlights new orders, product stock levels, recent reviews, and incoming messages requiring attention. This streamlined overview keeps you informed about critical updates, helping you make quick decisions that drive business performance. Stay one step ahead with real-time alerts and concise, actionable insights.
Screenshot of the admin dashboard
Comprehensive Management Pages
Comprehensive Management Pages
Take charge of your online store with dedicated pages for emails, orders, reviews, and products. Each page offers advanced searching, filtering, sorting, and pagination, ensuring you can swiftly locate the details you need. Drill down into any item for a closer look, then moderate, respond, or update information with ease.
Video of interacting with admin pages
Product Creation & Modification
Product Creation & Modification
Easily build and update your product catalog with detailed entries for name, description, price, stock levels, and images. Make real-time edits to reflect changes in inventory or promotional pricing, ensuring customers always see accurate information. Keep your listings appealing and competitive by refining product details whenever necessary for maximum engagement.
Screenshot of the edit-product page
Dual-Role Experience
Dual-Role Experience
Effortlessly toggle between Shopper and Admin perspectives to explore your store from every angle. In Shopper mode, browse products, fill carts, and leave reviews, while Admin mode handles stock management, order processing, and content moderation. Any action in one role instantly affects the other, creating a seamless, real-time feedback loop.
Video of switching to shopper view and buying products
Self-Contained Shopper Environment
Self-Contained Shopper Environment
Enhance the user journey with a realized shopper environment that goes beyond basic browsing. Shoppers can view and manage orders in a personalized profile, keep a wishlist, and edit personal details like addresses or phone numbers. They can also leave product reviews to share feedback, creating a vibrant shopping experience.
Screenshot of the shopper user's profile page
Development Process
Our main objective with Boba Business Management was to create a robust, feature-complete application that showcased everything we had learned during our intensive coding bootcamp. We incorporated a familiar tech stack (React, TypeScript, Express, SQLite, and Auth0) while maintaining a systematic approach from the start. By committing to Agile methods, thorough planning, and consistent communication, we tackled complex features like dual-role functionality and daily data generation, infusing a realistic simulation layer into the standard e-commerce environment.
Planning the App
Planning the App
We started by defining a vision that balanced shopper interactions with admin oversight for a two-in-one store simulation. Detailed feature lists and user stories kept both sides aligned, covering real-time stock updates, user reviews, and daily notifications. Once core capabilities were agreed upon, we mapped out our APIs and database schema to anticipate potential bottlenecks. This systematic approach clarified how the front end and back end would interact, saving us from guesswork and streamlining development.
Screenshot of a portion of API plans for planned features
Developing the Wireframe
Developing the Wireframe
We transitioned to Figma to wireframe our interfaces collaboratively, making live edits to layout, navigation flow, and user experience. By mapping features and components visually, we reduced the risk of missing essential elements during coding. This phase also sparked discussions about color palettes, branding, and displaying data like product inventories. Ultimately, wireframing aligned our visual goals and user pathways before any code was written, enabling a smoother transition into development.
Screenshot of some wireframes from Figma
Working Effectively as a Team
Working Effectively as a Team
After finalizing wireframes, we adopted an Agile workflow with daily standups to address progress and obstacles. End-of-day retrospectives highlighted wins and areas to refine, keeping morale high and processes agile. Communication thrived in our shared Discord channel, where we quickly tackled code reviews, bug fixes, and urgent questions. This continuous feedback loop ensured issues were resolved before escalating, and everyone felt accountable for the project's success. Collaborative ownership and transparency became the foundation of our productivity.
Screenshot of our team's shared Discord channel
Organization & Task Delegation
Organization & Task Delegation
We used Trello to break down each feature into actionable tickets, linking them to relevant wireframes and APIs. Every ticket included clear objectives, acceptance criteria, and any dependencies, so teammates understood their responsibilities. Pull-request duties rotated, providing collective experience in code review, version control, and integration testing. By merging frequently, we prevented major conflicts, ensuring the codebase remained stable. Transparent deadlines and straightforward workflows allowed team members to focus on tasks while keeping sight of overall progress.
Screenshot of delegated tasks on our team's Trello board
Ensuring Secure Routes
Ensuring Secure Routes
We needed a robust security model to protect admin-only pages, so we integrated Auth0 for authentication and a custom layer to verify admin status in our database. This prevented unauthorized changes that could alter product listings, override pricing, or disable items. Each request was scrutinized, ensuring users had proper credentials to perform high-level actions. Rigorous testing and peer reviews helped us identify gaps, reinforcing data integrity and user trust across all sensitive operations.
Screenshot of our Admin authorization wrapper
Enhancing It Further on My Own
Enhancing It Further on My Own
Some months later, I expanded the project "Boba Buddies" into "Boba Business Management," focusing on realism and user immersion. Randomized daily orders, reviews, and messages added unpredictability, prompting vigilant stock monitoring and review moderation. Query parameters preserved filters, sorts, and searches, addressing a major pain point from the original version. I removed the strict authentication, so users could easily switch roles, creating a smoother demo experience. If you would like to experience the admin authentication, it is still available in the original Boba Buddies.
Diagram of BBM's modified database structure to enable new features
Outcomes & Reflections
Outcomes & Reflections
Boba Business Management successfully demonstrated our full-stack expertise and adaptability, moving seamlessly between shopper and admin views. Our methodical process—roadmapping, wireframing, implementing Agile ceremonies, and rigorous testing—proved that structured planning leads to smoother development cycles. Personally, I learned to balance user convenience against real-world complexity. This experience illuminated the importance of collaborative teamwork, thoughtful design, and ongoing refinement in delivering a robust, future-proof application that truly meets users' needs. It also solidified my confidence in managing large-scale project coordination.
Birds-eye-view screenshot of BBM's architecture
Lessons Learned
Collaboration can be challenging when balancing different schedules and working styles, but our daily standups and open communication channels were vital for resolving conflicts. We learned that consistent team check-ins create a culture of support and shared progress.
Detailed planning prevents feature overload. Initially, too many ideas floated around without a solid anchor, risking a chaotic development process. Creating an agreed-upon roadmap, aligning features with APIs, and sticking to defined milestones allowed us to deliver a polished, cohesive product.
Personally, I learned the value of taking ownership. By spearheading the upgraded version, “Boba Business Management,” I improved my skills in dynamic feature development, mobile-responsive design, and UI/UX enhancements. This experience solidified my confidence as both a contributor and a solo developer.
