This project was bootstrapped with Create React App.
This section was written after the 4 hours coding challenge. The sections after were generated by create react app
Sadly I did not manage to finish the challenge. During development I had not had any software design issues, but three little programming mistakes, which took some time to figure out. I guess I could have finished the challenge otherwise. Two requirements are missing:
- Alphabetic Sorting
- Pagination
They are easlily accomplished by a little modification in the ItemList component.
First, the result of the API calls should be enriched with a type propertie (eg.agent, shop or property) and then moved into the dataReducer for a better separation and protection of unwanted mutation of the original data. In a real application this data could be protected by Imutable.js or a similar libary.
Second, the renderItems object of our ItemList component would aggregate all three data types in a single object list, which can be easily sorted by an alphabetic order.
Third, the sorting button, the needed actions and reducer are created for ascending and descending order. The sorting algorithm would adjust accordinly. Right before the sorting takes place, the search query and the data type filter are applied.
Fourth, the pagination is implemented. It could use another reducer, which stores the current page. Then we would use this in our ItemList component, to extract only the required sublist of max. ten items. The ItemList component could fire an action to set the maximum number of pages to the same reducer, which would then result in a correct number of pages, after filtering has taken place.
Now the application works as required.
But I prefere these additional steps:
First, time for some tests.
Why no TDD? For this type of challenge I found it too time consuming. But from a software design pespective this task would be very suitable for TDD, since the goal is very clear, which is a important requirement for TDD. If you are not 100% sure what you are going to have in the finished application / subpart, it's hard to write tests for it. It happens often enough in real life projects. Eg. changed requirements form project management or even a better approach how to solve a certain problem which would make the previous written tests obsolete.
Therefor I prefere testing a finished peace of code.
Second, adding a small routing mechanism in order to store the filters/settings in the url.
Third, code review by another developer. One of the most important tools to ensure coding styles and quality.
Last I like to mention a few thinks I prefere to use in projects, but are not part of the challenge / were to time consuming to do:
- editor config file, to ensure code styling & uniform workflows
- git hooks, e.g. for testing the code before commiting / pushing
- implementing a git strategy project wide, rebase vs. merge (I prefere rebase & squash commits for a clean and readable master branch)
- git tool for unified messages, like commitizen
- test reports
- I am a typescript fan, therefor I would recommend using it. I didn't choose typescript for this project, since typescript makes coding a little bit slower, especially in the beginning of a project. Later on, it can save a lot of time. (and there are more benefits).
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.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify