Repository files navigation

The goal of this coding challenge is two part:

• Demonstrate your skillset and how you think about solving problems
• Get a glimpse at the types of problems we're solving at Draftbit

You'll be recreating Draftbit'sPrism component for setting margin & padding, and a backend for storing and retrieving the data. The way this works is when you selecta component from theLayer Tree, we fetch all the possible props and render them inside the Properties Panel.

This is just one section of the properties panel. Other sections include Flex, Size, Background colors, etc.

The prism component lives in a pane called "Margins & Padding". This pane is collapsible.

There's a stubbed outPropertiesPanelRescript component that we import in App.tsx. Please continue the implementationusing ReScript.

There are 3 high-level states you need to account for:

• default: there is no previous value, the input is pristine.
• changed: a value has been changed from the default value. There is a yellow line shown.
• focused: the input is focused and has a value. Values should include a number and a metric, ie:100%,20pt, etc.

A basic server skeleton has been implemented for you, consisting of the following pieces:

• Acreate-tables.sql file with a dummy table definition in it. You may define your tables in this file. Alternatively you can replace this with an ORM or whatever approach you wish to bootstrap your database.
• ADockerfile which defines a docker container runningPostgres, seeded with thecreate-tables.sql file. If you run into trouble running docker, you can use another method to run the database such asPostgres.app on your computer -- just make sure you modify the scripts inpackage.json and the.env accordingly, and document any special steps needed for an engineer to be able to test your server.
• A web server, usingexpress.js, inserver.ts. The server waits for the database to be accessible, connects to it, and implements a dummy JSON API. It's intended purely as an example to get you started -- feel free to change as much as you wish; for example you can use a different server framework, use graphql or protobuf, or whatever you'd like, so long as you write your code inTypeScript.
• A.env file defining environment variables that will be configured for the web server and some of the scripts in thepackage.json. You may change or add values as necessary.

• Some folks can do this in just a few hours, but take as much time as you need. Speed is less important than the finished product.
• Ask as many questions as you need to be successful.
• We're more concerned about the functionality than the appearance: getting it working > getting it pixel perfect.
• Show your work. Just like in school, "why" you did something is more valuable than the final answer!

We've created the base environment for you. It includes Rescript by default, but you're more than welcome to write plain JavaScript. Pick theexperience you're most comfortable with (just know you'll end up learning Reason one way or another here =P).

In the project directory, you can run:

Runs the app in the development mode.
Openhttp://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Starts the Rescript compiler in watch mode.

Launches the test runner in the interactive watch mode.
See the section aboutrunning tests for more information.

Build your Rescript files. You must do this before runningyarn build.

Builds the app for production to thebuild folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Runs the backend web server and database together. The same as runningyarn backend:server andyarn backend:db concurrently.

Runs the backend web server inserver.ts. Restarts the server on file changes.

Builds the docker container for the backend web server.

Launches apsql shell at your local postgres database.

Builds the postgres docker image and starts a container running it.

• Create React App documentation
• React documentation
• Rescript documentation
• Rescript/React documentation
• Gentype documentation