Our fearless CEO Roberto is not only a pizzaiolo, he's also a big fan of modern javascript and APIs. When he's not spending time proving dough, he's crafting a GraphQL backend to handle all the update madness that his vendors send him.

Build a sortable, nestable, groupable table view in React using the GraphQL API. The image below is for reference, please feel free to take creative liberties with the implementation on both design and product. Figma file for additional reference.

Group by: To help Roberto organize the entry updates, please add a way to group the entry rows by ingredient. The image shows a dropdown, but you can implement with a simple button.

View all: For the nested entries, only show a few (10) then have a button to show the rest of the entries. Product implementation is up to you

Bonus: Add one little special feature that you personally think is important in developing features (examples: updated design, animations, performance, graphql refactor, testing, Typescript, etc).

Once you're finished please send an email to the hiring manager and recruiter you've been communicating with.

This is the current verison of the query, but feel free to change it up using the generator file (generate.js) to a format you think works better. You can play with the GraphQL API at http://localhost:3000/api/graphql

{
  entries {
    date
    ingredient
    count
    quality
    notes
    verify
    vendor {
      name
      ingredients
      source {
        api
        frequency
      }
    }
  }
}

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!