https://github.com/mohammed-taysser/scandiweb-react-task
This task will put you face-to-face to some common tasks in the world of React development and possibly will get you acknowledged with a bit of new technologies.
https://github.com/mohammed-taysser/scandiweb-react-task
apollo-client create-react-app graphql html-react-parser react react-redux react-router-dom react-router-dom-v6 reactjs redux redux-toolkit sass
Last synced: 10 months ago
JSON representation
This task will put you face-to-face to some common tasks in the world of React development and possibly will get you acknowledged with a bit of new technologies.
- Host: GitHub
- URL: https://github.com/mohammed-taysser/scandiweb-react-task
- Owner: Mohammed-Taysser
- Created: 2022-08-12T16:19:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-25T11:44:25.000Z (about 3 years ago)
- Last Synced: 2025-02-15T11:41:07.044Z (11 months ago)
- Topics: apollo-client, create-react-app, graphql, html-react-parser, react, react-redux, react-router-dom, react-router-dom-v6, reactjs, redux, redux-toolkit, sass
- Language: JavaScript
- Homepage: https://scandiweb-task-react.vercel.app/
- Size: 511 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# [Getting Started Scandiweb Task][live-demo] ðŸŒ
## Overview 👀
This task will put you face-to-face to some common tasks in the world of React development and possibly will get you acknowledged with a bit of new technologies.
You Are Expected To Fetch Data From The Graphql Endpoint And To Provide An Interface To View And Interact With This Data. You Can Find The Endpoint [here](https://github.com/scandiweb/junior-react-endpoint), Along With Instructions On How To Launch It.
The Solution Should Be Implemented As Per Design, Which Is Available At This [link](https://www.figma.com/file/MSyCAqVy1UgNap0pvqH6H3/Junior-Frontend-Test-Designs-(Public)?node-id=150%3A1168).
For Live Demo: [][live-demo]
## Quick Start 🚀
### Download The Files Or Clone It With Git Version Control
```shell
git clone https://github.com/Mohammed-Taysser/scandiweb-react-task.git
```
### Inside Project Directory Install Dependencies By
```shell
npm install
# OR
yarn
```
### Runs The App In The Development Mode
Open [`http://localhost:3000`](http://localhost:3000) to view it in your browser.
```shell
npm start
# OR
yarn start
```
## Pages 📃
- 404 - page not found
- PLP - product listing page, a.k.a. category page
- PDP - product description page, a.k.a. product page
- Cart & Cart overlay (Mini Cart)
## Features 💬
- No UI libraries (e.g. Tailwind, Material UI, Ant Design).
- Build Using Class Base Component.
- Create-react-app To Scaffold The Application.
- Using localStorage To Save Data.
- Use Redux Store.
- JavaScript code linting is done using `ESLint` & `JSconfig`.
- Has `.editorconfig` which helps developers define and maintain consistent coding styles between different editors and IDEs.
- Use `.Env` To Store Fixed Variable Like Graphql Endpoint.
- Empower With Sass Preprocessor.
- Use Graphql As Api End Point.
## Used Tools 🧰
- [`Create React App`](https://github.com/facebook/create-react-app)
- [`React.js`](https://reactjs.org/)
- [`React-Router-Dom`](https://reactrouter.com/docs/en/v6/getting-started/tutorial)
- [`React-Redux`](https://react-redux.js.org/)
- [`Redux-Toolkit`](https://redux-toolkit.js.org/)
- [`Sass`](https://sass-lang.com/)
- [`Apollo Graphql`](https://www.apollographql.com/docs/)
- [`Graphql`](https://graphql.org/)
- [`Html-React-Parser`](https://www.npmjs.com/package/html-react-parser)
## Resources 📚
- [`React Developer test - FAQ/frequently asked questions`](https://www.notion.so/00e72f0844a344dda28e19855d2fc34a?v=6f8d862cadc142cd9cb459fe721699ba)
- [`Entry React developer TEST`](https://www.notion.so/Entry-React-developer-TEST-39f601f8aa3f48ac88c4a8fefda304c1)
- [`Junior-Frontend-Test-Designs`](https://www.figma.com/file/MSyCAqVy1UgNap0pvqH6H3/Junior-Frontend-Test-Designs-(Public)?node-id=150%3A1168)
[live-demo]: https://scandiweb-task-react.vercel.app/