https://github.com/christianjtr/basic-react-json-graphql-tryout
This product page showcases data fetched dynamically using a mocked GraphQL server. Experience seamless data loading and interactive elements
https://github.com/christianjtr/basic-react-json-graphql-tryout
assessment css cssmodules-react graphql nextjs reactjs typescript
Last synced: 16 days ago
JSON representation
This product page showcases data fetched dynamically using a mocked GraphQL server. Experience seamless data loading and interactive elements
- Host: GitHub
- URL: https://github.com/christianjtr/basic-react-json-graphql-tryout
- Owner: christianjtr
- Created: 2025-04-03T10:36:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T15:17:07.000Z (about 1 year ago)
- Last Synced: 2026-01-03T19:09:23.536Z (4 months ago)
- Topics: assessment, css, cssmodules-react, graphql, nextjs, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 4.83 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](#001)
2. [Tech Stack](#002)
3. [Installation and running the project](#003)
4. [Samples](#004)
5. [Dev notes](#005)
6. [Next Steps](#006)
### 🎯 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](https://react.dev/)
- [NextJS](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Yarn](https://classic.yarnpkg.com/en/)
- **GraphQL ecosystem**
- [json-graphql-server](https://www.npmjs.com/package/json-graphql-server) (Server)
- [graphql-request](https://www.npmjs.com/package/graphql-request) (Client)
- **Tests**
- [Jest](https://jestjs.io/)
### Installation and running the project
The project requires:
- [NodeJS](https://nodejs.org/)
**Clone the repository:**
```shell
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_.
```shell
# 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.