Development should be done in this directory, and delivered back with documentation below
Here's how I approached...
- Structure - I wanted to practice with styled components, so I separated things based on their functionality. I considered keeping the styled components in the same file as their corresponding functional component, but felt that separating them was cleaner. Separating the components into their folders (containers, wrappers, styled-components) let me easily decide where I needed to go to work on a specific thing.
- Content - I aimed to keep the project as simple and readable as possible. I didn't use too many packages and if something seemed complicated, I tried to figure out a simpler way to do it. I probably spent too much time nitpicking and making it easy to work with, but I don't regret that. I never want someone else to have to slog through bad code that I've written in order to try and do a simple task.
- UX - There was more that I could have added in terms of feedback (such as hovering and click feedback) but it wasn't mandatory for the scope of this project - but I did add the loader, which wasn't in the specifications but I think adds a nice touch. A front-end developer has that freedom to add small things in the live site that a designer isn't able to express with a static image, and it's fun to experiment with the interactions a user will have with your site.
To run this locally:
- Clone the repository
- Run
yarn
in the root directory - Run
yarn dev
for development, andyarn build
to build the project
To view a live instance, visit https://mathis-frontend-assessment.netlify.com/