Contributors: Oliwia, Ben, Gintare & Mikhail
A full stack React Native mobile application (Android) that allows users to install it on an Android phone, be able to search for a cocktail recipe, leave a comment, and (as an extension) personalise the experience . We will use Firebase database to store the recipe and user data.
Every day the human body needs food and water. Therefore, people either cook or order food online. To cook, you need to find food recipes make a shopping list, and tick each item in the list while shopping. You can use pen and paper but it's not environmentally friendly. You can type in your phone's notes but it takes some effort. That's the time when users decide to download a cooking app. And for food recipes, there are plenty of apps. But what about cocktails?
2-list-20230215-155835.1.mp4
Full app expirience is avaialable at https://www.youtube.com/watch?v=WsNRsFLqt1Y&t=1s
These are the main technologies we used to contruct the project.
used for database and authentication
Our initial brief was extremely ambitious, so as our team. Together through learning from scratch react native liblary and firebase database we have managed in two weeks time to accomplish the following tasks (shown bellow).
MVP
- Display recipes (with images)
- Be able to search cocktail recipe by name
- Data is stored in a database accessible through a RESTful API
- Have a README file with screenshots/videos and running instructions.
Extensions
Some of the features currently in progress:
- Be able to leave a comment under each recipe
- Have a two colour scheme being both accessible (dark and light)
- Comments have tags
- Recipe can be searched by the tag
- Be able to search cocktail recipe by ingredient
- Calculate recipe portion
- Be able to login
- Be able to add recipe to a shopping list
- Be able to customize recipe
Super Extensions
- Add a cloud (Firebase)
- Create a shopping bot
- Be able to add recipe to a party planner
- Create an email invitation
- Be able to make their own recipe
- To be able to upload the app to google play
Here are some of the things we've found difficult:
- Learning a new framework while planning & building
- Learning how Reactive Native works
- Making our database connect with our mobile app
- File structuring & naming conventions as the project scaled up in size
- Managing dependency and version issues
A ShakeIt demonstration consists of three parts:
- an Android app built with React Native and Expo Go
- a database and authentication service provided by Firebase
- a search service provided by a Java Spring Boot application
ShakeIt uses a Java+Spring+Firebase server to provide a HTTP/REST API for searching for recipes.
Before running the server you need to configure a serviceaccount.json file in the ShakeItSearch directory.
Go to the Firebase Admin Console for your project. Select [cogwheel] -> 'Project Settings' -> 'Service Accounts'.
Select 'Java' and the 'Generate New Private Key' button.
To build and run ShakeItSearch, just use this command in a new terminal. You will need to keep this running while using the app.
(cd ShakeItSearch && ./build_and_run)
Alternatively, open ShakeItSearch in IntelliJ where you can run the ShakeItSearchApplication or the tests.
Finally, to allow the Android app to contact the search service we are going to use
ngrok. In another terminal you need to use the following command. It writes
a searchConfig.js file for the Android app after starting an ngrok tunnel.
npm run ngrokSearch
Example data for loading into a Firebase realtime database is in the files data/examples/*.json.
The JSON files are generated by data in the JS files in the data/examples/ directory. To regenerate the JSON files, run npm start in the data/ directory.
The application logic in ShakeIt in tested with mocha.
Run the tests with npm test in the ShakeIt directory.