- Contents
- Overview
- Technologies Used
- Functionality requirements
- Required
- Prohibited
- Details
- Credits
- Acknowledgments
This project serves as an Entry React Developer Test. It is a React shopping app which provides the user with the ability to explore products and add them to a cart with provided currencies.
The data is fetched from the GraphQL endpoint and provides an interface to view and interact with this data.
The project is built following design and functionality principles from this link.
To run this project the API endpoint is required. For this project the provided endpoint is here. The project uses localhost to fetch data - the backend is not deployed to any PAS.
The outcome is not pixel-perfect to the provided design, but there are no noticeable mismatches both in terms of design and functionality (in the developer's opinion 😉).
Functionality in scale, as in a real-life project:
Q: What will happen if you have more than 4 products?
A: The grid layout used for styling splits products into columns on set parameters. Pagination might be a better use for big amount of products, but it was not required for this assignment.
-
- ReactJS: was used for building a user interface
- React Router: was used for handling different URLs rendering different pages. React Router allows for rendering pages inside Virtual DOM stopping the page from refreshing. This enhances UX.
- styled-components: was used to inject CSS styling directly to component.
- No hunt across different files to find the styling affecting your component.
- Styled components are independent of each other.
- Remove unused styles, even if they're declared in the code.
- Styled components generate unique class names for your styles.
-
- Apollo: the GraphQL client used to set up API for React project.
- Git: the version control system used to manage the code.
- GitHub: used to host the website's source code.
- VSCode: the IDE used to develop the website.
- Grammarly: was used to check grammar and typo errors.
- html-react-parser: the parser converts an HTML string to one or more React elements. Was used to parse HTML elements as React elements in ProductDescriptionPage for product's description data fetched from API.
- eslint: ESLint statically analyzes code to quickly find problems. Was used to check any linting errors and warning in the code.
-
PLP - product listing page, a.k.a. category page ✔️
-
PDP - product description page, a.k.a. product page ✔️
-
Cart page ✔️
-
Cart overlay (minicart) ✔️
- React - the project is built using React.js ✔️
- Class components - the project is built using Class Components and no functional elements are utilised (hooks etc.) ✔️
- Create-react-app to scaffold the application - the project was scaffolded using the
npx create-react im-super-devcommand ✔️
- UI libraries (e.g. Tailwind, Material UI, Ant Design) - no UI library was used to style this app, all styling is custom using styled-components ✔️
- Functional components - the project is built using Class Components and no functional elements are utilised (hooks etc.) ✔️
- Ability to add/remove products and change their amounts in the cart - on the cart page itself, PLP and PDP should be provided:
- user can add products from PLP by clicking on the green cart icon (if the product is in stock) ✔️
- user can add product on PDP by clicking ADD TO CART button (if in stock) ✔️
- user can increase/decrease product amount in the cart by clicking the + and - buttons in the minicart and on the Cart Page ✔️
- For products that have various options (attributes) - the options should be selected:
- if the product has attributes it can be selected from PDP, but it is not allowed to change attributes from minicart and Cart Page ✔️
- if a user adds a product by using the "quick shop" button on the PLP or by clicking the ADD TO CART button on the PDP without selecting attributes, the default attribute is used as the first from the list provided by API ✔️
- The selected options of adding to cart products should be visible in the cart overlay and on the cart page:
- selected options of adding to cart products are visible in the cart overlay and cart page for all products ✔️
- If an attribute is a swatch attribute (type = swatch), a representation of the value should be rendered on PDP and PLP, rather than text description (e.g. the colour itself, not "Blue" or "0000FF"):
- if the attribute is of "swatch" type, then the value is used to generate the respective attribute (i.e colours are displayed as coloured boxes, not text) ✔️
- Filtering products by category name for all of the categories from BE:
- the query created in the
queries.jsfor fetching products allows to pass a pathname variable as a parameter and then be used to input required categories for products to be displayed ✔️
- the query created in the
- The descriptions provided in HTML format should be parsed and presented as HTML, not as plain text:
- html-react-parser was used to parse HTML fetched from API into JSX ✔️
- Ability to change the currency of the store to one of the available currencies:
- users can change the currency for the shop from the currency dropdown list in the navigation bar ✔️
Note: This website is FAIRLY responsive. It was not required to adjust the design for different screen sizes, yet I still changed a layout for smaller screens - up to approx. 600px screen width.
- The design is based on the scandiweb design.
- Spinning wheel for the data loading stage comes from em-design medium.
- All fonts come from Google Fonts.
- Scandiweb Recruitment Team - for giving me a chance to improve my skills by doing this task - regardless of the outcome it was a great experience for self-development. Thank you!
- As always big thanks to Stack Overflow community for the best bug-solving space ever created!
- Fellow juniors for submitting and replying to comments in the Figma design provided for this task - most of the answers I found over there so big thank you guys - we are in this together 💪
