Pleo's UI engineer coding challenge.
What you see here is a simple ReactJS app composed of four sections.
The sections are lacking in the areas of semantics, usability, reusability and design aptitude.
One of the components in the solution is a dropdown selector. This component features two different themes. When a theme is selected it should trigger a visual change in the UI that relates to the name of the theme.
Abstract parts of the solution into individual components.
Write an elegant solution to handle theming.
Increase the overall quality of the components as you see fit.
Update the visual aspects of the UI in a meaningful way.
Add links to your favourite resources in the footer.
Think scalability and flexilibity into the frontend architecture.
Everything including design, layout, code structure, naming, semantics, etc. can be challenged. *Remember to document you changes, as we'll be very interested in hearing your motives.
This project was bootstrapped with Create React App with the Typescript preset.
You'll need NodeJS & yarn v1 to run this project. Clone this repository and run yarn install to install the dependencies.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!