This project was bootstrapped with Create React App.
Create the following file secrets.js
at project's root:
export const TOKEN = 'yourtoken'
export const ACCOUNT_ID = 'account_id'
export const ALERT_ID = 'alert_id'
Then replace placeholders.
To avoid CORS issues when requesting Mention API, please add the following line to your /etc/hosts
:
127.0.1.1 web.test.mention.com
Then, start the app with yarn start
Runs the app in development mode and should open http://web.test.mention.com:3000/.
In case it doesn't properly handle opening the app, go to http://web.test.mention.com: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.
Once app started, click on button Load Mentions!
to fetch mentions from the API endpoint provided
I followed a github flow with a master branch and feature branches related to hypothetical issues to develop step by step.
I could have kept a single feature branch with commits, as I really implemented a single feature - which is what I'm used to at work - but I preferred following my thought process here:
- Handle CORS with CRA config, rework README basics
- Integrate linter, because I had forgotten...
- Handle API call to fetch mentions
- Handle listing of mentions and text highlighting
- Add a conclusion to README with some thoughts, cleanup (I don't count this as part of implementation time)
It took me about 3 hours to finish implementing this requirement.
I expected it would take me only 2, I think I was underestimating a bit the time it took me to compute the highlights on text.
I didn't foresee the dangerouslySetInnerHTML
issue with string replacement, so I had to quickly seek a solution.
I tried to work as quickly as possible, I really challenged myself on my time estimation - I must admit I tend to estimate too short, but I wanted to follow my first impression.
I stayed true to the asked visuals, overall, because I don't think it was important for this assessment. There's room for visual improvements, even for a thing as simple as a list, though.
I followed my usual code structure and file architecture, because I find it really clear and helpful, sometimes also better for long term scaling.
Some examples :
- importing foreign helpers into my own helper files => avoid refactoring the whole app if we change some external library
- separating helpers, hooks, components
- I also split dumb/smart components most of the time
- Here I also kept the Context Provider component in its own folder, because it wasn't really related to other components
- keeping helper's implementation locally if specific to a component
I took time to build helpers and hooks apart from components, because it helps me a lot focus on building functional code.
I added a button to fetch data to simplify my dev workflow.
I used material-ui
for visual components and jss integration, being used to it, I always gain some time not designing from scratch.
I added some plugins for linting, exactly the ones I use on my personal project, to have quick fix of my code without the hassle.
I used lodash
for some basics I always use, such as changing case of object keys (objectToCamelCase
), checking nil values (isNil
).
Finally, I used react-string-replace
, after looking for a quick solution to the text highlighting issue.
I could have copied the logic, which is not that complex, instead of using this library, but I didn't want to be later than already regarding my expectations.