This is the project made for Udacity's Mobile Web Specialist nanodegree. This project was divided into three stages, you can see the ending result of each stage in the corresponding branches:
The main purpose of this project is to learn/improve the skills at:
- Building Offline Capable Web Applications
- Building Performant Web Applications
- Building Accessible and Responsive Web Applications
After finishing the course, I've refactor parts of the code and I've used this project to practise with other technologies like webpack and docker
This is an application about restaurants, users can:
-
See information of restaurants
- Weekly schedule
- Location
- Cuisine type
-
Mark restaurants as favorite
-
Search restaurants filtered by neighborhood and/or cuisine type
-
Post reviews of a restaurant
-
See other users reviews of a restaurant
All the restaurants and reviews data is retrieved from the data_api server via a REST API. This data is then stored on IndexedDB so users can access the application with some content while being offline. Also, the waiting time for the application to load after the first load is very small because we first load the cached content and then update the application if the user is online.
Users can send reviews and favorite restaurants while being offline, once they are online the requests will be sent to the remote database even if they leave the application, in this last case the data will be sent only when the users come back to the application
First download the code from github
git clone --recurse-submodules https://github.com/carlosdg/RestaurantsReviews && cd RestaurantsReviews
Now you have to create a .env file in the webapp folder to store some environment variables needed for the application. The file should be like the following:
# MODE specifies whether webpack should build the public folder for production or development
# Values are "production" or "development" (without quotes)
MODE=development
# REMOTE_DB_BASE_URL specifies what is the base URL of the remote database server
# This is from where the application will try to fetch the restaurant and reviews data
# It has to include the URL scheme, host and port (if the port is different than the
# default one for the protocol)
REMOTE_DB_BASE_URL=http://localhost:1337
# MAPBOX_API_KEY specifies the API key for mapbox
MAPBOX_API_KEY=api_keyInstall the app dependencies, generate the app public folder and install the API server depedencies
cd webapp && npm install && npm run build && cd ../data_api && npm install
Now you can start the data server with npm start. Now, in a new terminal session, go to the webapp folder and run a web server to serve the public folder with npm start
docker-compose build
docker-compose up
- Carlos Domínguez García
Important Note: this project was started off from the Udacity's mws-restaurant-stage-1 repository. They created that repository as a starting point for the nanodegree project.