Product page consuming data from a mocked GraphQL server

This tryout aims to create a basic product page by fetching data from a mocked GraphQL server.

Note

• ❤️ Feel free to add any improvements or suggestions you consider.

1. Goals
2. Tech Stack
3. Installation and running the project
4. Samples
5. Dev notes
6. Next Steps

🎯 Goals

• Meet the design given (File: design.jpg).
• Consume data from GraphQL's server (Get product's data).
• Use TypeScript.
• Responsive UI.
• Features
  • Select quantity of the products.
  • Add products to a shopping cart.

Tech Stack

This conceptual test has been developed using the following technologies:

• Front-end
  • React
  • NextJS
  • TypeScript
  • Yarn
• GraphQL ecosystem
  • json-graphql-server (Server)
  • graphql-request (Client)
• Tests
  • Jest

Installation and running the project

The project requires:

• NodeJS

Clone the repository:

git clone https://github.com/christianjtr/basic-react-json-graphql-tryout.git

Scripts:

Before executing these scripts, you must run yarn install in the directory you just downloaded/cloned the codebase. Other scripts are in package.json file. Also, you may consult the CHALLENGE.md file.

# Start the development environment
> yarn dev

# Run unit tests
> yarn test

Samples

1. Product page

Dev notes

Tasks done before starting the project:

• Fixed yarn.lock file which was corrupted.
  • Deleting it and running yarn install --check-files.
• Added missing types yarn add --dev @types/react.
• Adapted package.json file.
• Researching a lightweight graphQL client.
• Checked mocked data integrity.
• Moved routes to an appropiate convention (A redirection was put in place)
  • Previous: /product
  • Current: /products/{ID}
• Figma usage to somehow determine size of UI elements and spacing.

Next steps

• Upgrade project dependencies
  • Bump React version.
  • Bump NextJS version.
  • Other relevant libraries like testing ones.
• As the project gets larger, we should investigate a robust state management solution.
  • Redux Toolkit.
  • Zustand.
  • Others.
• Pages
  • Not found page.
  • Loading page or component.