Change Version

development

Grub Run

GrubRun is an interactive web application that chooses restaurants at random based the user's selected location and radius. Users are able to browse through different restaurants and save restaurants they found interesting to their account. This web application is built using HTML, CSS, Javascript, React, and Firebase.

Role

Front-End Developer

Date

Sep 2018 - Dec 2018

grubrun logo

Project Process

01. Overall Functionality

Our web application has two significant interactive features. The first feature is the ability to view a list of random restaurants in a given location and radius based on input given by the user. This requires successful implementation of Yelp's API and other various programming functions. The second feature is the ability for a user to create an account and save any restaurants they like to a favorites list.

02. Data Persistence

Firebase is used for user authentication and as a cloud-hosted database that grants users the ability to save their favorite restaurants to a user account. This allows for easy access across different browsers and devices.

03. Responsiveness and Accessibility

Our web application follows a mobile-first design approach which aims to create better experiences for users by starting the design process from the smallest screens. This helps ensure the user experience to be seamless on any devices. Our application is accessible and supports non-visual devices like screen readers. React components are rendered to semantic HTML and visual elements have an appropriate alt or aria attributes.

04. User Experience

We made use of appropriate fonts, colors, page layouts, and images to create an intuitive and engaging user experience. We included a section that goes over every feature of our web application to make it easier for users to engage with our solution. We made sure to have a good balance of simplicity and usability that aims to reduce any points of confusion.

05. Implementation

Our web application is developed using the React library and contains code that is readable and understandable. We appropriately organized our code into components and separate files. Whenever our code becomes too long or difficult to understand, we included comments and documentation explaining how it works.

06. Outcomes

Through this project, I gained a deep understanding about the fundamentals of web development. I have acquired the skills and techniques necessary for creating sophisticated and accessible interactive web applications. Working on this project in stages allowed for iteration and improvement of skills as the project went from one stage to the next. I now have the foundation for independently learning new tools and techniques in the ever-changing world of web development.