Project Brief: Educational App

The BBC are looking to improve their online offering of educational content by developing some interactive apps that display information in a fun and interesting way.

Your task is to make an MVP to put forward to them - this may only be for a small set of information, and may only showcase some of the features to be included in the final app. You might use an API to bring in content or a database to store facts. The topic of the app is your choice, but here are some suggestions you could look into:

• Interactive timeline, e.g. of the history of computer programming
• Interactive map of a historical event - e.g. World War 1, the travels of Christopher Columbus

MVP

• Display some information about a particular topic in an interesting way
• Have some user interactivity using event listeners, e.g to move through different sections of content

Some samples of existing apps for inspiration:

• http://chemistryset.chemheritage.org/#/
• http://www.royalmailheritage.com/main.php
• http://education.iceandsky.com/
• http://histography.io - may only work in Safari
• http://worldpopulationhistory.org/map/1838/mercator/1/0/24/

Project Planning - Multi-Language Travel Phrase Web App

MVP

Welcome page

• on 1st visit of app allows user to enter their name and home country

Translation View

• Provide a drop down list of destination countries.
• On country selection displays the country’s default language and top 10 travel phrases.
• Provide an option to save favourite country/language pairing & phrases for later use.

Extensions

Priority

• On subsequent visits to web app displays welcome greeting in home language e.g. “Bonjour Jean-Marie”
• Create a settings option to allow user to change name and home country
• User can enter their own phrase to translate and save if desired
• Map view showing visited countries / planned journeys
  • this could also be shown in the text version with a simple flag

Consider

• User can set the display order of phrases
• Map interaction to show country information
• Text to speech output for pronunciation
• Local weather
• Local timezones

Result - traveLingo

Installation

• clone the repository
• cd into the new directory
• npm install
• sign up and request an API key from http://openweathermap.org/api
• inside your app, create the file ./client/resources/openweatherAPI.js
• add the following code:

const openweatherAPI = {
  url: "http://api.openweathermap.org/data/2.5/weather?",
  key: "your_API_key_here"
}

module.exports = openweatherAPI;

To actually start the app

• In your terminal: one tab per process, all run from the root directory of the project i.e. where server.js is found

> npm run webpack (builds bundle.js files)
> mongod (starts database)
> mongo (opens database)
> npm start
(a script to start the nodejs server using nodemon,
server listening on localhost:3000)

• NB closing the terminal does not stop the processes
• if you get an error when running any of those commands, check the Activity Monitor and kill any process that shouldn't be running