Introduction + What is ByteBites?

Bytebites is a cloud-accessible, mobile-stable, Firebase powered web application that provides food-lovers with what truly matters — taste.

ByteBites is a social media platform that enables food-lovers internationally to gather and discuss about all-things food. Users are able to create posts with images of their meals and ask questions regarding cooking techniques or recipes.

Our Team

Our team consists of three members: Haris Kamal, Vraj Patel, and Ayush Vora.

Haris Kamal is the lead front-end developer who was in charge of creating the beautiful website that you will see when you navigate to the ByteBites official webpage, in addition the to the post view and creation pages.

Vraj Patel is one of the back-end developers who was in charge of collecting user input and bridging the front-end and back-end to create a cohesive user experience.

Ayush Vora is one of the back-end developers who was in charge of managing the Firebase database and linking the Firebase server to the central website.

How to use ByteBites

Making an account is also as easy as signing in with your Google account! Simply sign in and you are able to post, view, and search for your interests in the food world. The user experience is one that is clean and elegant, allowing users to take control in their browsing.


A demo for this web application can be found here, where the aforementioned features have been implemented to a demonstrable degree.


Our demo web application hosts numerous features that the user can engage with.

Feature Description
Firebase Authentication Using Firebase Authentication, we can easily let users sign in using their Google account. It is a simple way to get their name, email/username, and profile picture in the click of only a few buttons.
Firebase Realtime Database The Firebase Realtime Database is responsible for storing all the posts on our website. They are all saved in a JSON format that is easily accessible by the website.
Firebase Storage The Firebase Storage is used to store images, such as uploaded pictures for posts. These can later be accessed while displaying the posts.
Post Creation When signed in, one can make a post easily. A post must contain a title, as well as body text and/or an image to upload. Posts can also contain tags to making searching easier for users.
Post Viewing Below the post creation, users can see public posts from other users. The posts will show the user's username and profile picture, the title of the post, the time it was posted, the tags it is described as, and the image or body of the post, depending on the poster.
Post Deletion Don't like a post that you've made? No problem! You can go ahead and click the delete icon in the top right of YOUR post and it will be wiped from existence. The individual is only able to delete posts that THEY have made.
Tag Searching If there is a specific query that you are searching for, you can even filter posts by tags to find exactly what you are looking for.

alt text

Example of Creating a Post

Inspiration + Why we made it

During these unprecedented times when a world is in a state of disarray, what is needed more than ever is a sense of connectivity — a snap back to reality. By helping to strengthen the bonds within the food enthusiast community globally during the pandemic, we can strive to create not only a means for individuals to benefit in their cooking, but to connect and grow together, furthering the food industry collectively.

alt text

Our Experience During UofTHacks 2021

UofTHacks 2021 helped us grow as programmers and as a group. We learned many new things while we encountered many obstacles. We began this hackathon with zero knowledge of Firebase; however, we walked away with knowledge of databases and the bridge between the front-end. As a team, we persevered and overcame these obstacles while having fun, experiencing the best and the worst TOGETHER. We learned many new concepts in both the front-end and back-end aspects of our project. Overall, we had a great time and we hope to work together again in the near future.

Relevant Links

Languages, Tools, and Libraries Used

  • HTML, CSS, JavaScript
  • jQuery
  • Visual Studio Code
  • Bootstrap Studio
  • Google Firebase

Future Plans

This project is very scalable, and can be expanded in the future in many ways. Some examples that we have include...

  • Likes
  • Virtual Cookbook (saving posts)
  • Cooking Calculator
  • Shopping List


Built With

Share this project: