Technical frontend assessment for franklin.ai
This is a technical assessment task for Frontend Software Engineering roles at franklin.ai.
Your task is to develop a web application based on a Figma prototype. The app must pull some data from the json file in the repository and render it according to the prototype. You will also need to ensure the functionality is as specified in the prototype. You may implement the app in any framework of your choosing (React, Angular, Vue, Svelte, Solid, etc.). A Typescript implementation would be preferable.
The only mandatory detail is that the package.json file must include a script to run the app on a local dev server so that the implementation can be tested.
You should take a copy of this repo, implement the requirements described in the prototype, and push them to GitHub for discussion in the scheduled technical interview. You're welcome to use a private repository, as long as it is visible to @doc-E-brown, @rickfoxcroft, @jayvdb, @ray-kw, @boods & @ronaldcurtis.
You will be given the email address of a member of the team, and should email this person with a link to your solution at least 24 hours before the scheduled technical interview. You're also encouraged to email them with questions at any time while working on this task.
Please don't spend more than a few hours on this task.
It's not a trick question and we're not expecting anything too elaborate. It's a small self-contained exercise to help us get to know you through your code - how you break down a problem, how you structure your code, you're approach to styling and solving design problems, and how you navigate problem solving with your potential future team-mates.
We'll be looking for well-structured, clear, maintainable code with reasonable performance characteristics. We would also like to see a responsive, extensible and accessible style implementation. We will not be looking for micro-optimisations or for every single detail to be carefully polished.
All of the assets and style details required should be available in the Figma prototype inspection.
Use the books.json file located in the project root directory to fetch data required for the app. You will have to export the images for each book from the Figma prototype inspection and host them alongside your solution. Add the image location to the json file and refer to the images accordingly in your code.