annie-elequin / frontend-assessment

This project is an assessment given by Robots & Pencils to evaluate my front-end development skills.

Robots and Pencils Frontend Developer Assessment

Development should be done in this directory, and delivered back with documentation below

Solution Notes

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.

Local Usage

To run this locally:

1. Clone the repository
2. Run yarn in the root directory
3. Run yarn dev for development, and yarn build to build the project

Live Preview

To view a live instance, visit https://mathis-frontend-assessment.netlify.com/