An E-commerce web app built with ReactJs and GraphQL https://ridwan-ecommerce.netlify.app/
Fetch data from the GraphQL endpoint and provide an interface to view and interact with this data. You can find the endpoint here, along with instructions on how to launch it.
Note: was built and rendered in Incognito Mode
- The solution should get implemented as per design, which is available at this link.
- Written with React
- Components should be written in Class components.
- Create-react-app to scaffold the application.
- Fork or Clone the repository, then set it up:
$ cd react-code-challenge
$ yarn install
- Go to this link to clone the
GraphQL
backend API - Follow the instructions on the page to start terminal
- Open the project folder and run
yarn start
.
├── App.js
├── assets
│ ├── fonts
│ └── svgs
├── components
│ ├── 404
│ ├── add-to-cart
│ ├── cart-dropdown
│ ├── cart-icon
│ ├── cart-list
│ ├── collection-item
│ ├── currency-dropdown
│ ├── error
│ ├── header
│ ├── loading
│ └── modal
├── graphql
│ ├── cart.utils.js
│ ├── initial-data.js
│ ├── mutations.js
│ ├── queries.js
│ └── resolvers.js
├── index.css
├── index.js
├── navigation
│ └── index.js
├── pages
│ ├── cart-page
│ ├── collection
│ └── details
├── reportWebVitals.js
├── setupTests.js
├── styles.js
└── utils
└── helpers.js
22 directories, 13 files
See some more specific information on the main requirements below. Remember - if something is in the design, but is not explicitly described here or above, it should be implemented anyways.
- Ability to add/remove products and change their amounts in cart - on the cart page itself, PLP and PDP should be provided.
- For products that have various options (attributes) - the options should be selected.
- The selected options of added to cart products should be visible in cart overlay and in cart page.
- 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 color itself, not "Blue" or "0000FF")
- Filtering products by category name for all of the categories from BE
- The descriptions provided in HTML format should be parsed and presented as HTML, not as plain text
- Ability to change the currency of the store to one of the available currencies
apollo-boost
- makes Apollo-client configuration easy and also to manage global state in order to minimize 3rd party libraries such asredux
.apollo-cache-persist
- used to persist global state.react-router-dom
- used for routing from one screen to another.styled-components
- used for CSS styling.