We will be building a Scrum Board with Drag and Drop functionality. The only requirement is that you use @hello-pangea/dnd, which has been setup for you. TailwindCSS has also been setup for you to use as needed.
Be creative! You have the flexibility to build the features you want. The starting point for the app is in src/components/App.tsx.
We're looking for:
- How well do you manage your time?
- How well do you work as a team? Are you an effective communicator? Do you ask questions?
- What features can you add that will make you stand out?
- How well can you learn to use a library you've never seen before?
URL: https://stackblitz.com/github/MScienceLLC/Frontend-Interview-Test
A Chrome Web Browser. Stackblitz is on beta for Firefox, and you will encounter some issues.
Feel free to use the following resources to help you build the application.
- @hello-pangea/dnd: A simple drag and drop library for React.
- TailwindCSS: A utility-first CSS framework.
- React
- <DragDropContext /> - Wraps the part of your application you want to have drag and drop enabled for
- <Droppable /> - An area that can be dropped into. Contains s
- <Draggable /> - What can be dragged around
The goal isn't to have a finished solution, but to see how you approach the problem. We are looking for clean, maintainable code. You may use the resources, including the examples, but may not copy/paste whole solutions. Demonstrate you understand every line of code you write. Have fun and be creative. Explore! Ask questions!
The interviewer is also a resource. Think of them as a team member you can ask for help. They can answer questions, provide guidance, and help you debug. They can also provide feedback on your code and design decisions.
Use TypeScript and IntelliSense (tab completion) to your advantage. It will help you write better code faster and know what's available to you. Use it to explore component props.