Project Genesis
This project is an extension of our earlier work in IDM215, where we designed a conceptual food truck app using Figma. In this follow-up course, we were tasked with turning that prototype into a live web application using PHP, HTML, and CSS. Over the course of 11 weeks, our cross-functional team—consisting of developers, UX and UI designers, and a project manager—worked collaboratively to bring the site to life. We chose to focus on Nanu’s Hot Chicken because most of our team members had previously worked on examining their branding. This familiarity gave us a strong foundation to build on.
Problem Statement
The original website for Nanu’s Hot Chicken lacked visual clarity, brand cohesion, and mobile responsiveness. Our goal was to redesign the user experience and build a fully functional web app from scratch that could represent the business more effectively—especially on mobile. The project needed to deliver intuitive navigation, dynamic content rendering, and basic user account features like order history. In addition to technical learning curves, we also had to simulate a professional development environment by dividing responsibilities, managing deadlines, and iterating based on user testing.
Design Evolution & Process
Since much of the design work was completed in IDM215, the visual layout of the app didn’t undergo significant changes during this phase. Our main focus shifted to adapting static designs into a live, working product. This involved translating user flows into real code, troubleshooting layout issues, and refining components to ensure they aligned with the brand’s identity and delivered an intuitive user experience. The UX/UI team refined the Figma files to ensure they were feasible within our tech stack before handing them off for implementation.
For our process we structured it around three phases—alpha, beta, and final—each followed by rounds of user testing. The UX/UI team conducted the initial tests, collected feedback, and distilled actionable items, which we then addressed in subsequent development sprints. We used a combination of Microsoft Teams, Discord, and group texts to keep communication flowing smoothly. Weekly task lists and Monday progress meetings ensured everyone stayed on track, while feedback loops were built into each sprint. The development team also maintained a separate Discord channel for more in-depth troubleshooting and code collaboration.
Technical Challenges
One of our first major challenges was figuring out how to collaborate effectively as developers. For many of us, this was our first time working on the same codebase with multiple contributors. We learned to manage version control using GitHub, and eventually set up auto-deployment to our Bluehost server via the main branch. Choosing a hosting provider also posed a challenge—we ultimately went with Bluehost for its support of PHP and MySQL via phpMyAdmin. Personally, I faced a learning curve with setting up the Git workflow and server integration, but these experiences helped me understand full-stack deployment at a deeper level.
My Role
This was a team-based project with six members, including a project manager who helped coordinate timelines and assigned weekly deliverables. I contributed to both frontend and backend development, but focused more heavily on the backend in the latter half of the project. My primary responsibilities included creating PHP functions that handled database queries, such as dynamically displaying menu items and retrieving user order history. I also managed the Bluehost hosting setup and oversaw deployment from our GitHub repository. Our development team met twice weekly to check progress and troubleshoot together, and collaborated with the UX/UI team during testing and feedback rounds.
Technologies
Our tech stack included PHP, MySQL, HTML, CSS, and some JavaScript. We used GitHub for version control and Bluehost for hosting. Although we had some experience with the front-end portion and GitHub, we had to learn PHP and SQL in order to build dynamic, database-driven functionality. Bluehost was entirely new territory, and setting up a live server and database helped me understand web infrastructure in a practical, hands-on way. We worked without any external libraries, building all components from scratch to stay close to the code and have full control.
Results & Outcomes
By the end of the project, we had a working mobile site that fulfilled the main goals: it was responsive, reflected Nanu’s personality, and allowed users to interact with a live menu, create profiles, and track orders. The site dynamically pulled menu items from the database and processed user actions using PHP and SQL. While not 100% feature-complete, the app demonstrated real functionality and scalability. More importantly, it proved that our team could handle the full development cycle—from planning and testing to hosting and deployment.
Final Thoughts
This project reinforced just how critical cross-role communication is within a development pipeline. Staying organized and maintaining clear feedback channels allowed our team to stay on track and keep up with each week's milestones. It also gave me practical, hands-on experience with backend development, database integration, and web hosting—skills I’ll carry into future full-stack projects. Being one of my first team projects in a backend role it gave me a lot of insight on how these types of projects operate. If given more time, I would continue refining the interface and expanding the functionality, but I’m proud of the solid foundation we built together.