https://github.com/mapledevjs/mosaic
Test Assesment
https://github.com/mapledevjs/mosaic
html5 react redux redux-logic scss typescript webpack
Last synced: 8 days ago
JSON representation
Test Assesment
- Host: GitHub
- URL: https://github.com/mapledevjs/mosaic
- Owner: mapleDevJS
- Created: 2021-08-05T20:13:56.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-19T15:00:55.000Z (5 months ago)
- Last Synced: 2025-01-20T16:23:01.927Z (4 months ago)
- Topics: html5, react, redux, redux-logic, scss, typescript, webpack
- Language: TypeScript
- Homepage: https://mosaic-robots.netlify.app
- Size: 1.4 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/mosaic-robots/deploys)
Mosaic's Test Assessment
Table of Contents
## About The Project
The goal of this assessment is to replicate the frontend application as close as
possible. You are allowed to use any frontend framework (React.js, Vue.js, etc.) or use
plain Javascript, HTML, and CSS.
The first step of the assignment is to fetch data from this public JSON API, and present
the information on the screen.
The second step of the assignment is to style the web page.
Next, you are going to add a text input, where a user can filter the list of students
by their name (including full name!).
In the fourth step, you are going to make each student have an expandable list view, so that all
of their test scores may be viewed.
Finally, you will add a text input field to add tags for a specific student. Here is what it
looks like (adding a tag called “new tag”):
You will then add another search bar to search for students based on tags. A strong
submission will have this functionality:
If a name is entered in the search by name input, and a tag is entered in the
search by tag input, results that include both the name and tag should be shown.
### Built With
* [React](https://reactjs.org/)
* [Redux](https://redux.js.org/)
* [redux-logic](https://github.com/jeffbski/redux-logic)
* [Typescript](https://www.typescriptlang.org/)
* [WebPack 5](https://webpack.js.org/)
## Getting Started
### Prerequisites
* npm
```sh
npm install npm@latest -g
```
* node.js
```sh
npm install [email protected]
```
* yarn
```sh
npm install yarn -g
```
### Installation
1. Install NPM packages
```sh
yarn install
```
2. Install Husky
```sh
yarn run prepare
```
3. Run the project
```sh
yarn run start
```
4. Build the project
```sh
yarn run build
```
## Contact
Alexey Ivanov - [email protected]
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/alexey-ivanov-fcsmjs