This repository contains a code which you are supposed to work with. Please create a fork of this repo. As a result of your task please send us back a link to your github repository. While working with the code, please commit all changes to your repository, for us to check your progress.
Application is a simulation of a web application which displays data got from REST API. Within this task REST API will be mocked. Please use prepared services to retrieve data.
Your task is to adjust existing template of the application and apply all missing components and styles, that will match included designs (within designs
directory). This task has 2 parts:
- required - part that has to be done
- optional - if you have more time, it would be nice to see some parts done too
- Dashboard page has to look exactly the same as design
- Each Card component should have a button, which will redirect user to appropriate page, eg.
Sports
should redirect to/sports
,Scheduling
should redirect to/scheduling
(even if it will show anPage not found 404
)
- Each Card component should have a button, which will redirect user to appropriate page, eg.
- Top bar should look exactly the same
- Switch and Avatar can be only a plain components without any logic
- Left navigation should look exactly the same
- Page
Dashboard
should redirect to/
- Page
Sports
should redirect to/sports
- Other pages should redirect to according pages eg.
Scheduling
should redirect to/scheduling
. Content of the page can bePage not found 404
, but url within browser should point to correct path
- Page
- Sports page contains:
- Main title
- Teaser text
- Static table filled with data
- Icon does not have to do anything
- All pages except
dashboard
andsports
should return a text within main page content, which will say:This is [PAGE_NAME] page.
, where[PAGE_NAME]
should be replaced with according name, eg. for scheduling it should say:This is scheduling page.
- Switching the theme mode from light to dark and other way round - adapt this logic for a
Switch
visible within Top Bar near user avatar. - Sports page
- Click on the icon should open container on the right side and fill it with details of the sport got from the service
- Click on button
Add sport
should open the same looking container filled with 2 text fields and 2 buttons:- textfield: name - user can enter any text value
- textfield: location - user can enter any text value
- button:
Save
- when clicked, there should be shownalert
with textSubmitting sport: [sport.name] with location: [sport.location]
and close the container - button:
Cancel
- should close container and do not showalert
- The layout of this form is up to you - should be clean and usable
For styling the application there is used a library Material UI.
Please use as many components that fits design as possible.
Please do not use .css
/.scss
/.less
or any other preprocessor.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.