The application is created on React with using TypeScript. I used Apollo Client, as GraphQL client, due to the wide settings, Reactive variables (modifying a reactive variable triggers an update of every active query that depends on that variable) and more widespread. Therefore, this makes it possible to create the application without the other state manager like Redux. So using Apollo Client gives opportunity For typing I generated types based on a GraphQL schema with help of GraphQL-code-generator. It's styled using Styled-Components because of automatic critical CSS, easier deletion of CSS and simple dynamic styling.
Data fetches from the GraphQL endpoint and to provide an interface to view and interact with this data. You can find the endpoint here, along with instructions on how to launch it.
Click and watch
- Only React;
- Class components;
- Create-react-app to scaffold the application.
- State management libraries (e.g. Redux, Recoil);
- CSS-in-JS approach allowers (e.g. styled-components).
- UI libraries (e.g. Tailwind, Material UI, Ant Design);
- Functional components.
Clone the repository with the GraphQL endpoint from the link above and follow the steps there.
Clone this repository and after the preparing run npm install and npm start.
It was my first meeting with GraphQL and Apollo Client. To complete this assignment I read various documentation, articles and best practiсes. I haven't only met with new tools, but also I've improved my work with React and TypeScript. The most difficult was running of global state without a third-party state manager like Redux because I wanted to use only Apollo Client. I'm glad I took part in this challenge because I enjoyed the time doing it. And hopefully I showed my skill level well.
I wanted to use experimental technology as typescript decorators to send a component necessary data through props personally. I couldn't figure out how to implement them to a component with typing but I think it could improve and simplify my code.
- saved a current currency to the LocalStorage.
- added a category which is currently opened to the path and saved a current category in the LocalStorage;
- changed styles for images without cutting.
- for out-of-stock products, attributes are not selectable;
- added the ability to add products into the cart as many times as the user wants. Removed the change of ‘add to cart button' to 'go to cart’ after the first addition;
- fixed accessibility of all attributes.
- added Cart Overlay closing on route change;
- added rounding of all numbers to two decimal places;
- removed the ability to change attributes in the Cart and Cart Overlay;
- changed styles for attributes.