https://evert-r.github.io/milestone-two
- This website is created for the non-profit organisation 'Geen eieren voor je geld'. Wich in dutch literally means 'No eggs for your money', but actually is an old saying wich means that you get good value for your money. This organisation wants to promote a vegetarian/vegan lifestyle by providing vegan-cooking workshops, and now via the development of this new website/web-app.
- Vegatarians, vegans and other interested people from all over the world.
- They want to make it easy to find vegetarian/vegan restaurants wherever you are in the world, with one push of a button. Although there already is a very good vegetarian/vegan restaurant search website/app, wich uses its own database, they still feel this project will contribute something important. This web-based app will allways work everywhere in the world, because it's using the google places api as an engine.
- As a user who is visiting a new region I want to be able to search for a vegetarian restaurant with one press of a button, using a mobile device
- As a user who is planning to eat in another city or region I want to be able to do a search in another region or city, using a mobile or desktop device
- As a user who searches for a restaurant I want to be able to set the radius of the area to search in
- As a user who is vegan I want to be able to search for 'vegan only' places
- As a user who is deciding on a restaurant I want to be able to see the price-range, ratings and wether the place is open or not straight in the search results
- As a user who searches locally I also want to be able to see in the search results how far away a restaurant is. I also want to be able to see where I am on the resultsmap
- As a user who found a place I want to be able to request some details, like the address and website of the restaurant. I also want to be able to read some reviews and see some more photos of the restaurant
- As a user who found a place to eat I want to be able to get directions to it on a seperate map
- As a user who is getting directions I want to be able to choose wich method of travelling I prefer before plotting the route
- As a user who is travelling to the restaurant I want to be able to see where I am on the directions map, and update my location every once in a while to see if I am getting close
The mock-ups for this project are in the UXD folder wich you will find in the root of this project.
This webpage will let you make a search for restaurants in a specified radius (max 10km) around you, or in a specific destination of choice. It presents you the rating, pricelevel, address, wether the place is open or not, the last few reviews and pictures of the place. Finally it calculates your route to the selected restaurant, based on your method of transportation, and plots this on a map. On the map you can also see a blue pin with your own location, wich you can update with a button, to see if you are getting close. The main focus will be on mobile devices as its main purpose is to be used on the road, but this web-based app will also work on all desktop devices.
- Geographical search
- Manual search (other cities and regions)
- Select radius for both searches
- Select only open restaurants
- Select vegan only restaurants
- view the results in a list
- view the distance to a restaurant
- view the results on a map
- See your own location within the results on the map
- Click on a place on the map to see the name/picture/raing of the restaurant
- Get detailed information on a selected place
- View address details
- View the opening hours
- view the last five reviews
- view all available photos
- Get directions from your location
- Select vehicle for directions
- Update your location on the directions map
- Switch to full screen mode
- Single column view for mobile devices
- dual or triple column view for desktop devices
- Auto adjust to one column for tablets in portrait mode
- Route description
api-access.js- Functions to access the google places api
events.js- DOM click-events and navigation system
to-screen.js- Push search results and details to their respective pages
from-screen.js- Get DOM values from the screen
process.js- Process results for display on the screen
error.js- Process errors and push to the screen
- VSCode
- Code Editor
- Xampp
- Local deploymemt
- Git bash
- Version control from windows
- Font-Awesome
- Icons
- Bootstrap
- Responsive grid
- Google Fonts
- Fonts (Source code pro/Allerta Stencil)
- Autoprefixer
- CSS prefixes for different browsers
- Online-convert
- Convert jpg image to ico for favicon
- Photoshop CS6
- Image editing
- During development is was announced that the 'open_now' key in the nearby search of the 'google maps places api' is deprecated from November 2019 and will be turned of in November 2020. This only affects the notification in the resultslist, not the 'Open now' option in the settings panel. As it will require a different and more expensive approach: a place detail search for every found restaurant, this will be handled in the next version (octobre 2020). For now a failsafe is implemented: if the key doesn't exist it will simply not show the open or closed sign. You can allways search for restaurants that are open now via the settings.
-
While adjusting my radius for a search I discovered the radius that was displayed as default was different from the standard radius used for searching
- Adjusted the html code to display the correct radius
- Also changed the units to kilometers to be more consistent
-
While letting other people try the page on their mobile phone I found out that people were clicking the map and results list before it was completely loaded
- Implemented a pre-loader animation so users can see that the page is busy loading
-
While getting directions with my location turned off I got the same error message as if I was trying to do a geographical search
- Made the error handling source dependent
-
While testing very remote regions I discovered that sometimes certain keys, like reviews / photos and addresses, were not present in the place object and then the api server would either produce an error or the page would show a broken image or undefined parameter on screen.
- Build in failsafes to first test for availabilty and in that case produce an empty string or a standard image.
-
While testing with manual searches I discovered it did not allways point to the right region when using a query.
- Added the geocoding library to convert city/region names into coordinates so a nearby search can be used. With this method the radius parameter in the settings panel now also works for these kinds of searches
-
While testing 'on location' in Amsterdam I found out it was impossible to see where you are on the results-map.
- Added a blue pin so you can see where you are in the results-map.
-
While testing error messages on wider screens I discovered the lay-out of the page broke when I wanted to switch back to my results-list and the map.
- Let the error section use the details-sections position on the bigger screen modes.
- w3c Markup Validation
- HTML validation: No errors
- w3c CSS Validation
- CSS validation: No errors
- Chrome development tools
- Css / responsive behaviour
- JSHint
- Javascript code: No errors
- Huawei p20 pro
- iphone 7
- iphone 11 pro
- Samsung Galaxy tab Pro (SM-T325)
- Lenovo Ideapad 530s
- Pushed the
geographical search buttonon the front screen- Found restaurants in a 4 kilometer radius around me
- Pushed the
settings iconin the header - Selected 10km on the
radius slider - Pushed the
geographical search-buttonnext to it- Found more restaurants in a wider area
- Selected
veganin the settings menu - Pushed the
geographical search-button- Found less restaurants that met the criteria
- Selected
Greek cuisinein the settings menu - Pushed the
geographical search-button- Found only 3 restaurants
- Selected
Open nowfrom the settings menu - Pushed the
geographical search-button- Got the message that nothing was found and I had to adjust my settings
- Clicked
Find me-eat . . .in the header- Was taken back to the front page and my settings were reset
- Opened the page
- Pushed the
geographical search-buttonon the front screen- Got the message that my location is unknown and I have to make a manual search
- Started typing in the
search bar- An autocomplete window above the search bar showed
- Selected
Bandung City, west java- Found restaurants
- Selected
10kmon the radius slider - Pushed the searchbutton in the footer
- Found more restaurants in a wider area
- Selected
veganin the settings menu - Pushed the
search-buttonin the footer- Found less restaurants that met the criteria
- Selected
Greek cuisinein the settings menu - Pushed the
search-buttonin the footer- Found only 1 restaurants
- Selected
Open nowfrom the settings menu - Pushed the
search-buttonin the footer- Got the message that nothing was found and I had to adjust my settings
- Pushed the
geographical search-buttonon the front screen- Found restaurants in a 4 kilometer radius around me
- Clicked on a restaurant in the list
- A bigger picure folded out
- Clicked on the
i- Taken to the details page
- Got the address, latest review, and opening hours
- Clicked on the
camera- Got 10 pictures of the restaurant
- Clicked on the
restaurant name- Went back to the details page
- Clicked the
reviews button- Got the 5 latest reviews
- Clicked on the
restaurant name- Went back to the details page
- Clicked on the
globe- Was taken to the website of the restaurant in a new tab
- Clicked the direction arrow
- Got directions from my location
- Selected
by bikefrom the settings menu - Clicked the
list iconin the header - Clicked the
direction arrowin the list- Got different directions
- Selected
by carfrom the settings menu - Clicked the
list iconin the header - Clicked the
direction arrowin the list- Got different directions
- Moved to another location (physically)
- Clicked on the
pin buttonon the direction map- Saw the blue pin move to my new location
- Turned of my location
- Did another direction search
- Got a message that my location is unknown and I can't get directions
- Started typing in the
search bar- An autocomplete window above the search bar showed
- Selected
Bandung City, west java- Found restaurants
- Saw that a restaurant with no images of its own had the standard image in the list
- Opened its detail page
- Saw that there was no
globe buttonfor the website
- Saw that there was no
- Clicked on the
camera- Saw no photos
- Clicked to get directions
- Got a message that this is way too far to get something to eat
- Hit the
search buttonin the footer- Got the message that I wasn't understood and had to make a new manual of geographical search
- Entered some random numbers and characters in the
search bar- Got the message that I wasn't understood and had to make a new manual or geographical search
- Made a geographical search
- The list icon and map icon appeared in the header
- Pushed the
map button- Was taken to the map
- Clicked on a found
restaurant- Saw an information window with a picure and the rating of the restaurant
- Clicked the
info-window- Was taken to the details page of that restaurant
- The details icon in the header appeared
- Clicked the
directions button- Was taken to the direction map
- The directions icon in the header appeared
- Clicked
all four buttonsin the header- Cycled through all the sections
- Clicked
Find me eat . . .- Taken to the front page and all buttons in the header dissapeared
- Clicked
Question markin the settings panel - Taken to about section
- Filled out the form
- pushed the
Send message button- Saw the pre loader
- Got a message that my message was send
- Filled out the form
- pushed the
Send message button- Saw the pre loader
- Got a message that my message couldn't ne send
- Mentor sessions
- Friends family and their mobile devices
- All section use the whole screen
- Whenever a section is populated the switch icon will appear in the header
- The screen is divided into 2 columns
- Left column shows the resultslist or the detail section
- Right column shows the results-map or the direction-map
- Error section and about section share with details section
- Whenever a section is populated the switch icon will appear in the header
- The screen is divided into 2 small columns and 1 big one on the right
- The resultslist and detail section are always visible
- Error section and about section share with details section
- The results-map and direction-map are swichable
- Only the map switches are visible, once populated
This project was deployed via github pages from the master branch
- Goto the repository on Github: Github
- Goto
Settings - Select
Github pages - Use the
select sourcedropdown to select themaster branch - Click
Save
The Github pages are now being built.
Click here to view the deployed website
To clone this website locally use the following command in your terminal:
git clone https://github.com/Evert-R/milestone-two.git
To cut ties with this repository:
git remote rm origin
- To run this website live, copy all files and folders to the root directory of your webserver.
- The methods for accessing the google maps api's are based on the api's documentation
- Evert Rot
- Webdesign/coding
- Star-rating image
- Pricing image
- Standard image for restaurant
- pre-loader image
- Inspiration for collapsible list-items
- Inspiration for fullscreen mode
- Google Places library
- Search for places, plot them on a map and retrieve detailed information
- Google Directions
- Finding the route to a restaurant and plot this on a map
- Google Geocoding library
- Convert city/region name to coordinates
- Google geometry library
- Calculate distance between the user and the restaurant
- EmailJS
- Contact Form