Dining RC React Native App Development

Dining RC React Native App Development: My Software Engineering Journey

Dining RC React Native App Development
Poster for DiningRC App Application

✍🏼 Project Description

Dining@RC App is a React Native application that serves as a one-stop solution for students living in NUS Residential Colleges to view the daily menu served at the Dining Hall. Students who use the app can make informed decisions about their meals instead through the in-app review section instead of asking their friends - "what is good for dinner?"

Tech Stack: React Native, JavaScript, Firebase (Authentication and Storage), Figma, Git

GitHub Repo

👩🏻‍💻My Role

I learned that no person plays a single role in a software engineering project. Working in a team of 2, I led as the product manager, front-end developer, and user experience designer.

I oversaw the app development lifecycle by working with my partner and mentor to define project goals and priorities throughout the duration of the project.

I worked on wireframing, prototyping, and user testing to ensure a seamless and user-friendly experience for students using the app, in Figma.

I was responsible for creating responsive and engaging user interfaces using JavaScript, CSS, and React Native.

⭐️ Project Outcomes

💡
We launched this project under the NUS School of Computing's Orbital 2022 and were awarded Apolo 11 level of achievement.

We conducted three rounds of unit and user testing before successfully launching our product. For unit testing, we tested component and page navigation with eight software engineers who shared their constructive feedback.

Moreover, we conducted user testing with two groups of users:

Primary Users: Students living in residential colleges who eat regularly in the Dining Halls.

Secondary Users: Students not living in residential colleges who are familiar with food applications.

Intermediate Stage: Survey result of the usability of the DiningRC application

We worked iteratively in three stages to address the usability, intuitiveness, and functionality of the DiningRC application.

Upon deploying the application, I was proud that all our users enjoyed the application. We could finally say confidently, "This app tells me what I want to eat for dinner!"

Final Stage: Survey result of the usability of the Dining RC application

🎉 Deliverables

💡 My Developers Journey

Back in 2022, I gave myself the challenge to design, develop, test, and deploy an application. All with zero experience...

Problem Statement

I lived in a Residential College in NUS during my first 2 years in the university, where we had a different menu for dinner every day. It was clear from the beginning I wanted to develop an app that solved an everyday problem faced by many students including myself.

I always asked myself these questions:

  1. What stalls have the most delicious dishes today?
  2. What do my friends say about today's menu?
  3. What do I think about today's menu?

As a result, my team and I set out to answer these three questions.

User Stories

  1. Students could view the menu and according to views like “Popular Dishes” – for dishes popularly rated by students and “All Stalls” – for all dishes sorted by stalls displayed that day.
  2. Students could rate their dishes and post comments on the forum based on the dishes eaten.
  3. Students can update, edit and delete any of the reviews made in the app through their profile page.

Features

We ideated features we believed to be necessary for our DiningRC application:

  • Stall Listing
  • Dish Ranking
  • Forum and Polling
  • Account Management

In addition to accessing the Firebase database by admins, we intended for all users could perform CRUD operations for the features mentioned above.

Challenges (and Valuable Lessons!)

No project comes without its challenges, and believe me, I learned a lot and honed my skills too.

User Experience Design

How do you even start designing a phone application? Turns out, a magical software called Figma allowed me to do exactly that. I knew I wanted a minimalistic design for the page which allowed accessible navigation.

Given that I had no background in design and creating a design system from scratch felt too daunting, I started by using a component library shared on Figma which had the essential buttons, forms, fonts, and components needed.

After I gained confidence using Figma, I realized that User Experience Design was not just designing on Figma.

It was:

  1. User Research: what kind of interfaces appealed to students and adults aged 18-25?
  2. Research Analysis: Given the information, I researched, what are the key features my application needed?
  3. Wireframing: What do I want my app to look like?
  4. Prototyping (Front-End Dev): How will my app work with the current interface?
  5. User Testing: Do my users actually like the current interface
  6. Optimizing: How can I enhance the usability and accessibility of my application?

Front-End Development

Wireframing on Figma was the first hurdle I crossed, and the next was learning to write and develop using React Native and JavaScript.

How can I make my designs into reality? I harnessed the power of React Components and Ant Design Library to design the features of the app. To make our features functional, I learned to query, fetch data and display data from our Firebase database of dishes and student information. This allowed us to make the app dynamic rather than static.

A heck of lot of time was spent on Youtube and Firebase API page...

Moreover, further user testing suggested the following front-end development changes.

Here's a sample comment taken from our survey:

“It’d be nice to have the dishes sorted by the stall! like all the western dishes first, then Asian, Muslim etc”

This feedback refers to the Homepage with “Popular Dishes” and “All Stalls”, it seems to suggest a filtering button to sort based on store rather than by rating. 


Currently, our Popular Dishes tab has the following sorting, which sorts through all the dishes by ranking and displaying them in descending order. Before passing the array into a FlatList component to be rendered.


const sortingArray = (array) => {

    array.sort((a,b) => {

        return a["info"]["Ranking"] - b["info"]["Ranking”];

    });

    return(array)

}


In the next milestone:

  • We could consider sorting by ranking and then by stall ID. 

  • We could use a filter option to allow users to sort by stalls.


We improved on the usability of the application by allowing for sorting by ranking, storeID. This was an important feature to note as our users have different dietary requirements e.g. Halal, Vegetarian and Allergies which should be taken into consideration when designing a holistic user interface.

Product Management

I oversaw the project by leading the team by developing plans and acting on feedback given by the team.

I defined and communicate a clear product vision that aligns with the team's overall strategy in order to move past the different milestones in this project.

I learned to be clear in my communication and delegate work based on the strengths of my team. We underwent a strengths assessment, where my partner was confident in managing backend and database-related issues. Delegation of work did not mean that I only dabbled in front-end development, it meant that we were responsible and accountable for our different parts of development.

I learned to be the "subject matter expert" when pitching to our mentors and discussing with our team on the development of the project. My programming knowledge gave me a thorough understanding of the possibilities, timelines, and work processes involved in our project.

And quite importantly, I learned to organize the tasks delegated, and communicate with external and internal parties.  Using a Google Sheet for Agile Development, was extremely useful in being organized for our milestones (sprints)!

Creating Dining RC application was an experience that had a lot of firsts. It opened my eyes to what I was capable of doing and creating with code!