Coder Social home page Coder Social logo

project-food-hippos's Introduction

Build a Food Review website 🌮🥑

During this week we will meet-up in Sthlm – YAY! During those days we will practice our JavaScript and API skills a bit more. We will also practice working as a real team using GitHub. You will experience, first-hand, the issues and struggles that can occur when working together with code.

During the session your team will be challenged to build a website that lists restaurants, reviews and information based on location – YUM 😋.

Your page will be built based on a random combination of cuisine, city, and design provided by the Technigo team on site. All data should be fetched from the Zomato API.

Your team's combination: Seafood restaurants in Lisbon, Portugal

Your team has been tasked with using the Zomato API to list Seafood restaurants in Lisbon, Portugal in the style of the Wolt site:

Wolt

How to complete this task

We have a very limited time-frame for this project, so we want you to read about the Zomato API and experiment making requests to the /search endpoint before we meet up. This way, when you all meet in Stockholm and get assigned your cuisine, location and design, you'll be ready to get going quickly.

The following steps should be done during the meet-up:

Step 1

Each member of your team should clone (NOT FORK!) the correct repo for your team.

Step 2

Togeteher as a mob, do the foundations of the project together. Make sure that you have fetched from the API and presented all data on the page in a suitable HTML structure which you all agree on. You can also use one person's code from the practices as long as everyone understands the code. No styling is needed at this point.

You should now have data from at least 10 restaurants from the /search endpoint on your page, and include the following data:

  • The restaurant name
  • The average cost for a dinner there
  • The address of the restaurant
  • An image (you choose which image you'd like to display from the response)
  • Either the aggregate_rating or the rating_text for that restaurant

Step 3

Divide into pairs or groups of three and choose freely from the selection of features below. The groups will work separatley on features in their own "feature branch" and we will help you to merge this into the master branch before the demo. Of course; have communication within the group and feel free to merge and commit code when you feel that the time is right. Help each-other and share knowledge in the team is always encouraged.

Features

Below are suggestions for features for your site. You're free to choose the ones which are interesting to your team to implement:

🎨Implement the randomly given design.

You don't need to implement all sections (if there's any that is not relevant to your site) but try and copy the page look and feel and design details. Feel free to make text, logo and other things your own – it's a tribute, not an exact copy.

💰Filter on price range

Add so that your users can filter restaurants based on different price ranges.

🚀Sort on price

Add so that your users can sort the resturants on price, cheap to expensive using the average_cost_for_two parameter.

💬List reviews

List the 3 latest reviews for each restaurant.

💬Filter on delivery options

Make it so your users can choose to only show resturants which have delivery (has_online_delivery) or can be booked in advance (has_table_booking).

🖼Filter on reviews

Make it so your users can choose to only show restaurants with good ratings.

📱Make the page responsive

To work on mobile, desktop or tablet.

Feel free to challenge yourself and team to come up with more or other features! This is your group project – you decide.

Work as a team!

Good luck!

project-food-hippos's People

Contributors

jenniedalgren avatar annatakman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.