2. Front end

Front end

This project is an example to help you structure your projects using production-ready technologies. 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

• Restaurant
• 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 to render a restaurant by ID.

Documentation link https://strapi.io/documentation/guides/graphql.html#configurations

Filters

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

Documentation link https://strapi.io/documentation/guides/filters.html

Specific customization

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

Documentation link https://strapi.io/documentation/guides/graphql.html#aggregation-grouping

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

Setup

cd client```` npm install npm start```

And visit http://localhost:3000/.

How to test

npm test

How to build for deployment

npm build

How to generate a new component

npm run generate