Food Atlas

Mini web app built with React that combines three of my greatest loves: travel, geography and food! This app allows you to explore the national dish of each country through an interactive world map.

Features

This app utilises React Simple Maps for the interactive map component as well as react-tooltip for the tooltips that display when the user hovers over a country. When the user clicks on a country or selects a country from the list, a pop-up will appear containing the name, description, photo and a link to a recipe for the national dish of that country. The user can then navigate back to the world map by clicking the back button. Users can also register and login so that they can create their own personalised lists of 'favourite' countries and dishes.

Live site

https://laikathespacedog.github.io/food-atlas/#/

Backend

The backend repo is available here.

Known issues

1. On some mobile devices (Android), you can only zoom in on the map once. If you try and zoom on the map a subsequent time, you will zoom in on the whole page and have to refresh the page to be able to zoom in on the map again. I'm currently looking into fixing this issue.

Setup instructions

To get set up with the project:

1. Run git clone git@github.com:LaikaTheSpaceDog/food-atlas.git <desired sub-directory>. The project files will be cloned to your local repo.
2. Go to your project directory and run npm install. This will install the dependencies in the local node_modules folder.
3. Run gulp watch. This will run the below gulp tasks automatically on save.
4. Run npm start. This will run the app in development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make any edits. You will also see any lint errors in the console.

Gulp tasks

• Watch task

  On start up, in your terminal, run:

  gulp watch
  

  This will enable live reloading on save and will also run all the listed gulp tasks below

• sass -> CSS

  sass to CSS convertion can be run standalone using:

  gulp sass
  

• minify CSS

  CSS compression can be run standalone using:

  gulp minify-css
  

• minify sass

  Run sass and minify-css tigether using:

  gulp minify-sass