SlideShare a Scribd company logo
1 of 3
Download to read offline
This was my second project for WDI London
This app was built over six days and was the second of four projects I built during my time on the Web
Development Immersive course at General Assembly, London. The requirements were to build an
authenticated Express application with a Mongo backend and to use the Google Maps api. I fulfilled these
criteria and in addition opted to use data from a restaurant API called Zomato. A hosted version of Vegan
Restaurants in London can be found here The code can be viewed here
Vegan Restaurants in London is an online app designed to show the location of and details for a range of
different vegan restaurants in London. My inspiration for this project came form a personal interest in vegan
food as well as a realisation that, although there is a lot of information about vegan eateries in London, this
information is limited to dedicated but poorly made websites or merely small sections of other much larger
websites. I therefore endeavoured to create a more user friendly application for those who are interested in
WDI-Project-2
Introduction
The App
this information.
This website requires the user to have a profile and for them to be logged in in order for the information to
be accessed. Once the user is registered and signed in a map of London will display showing the location
of a number of restaurants (each one marked with a green "v"). When one of these markers is clicked a
pop-up window will display with the name and address of the relevant restaurant as well as a clickable link
to a webpage with further details of the establishment.
Vegan Restaurants in London is an Express application and was built using Node.js, HTML5, SCSS, a
Mongo, Express and JavaScript(ES6). The API used to obtain data for the restaurants is Zomato (the API
and documentation for which can be found here) This application also uses the Google Maps API (the API
and documentation for which can be found here). Vegan Restaurants in London requires user
authentication for which is uses JWT. I made use of Bower to manage front end packages, NPM to manage
back end packages, Babel to minify and transpile SCSS and ES6 and Gulp as my task runner.
As an educational project, necessarily, the build was a task which I found challenging and which utilised
many skills which had been newly learnt and still more which I would learn during the process. As this was
the first project in which I had used API's I found that extracting the data, particularly from the Zomato API,
a challenge. It also became evident that the quality of the data was not what I had expected after trying out
the API on the Zomato website. Filtering the data effectively, obtaining links for official websites of listed
establishments and getting consistently high quality images were all problems which I faced. If I were to do
this project again I would choose a different API for restaurant data. If I had had the time I would put
together my own.
These steps are required in order to run the application:
1. Gulp and Node must be installed
2. Populate the database by running the following command in the root directory of the application using
the terminal: node db/seeds.js
3. Install all the relevant NPM and Bower packages by running the commands npm i and bower i
in the root directory of the application using the terminal
4. Go to http://localhost:3000 in your browser to view the site.
How to use the site
How it was built
Challenges during the build
Getting started
Credits
The styling for my map was taken from Snazzy Maps
The green "v" marker on my map was taken from Buenavida Health
The font used throughout the site was taken from Google Fonts
The Google Map API
Zomato API
GA instructors Alex Chin and Rane Gowan

More Related Content

Similar to WDI-Project-2-README

13 Great Examples Of React Native Apps In 2020.pdf
13 Great Examples Of React Native Apps In 2020.pdf13 Great Examples Of React Native Apps In 2020.pdf
13 Great Examples Of React Native Apps In 2020.pdfiDataScientists
 
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...Distilled
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
 
Steps For Building A Successful App For Your Business.pptx
Steps For Building A Successful App For Your Business.pptxSteps For Building A Successful App For Your Business.pptx
Steps For Building A Successful App For Your Business.pptxConcetto Labs
 
Turn your mobile app idea into reality using react native technology
Turn your mobile app idea into reality using react native technologyTurn your mobile app idea into reality using react native technology
Turn your mobile app idea into reality using react native technologyKaty Slemon
 
Applicaton Development using RESTful APIs
Applicaton Development using RESTful APIsApplicaton Development using RESTful APIs
Applicaton Development using RESTful APIsSourav Maji
 
Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...
Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...
Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...Bridget Randolph
 
Alt tab mobile company overview - feb 2015
Alt tab mobile   company overview - feb 2015Alt tab mobile   company overview - feb 2015
Alt tab mobile company overview - feb 2015Roger Jones
 
How Much Cost to Build a Mobile App
How Much Cost to Build a Mobile AppHow Much Cost to Build a Mobile App
How Much Cost to Build a Mobile Appqsstechnosoft1
 
PWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfPWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfLucas Lagone
 
App Indexing: Blurring the Lines Between Your Website and App
App Indexing: Blurring the Lines Between Your Website and AppApp Indexing: Blurring the Lines Between Your Website and App
App Indexing: Blurring the Lines Between Your Website and AppJuan Gomez
 
How To Build A Food Delivery App Like Uber Eats?
How To Build A Food Delivery App Like Uber Eats?How To Build A Food Delivery App Like Uber Eats?
How To Build A Food Delivery App Like Uber Eats?Tariq Mohammad Habib
 
How to Create an On-Demand Food Delivery App - AppsDevPro
How to Create an On-Demand Food Delivery App - AppsDevProHow to Create an On-Demand Food Delivery App - AppsDevPro
How to Create an On-Demand Food Delivery App - AppsDevProSofiaCarter4
 

Similar to WDI-Project-2-README (20)

Roast Restaurant - Mobile App case study
Roast Restaurant - Mobile App case studyRoast Restaurant - Mobile App case study
Roast Restaurant - Mobile App case study
 
Restaurant finder
Restaurant finderRestaurant finder
Restaurant finder
 
13 Great Examples Of React Native Apps In 2020.pdf
13 Great Examples Of React Native Apps In 2020.pdf13 Great Examples Of React Native Apps In 2020.pdf
13 Great Examples Of React Native Apps In 2020.pdf
 
Zunairzakir
ZunairzakirZunairzakir
Zunairzakir
 
Zunairzakir
ZunairzakirZunairzakir
Zunairzakir
 
Kuldeep_IOS
Kuldeep_IOSKuldeep_IOS
Kuldeep_IOS
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...
SearchLove London 2016 | Bridget Randolph | The Changing Landscape of Mobile ...
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Steps For Building A Successful App For Your Business.pptx
Steps For Building A Successful App For Your Business.pptxSteps For Building A Successful App For Your Business.pptx
Steps For Building A Successful App For Your Business.pptx
 
Trends in front end engineering_handouts
Trends in front end engineering_handoutsTrends in front end engineering_handouts
Trends in front end engineering_handouts
 
Turn your mobile app idea into reality using react native technology
Turn your mobile app idea into reality using react native technologyTurn your mobile app idea into reality using react native technology
Turn your mobile app idea into reality using react native technology
 
Applicaton Development using RESTful APIs
Applicaton Development using RESTful APIsApplicaton Development using RESTful APIs
Applicaton Development using RESTful APIs
 
Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...
Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...
Searchlove London 2016 - The Changing Landscape of Mobile Search - Bridget Ra...
 
Alt tab mobile company overview - feb 2015
Alt tab mobile   company overview - feb 2015Alt tab mobile   company overview - feb 2015
Alt tab mobile company overview - feb 2015
 
How Much Cost to Build a Mobile App
How Much Cost to Build a Mobile AppHow Much Cost to Build a Mobile App
How Much Cost to Build a Mobile App
 
PWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfPWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdf
 
App Indexing: Blurring the Lines Between Your Website and App
App Indexing: Blurring the Lines Between Your Website and AppApp Indexing: Blurring the Lines Between Your Website and App
App Indexing: Blurring the Lines Between Your Website and App
 
How To Build A Food Delivery App Like Uber Eats?
How To Build A Food Delivery App Like Uber Eats?How To Build A Food Delivery App Like Uber Eats?
How To Build A Food Delivery App Like Uber Eats?
 
How to Create an On-Demand Food Delivery App - AppsDevPro
How to Create an On-Demand Food Delivery App - AppsDevProHow to Create an On-Demand Food Delivery App - AppsDevPro
How to Create an On-Demand Food Delivery App - AppsDevPro
 

WDI-Project-2-README

  • 1. This was my second project for WDI London This app was built over six days and was the second of four projects I built during my time on the Web Development Immersive course at General Assembly, London. The requirements were to build an authenticated Express application with a Mongo backend and to use the Google Maps api. I fulfilled these criteria and in addition opted to use data from a restaurant API called Zomato. A hosted version of Vegan Restaurants in London can be found here The code can be viewed here Vegan Restaurants in London is an online app designed to show the location of and details for a range of different vegan restaurants in London. My inspiration for this project came form a personal interest in vegan food as well as a realisation that, although there is a lot of information about vegan eateries in London, this information is limited to dedicated but poorly made websites or merely small sections of other much larger websites. I therefore endeavoured to create a more user friendly application for those who are interested in WDI-Project-2 Introduction The App
  • 2. this information. This website requires the user to have a profile and for them to be logged in in order for the information to be accessed. Once the user is registered and signed in a map of London will display showing the location of a number of restaurants (each one marked with a green "v"). When one of these markers is clicked a pop-up window will display with the name and address of the relevant restaurant as well as a clickable link to a webpage with further details of the establishment. Vegan Restaurants in London is an Express application and was built using Node.js, HTML5, SCSS, a Mongo, Express and JavaScript(ES6). The API used to obtain data for the restaurants is Zomato (the API and documentation for which can be found here) This application also uses the Google Maps API (the API and documentation for which can be found here). Vegan Restaurants in London requires user authentication for which is uses JWT. I made use of Bower to manage front end packages, NPM to manage back end packages, Babel to minify and transpile SCSS and ES6 and Gulp as my task runner. As an educational project, necessarily, the build was a task which I found challenging and which utilised many skills which had been newly learnt and still more which I would learn during the process. As this was the first project in which I had used API's I found that extracting the data, particularly from the Zomato API, a challenge. It also became evident that the quality of the data was not what I had expected after trying out the API on the Zomato website. Filtering the data effectively, obtaining links for official websites of listed establishments and getting consistently high quality images were all problems which I faced. If I were to do this project again I would choose a different API for restaurant data. If I had had the time I would put together my own. These steps are required in order to run the application: 1. Gulp and Node must be installed 2. Populate the database by running the following command in the root directory of the application using the terminal: node db/seeds.js 3. Install all the relevant NPM and Bower packages by running the commands npm i and bower i in the root directory of the application using the terminal 4. Go to http://localhost:3000 in your browser to view the site. How to use the site How it was built Challenges during the build Getting started Credits
  • 3. The styling for my map was taken from Snazzy Maps The green "v" marker on my map was taken from Buenavida Health The font used throughout the site was taken from Google Fonts The Google Map API Zomato API GA instructors Alex Chin and Rane Gowan