Team Fantastic Four present Calorie Wars

An interactive typing tool to help you enter a focused, productive state while using your keyboard.

The app is to develop fast, smooth, consistent and accurate typing over long periods. It's for anybody that types a lot for school or work but finds themselves making mistakes, getting distracted or being too slow. You type the presented paragraph while your laptop camera records your emotion or if you're distracted, you get real-time feedback on you performance that gets stored in your history that you can view later or compare to other users. We wanted to do something ambitious using photo/video/AR, and we ended up combining it into a teaching tool.

Calorie Wars Demo Video | Northcoders Project Presentations

Calorie Wars Demo Video | Northcoders Project Presentations

Team Fantastic Four

Asad AliPreview: Asad Ali

Asad Ali

Manita GuptaPreview: Manita Gupta

Manita Gupta

Ryan BirdiPreview: Ryan Birdi

Ryan Birdi

Tech Stack

We used React Native Expo, Expo Sensors (Pedometer, Barcode Scanner), Firebase Authentication, Cloud Firestore Database, React Native Navigation, React Native, Gifted Chat

We tried several new technologies in this project as they were best suited for our requirements.

On the Front-End, as we wanted to track steps and calories, a mobile-only application using React Native Expo seemed most appropriate as this technology has the ability to integrate a barcode scanner and pedometer using Expo Sensors. It is also a relatively familiar language having used React previously on the Northcoders Bootcamp and so knew we could build more complex features quickly in a short period of time.

We also made extensive use of various libraries to assist with the front-end design of the app:
React Navigation was installed to seamlessly transition from one app screen to the next and also to create a very intuitive and user-friendly tab navigation bar.
React Native Gifted Chat was used in conjunction with Firebase to create a very familiar instant messaging style chatroom.

On the Back-End, we made extensive use of the Firebase ecosystem:
Firebase Authentication was used on the login and registration pages to create a secure environment to store user data and make onboarding as user-friendly as possible.
Cloud Firestore was used as our main backend database and it was an obvious choice for three main reasons:
We wanted our app to live update and be cloud-based.
We also knew that we would have large amounts of non-standardized data to store from the food logs and so decided that a non-relational database would serve us best.
We had not used a database in the same format as Firestore previously on the Bootcamp and wanted to challenge ourselves and test its utility compared to Postgres.

We also made use of several external APIs:
Open Food Facts was used as it is one of the most extensive food items databases that can process barcode requests.
Calorie Ninjas API was also used to in the search bar on the homepage to fetch calorie data.

Finally, a variety of other developer tools were integrated into the project to improve workflow efficiency and code quality including EsLint and Prettier

Tech StackPreview: Tech Stack