https://github.com/neulabscom/frontend-assignment
A take-home project for frontend engineers candidates
https://github.com/neulabscom/frontend-assignment
Last synced: 9 months ago
JSON representation
A take-home project for frontend engineers candidates
- Host: GitHub
- URL: https://github.com/neulabscom/frontend-assignment
- Owner: neulabscom
- Created: 2021-11-17T10:13:41.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-17T11:22:55.000Z (over 4 years ago)
- Last Synced: 2025-04-02T17:11:12.202Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 577 KB
- Stars: 1
- Watchers: 11
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Frontend developer take-home assignment
First things first: thank you for taking the time to take this test.
We know how much your time is worth, and we greatly
appreciate your effort.
To work on this project:
1. Fork this repository
1. When you're done, submit a pull request with your solution
1. Send an email to frontend-assignment@neulabs.com to notify the delivery of your project
You can either clone the repository and work on a local copy: in that case please contact us at frontend-assignment@neulabs.com when you're done with the assignment, and we'll arrange the best way to assess your work.
**Online one-click setup for coding (Optional)**
You can use Gitpod (A free online VS Code-like IDE) for coding online.
If you want to use Gitpod:
1. fork the repository
1. click on this button.
[](https://gitpod.io/from-referrer/)
### Project brief
You will have to create a component defined in the following Figma files:
**Design**
https://www.figma.com/file/VrkWJvZ5Cm0gjPSSnw4y7U/Test-Frontend?node-id=16%3A2
**Prototype**
https://www.figma.com/proto/VrkWJvZ5Cm0gjPSSnw4y7U/Test-Frontend?page-id=18%3A1149&node-id=18%3A2553&viewport=408%2C48%2C0.5&scaling=min-zoom&starting-point-node-id=18%3A2553&show-proto-sidebar=1
**Product specs**
1. The component must be responsive, according to the specs defined in the "Design" file. You are free to choose which resolution to set the breakpoint at.
1. The animation is the same both in mobile and desktop
1. The component must be reusable with different maps and points of interest
1. Define the stories show different variants or edge cases
**Code specs**
1. The project is configured to use React with Typescript and [Storybook.js](https://storybook.js.org): add the new component and the related stories in `src/stories` directory
1. Please maintain a consistent code style throughout the entire project
1. The repository is configured to use styles with simple css imports, feel free to go that way or add any css-in-js library of your choice
1. To implement the animations you can choose simple css or any library of your choice
1. Embed the google font wherever you prefer, inside a global css or the component itself
### Project deadline
Take the time you need to deliver a result that satisfies you, but please do not go over the 2 weeks.
### Quality assurance
We value a lot of things when assessing a project. No particular hints on this, but this one: **mind the details**. ;-)
Happy coding!