Junior React Scandiweb Assignment

Frontend layer of an online store created as part of a recruitment assignment for the position of Junior React Developer at Scandiweb. The web application allows users to filter results according to a selected category, add items to a shopping cart, and specify a selected currency in which product prices are displayed.

Overview

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.

The outcome is not pixel-perfect to the provided design, but there are no noticeable mismatches both in terms of design and functionality

Demo

Click to check live

scandiweb.app.demo.mp4

FAQ

• Is it responsive?

  Even though there was no requirement to implement responsiveness, it was decided to adapt the interfaces to smaller viewports

• Will items added to the cart be visible after the page reloads?

  Yes, both items in the cart and the chosen currency will stay the same after reloading. It's achieved by storing cart and currency data in local storage.

• Are there any hardcoded links?

  The only hardcoded link is link responsible for displaying cart page

• Are there any functionalities that are implemented but were not specified in the requirements?

  Yes, when I was testing the app I found some problems I decided to solve to enhance user experience.

  • Custom 404 page
  • Showing relevant information about current cart state
  • Changing add to cart button appearance depending on if the given item is already in the cart
  • Animation when a user adds an item to the cart from the category page to hint about a successful result

Screenshots

Lessons Learned

First of all, I would like to thank you very much for the opportunity to do this recruitment task. Doing this assignment has strengthened my skills and brought me closer to what it looks like to create real, commercial solutions based on provided, clearly defined requirements. I learned how to use GraphQL, how to create contexts to help manage more complex application state, and how to create as accurate as possible projects with Figma

Technologies Used

• Languages

  • JS
  • HTML
  • CSS
  • GraphQl

• Front-End Libraries

  • ReactJS
  • React Router
  • styled components

• Other tools

  • Apollo
  • html-react-parser

Run Locally

#### to run this project on your machine, first, you have to install and host graphql endpoint as localhost

graphql endpoint is now hosted on the server so you dont have to setup backend locally, now you can start right off from installing the client

Clone the project

  git clone https://github.com/BlazejBatko/scandiweb-junior-react-task.git

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm start