Explore Our World

Explore Our World is a React app backed by an Express API server, persisting data from a PostgreSQL database populated with UNESCO world heritage site data. The project has a basic interface that fetches images, if available, from a Flickr API.

To Use Locally

Docker

This project relies on Docker to run the PostgreSQL server. You must install Docker first before continuing.

Use one of these methods:

• Use Homebrew on macOS: brew install --cask docker
• Follow the instructions on the Docker website

Once you've installed Docker Desktop, you'll need to launch the app. On macOS, it's located in /Applications/Docker.

Node

You'll need to install Node v14 or above. nvm is highly recommended.

Install NPM Packages

npm install

Set Up postgres User Password and Database Name

We need to set up couple pieces of information in order to start a new PostgreSQL server instance, as well as to connect to it later from the Express server.

1. Copy the example environment file

   cp .env.example .env

2. You can choose to edit .env or just use as-is.

See the PostgreSQL Docker image documentation for more information.

Initialize the Database

Let's set up the database server, create the application database, and seed it with the UNESCO data. You only need to do this the first time you set up your local environment.

npm run db:init

ℹ️ If you ever need to start over with the database, you can run this command again which will delete your existing data and start from scratch.

Start

npm start

Visit http://localhost:3000.

Flickr API

1. Apply for a free Flickr API key.
2. Create a config.js file, to place key data.
3. Place config.js in .gitignore
4. Import FLICKR_API_KEY from config.js
5. In the Gallery component, place FLICKR_API_KEY as the value for the data object property: api_key.

Note: Adding Custom Environment Variables

Shut Down

1. Ctrl-C to stop the Express and React development servers.
2. npm stop to stop and destroy the PostgreSQL Docker container. Don't worry, your data is safe.

Want More Details?

• Access UNESCO world heritage sites XML data.
• Read about the Flickr API.
• Read about the application stack.
• Read about the Express server.
• Read about the React app.

Contributors ✨

Thanks goes to these wonderful people and to Techtonica for such an amazing experience! (emoji key):

George Song 💻 📖 🚇 🤔🚧	Sinuhe Guerra 🐛 🤔 💬 📓	Zelma Sedano 🤔💬	Jen Huynh 🐛📓👀 💬
Tabitha O'Melay 🤔📓👀	Sarah Graywood 🤔👀	Shaylan7 🤔👀	Xiao Zhong 🤔📓👀

This project follows the all-contributors specification. Contributions of any kind welcome!