FoodFlix
To run FoodFlix
- Open webpage https://fac-sixteen.github.io/Week3-Magic3/
To run the project locally 💻
- Create new project folder in your local directory, using mkdir.
- cd into the new directory.
- Git clone https://github.com/FAC-Sixteen/Week3-Magic3.git
- Run npm i
Project is a progressive mobile app: Here is how to run it: (only for iphone users on safari) 💻
See image below for visual steps.
- Visit web page https://fac-sixteen.github.io/Week3-Magic3/ on mobile on safari on iphone.
- Click box with arrow in it at bottom of screen.
- Select 'Add to home screen'.
- Click 'Add' on next screen.
- App should now be available as an icon on your home screen.
- Click icon to open app. Follow user journey.
User journey
Web:
- User views web address.
- User then has 5 choices:
- Click randomiser button (to receive both a random movie and meal from entire list).
- Select cuisine from dropdown (to narrow choices).
- Random meal choice and random movie choice appears.
- User decides if they like the selection.
- If user does not like the selection, they have 2 choices:
- Click on either the movie card or the meal card and it will independently reselect a new random option.
- User has a lovely evening.
What we worked on 🕜
Day 1️⃣ (worked as a three on 1 laptop)
- Set up Food Api using TheMealDB API
Day 2️⃣ (worked as a three in morning, as 2 and 1 in afternoon)
- Set up movie API (using MovieDB API) and loaded information into HTML.
- Created Readme.
- Added CSS elements to make it look great. (Sylvia started this in the morning)
- Updated our user journey.
Day 3️⃣(working mainly individually, but sometimes as a 3 or 2.)
Based on rasied issues, we ..
- Removed some non-working fields in the dropdown select.
- Made the entire website into a progressive web app.
- Added some margins to the dropdown selections.
- Fixed some functionality issues with the movie selection api.
- Added functionality to change from hover to onclick showing information.
Issues we ran into
- Food API when pairing the ingredients and the measurements
- Replacing description hover with an expand and collapse
Stretch Goals
Some features we wanted to add if we had a bit more time.
- Spinning wheel.
Runs through all selections similar to a slot machine, before picking a final option.
- Fortune Cookie Api idea.
Wanted to add another api with a fortune cookie which when clicked on, gives a random piece of advice and a fortune cookie which splits apart using an .SVG.
- Add recursion and refactoring code.
We didn't manage to fully refactor our code due to lack of time but if we had more time this is something we would have likes to do.
- Add filters allowing users to select movie genres and type of cuisine. (COMPLETED).