2. Front end

Front end

The Foodadvisor front-end is an example to help you structure your projects with a front-end Stack connected to Strapi.

Live demo : https://foodadvisor.strapi.io/

Information

• React - (UI Framework)
• React Router - (Routing)
• GraphQL - (Web Data API)
• Apollo - (GraphQL Client)
• Styled Components - (ES6/CSS style)
• ESLint - (JS Best Practices/Code Highlighting)
• Jest - (Tests)

Features

Views

• Restaurants
• Restaurant
• About us

Rendering views with GraphQL

You can see all GraphQL queries in /src/queries/.

In the /src/queries/restaurant.js you will see how to make a simple GET request in order to render a restaurant by ID.

📚GraphQL schema configuration documentation here.

Filters

In the /src/queries/restaurants.js you will see how to make a GET request using filter params on restaurants.

📚Filters documentation here.

Specific customization

To add custom behaviors as connections, you can update your API schema.

📚GraphQL Aggregation grouping documentation here.

Example: Retrieving the reviews average of a restaurant

{
  restaurant(id: $id) {
    id
    name
    reviews {
      id
      note
      content
      created_at
      author {
        username
        picture {
          url
        }
      }
    }
  }
  reviewsConnection(where: { restaurant: $id }) {
    aggregate {
      count
    }
  }
}

How to start

You can find out how to setup and run FoodAdvisor client in the Readme