Foodify

Live GitHub Pages Link

GitHub repository Link

Summary

Foodify is still fairly new restaraunt, located in Phoenix Park, Dublin. Purpose of this website is to attract new customers by showing some of the meals in our gallery, menus and presenting potential customer with information about restaurant and team working in it.

UX

Foodify opened in late 2018 and hopes to expand in future on few more locations. It is important to visually express what they are doing to attract people to visit them and try the food for themselves.

To help this website stand out from other restaraunts it needs to ensure it

• Is easy to use.
• Simple and appealing.
• Straight to the point, does not overload visitor with too much text on it

Client stories

"As a visitor to the site I want to be met with clear information to allow me to easy navigate on it"

"As a visitor I want to be able easily find restaraunt menus"

"As a visitor I want to be able easily find contact information"

Wireframe Mockups:

During the design process sitting with the client we drew up wireframes using Balsamiq

Desktop

Tablet

Mobile

Features

About Us

A brief introduction to the restaurant, it’s location, staff and customer reviews

Menus

Just a quick insight on what is on our menus and ingredients used

Gallery

A showcase on some meals we do

Reservations

A contact us form so the customers can contact us regarding possible reservations or if any questions should be asked

Future Implementation

Once restaurant is added on Google Maps, add a map on website

Add ResDiary for easier booking options

Expand Gallery section to show whole restaraunt

Technologies Used:

• HTML & CSS programming languages
• Bootstrap - to easily adapt the website to be responsive for all users
• Google Fonts - Lato & Exo Styles
• Font Awesome - Social Media icons
• jQuery - Javascript needed for navbar
• Popper.js - Javascript needed for navbar
• GitHub - to host the repositories for this project and the live website preview

Testing

Testing was carried out using Google Chrome developer tools to insure website is responsive. Tested site in Firefox, Edge, Safari and IE

Tested using Samsung Galaxy Edge 7, Samsung Galaxy Note 8, Ipad and Huawei P20 Lite

Other tools used are:

• W3C Markup Validation - to validate HTML
• W3C CSS Validation - to validate CSS
• HTML Formatter - to format HTML properly
• CSS Formatter - to format CSS properly
• Unicorn Revealer to check if any overflowing issues

Issues encountered

When navbar was set to "sticky" big margin appeared on top of the site

- Issue was resolved by removing line-height property previously set up for navbar elements

Complete Menus section was not aligning properly due while checking responsiveness

- Issue resolved by moving one collumn down

Button "Book Now" was not centered in IE

- Issue resolved by adding d-block class in row where button was

Existing issues

Scroll smooth is not supported in IE and Safari

Deployment

This website was deployed using GitHub Pages following steps below:

1. From the menu items near the top of the page, select Settings.
2. Scroll down to the GitHub Pages section.
3. Under Source click the drop-down menu labelled None and select Master Branch
4. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
5. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

Run this project locally

Clone this project from GitHub:

1. Under the repository name, click "Clone or download".
2. In the Clone with HTTPs section, copy the clone URL for the repository.
3. In your local IDE open Git Bash.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type git clone, and then paste the URL you copied in Step 3.
6. Press Enter. Your local clone will be created.

Click here for further reading and troubleshooting on cloning a repository from GitHub.

Credits

Content

• Customer reviews were taken randomly from TripAdvisor
• Menus were taken from Fire Steakhous & Bar and Sole Seafood & Grill
• Other helpful resources were w3schools.com, CSS Gradient, Stack Overflow and Color Tool

Media

• The photos used in this site were obtained from Pexels

Acknowledgements

I would like to thank my mentor, Akshat Garg for his support, insights and advices.

I would also like to thank Slack community for help provided when needed.

Disclaimer

Please note that content on this website is educational purpose only