At Daye, we customise the types and amounts of tampons given to each customer to make sure what they are getting is right for them.
We have an API that returns a list of our packages and what’s in them. We would like you to read the api and display it in a readable way. In addition it would be great if you could add in some sort of filtering mechanic based on some of the differences between the packages. As I mentioned great user interfaces are really important to us so keep this in mind!
The api is a bit “buggy” which causes some of the tampon lists to be returned as a xml string rather than JSON so be careful of this, there are some spelling mistakes in the variable names!
The api can be found here: https://front-end-test-bvhzjr6b6a-uc.a.run.app
Please don’t kill yourself over this, think of it as a chance to show off of what you can do and how you would go about structuring a project. The project should be in react but feel free to use whatever packages or setup you want!
This project was bootstrapped with Create React App.
- I wanted to clean the data up before it went to the component, so I decided to use Redux as the store, and have a single clean place for the data.
- I used the Ducks pattern, keeping all actions etc in the same module file. https://github.com/erikras/ducks-modular-redux
- I used Material UI for the first time, for quick prototyping. As such there's quite a lot of JSX in some files, but it allowed me to get on with developing the harder parts more quickly. https://material-ui.com/
- I reused propType definitions for the first time, it seems to have worked alright.
- The filtering is fairly basic, it just shows how it could work using Reselect.
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!
See the section about deployment for more information.