daanishnasir / drawing-app-challenge

Make a drawing app! A challenge for prospective apprentices.

Social Tables Front End Apprentice Challenge

Thanks for your interest in the Social Tables Apprentice Program!

Social Tables engineering is looking for apprentices! The position is a great opportunity to learn and grow on a fantastic team working with fun, exciting tech.

Your task, should you choose to accept it, is to build out some features for a React/Redux drawing app. Women, LGBTQ+ and people of color are encouraged to apply!

• Submissions are due by August 11th.

If you successfully complete the coding challenge there will be a phone screen and potential on-site interview. Our goal is for apprentices to begin onboarding three weeks after the deadline. We have some flexibility on start date to accommodate your schedule.

The App

The app is a React/Redux app which lets you draw on a <canvas> element with different brush sizes.

The Challenge

We need to make our drawing app more fun and functional! Given a tool & brush size selector, build as many of these additional components as you can:

• Colorpicker: a component that lets you pick a color to draw. The built in HTML color input will be fine here.
• Image stamp: a place for you to upload an image and pop it in the drawing area like so. The image stamp component should give you a preview of the image uploaded. It should function like this:
• Eraser: a tool to erase what you've drawn. Hint: there is a particular color that makes for a great eraser.
• Reset: a button that wipes the entire canvas clean so you can make a new drawing.
• Save: a button that will take what you've drawn in the canvas and open it as an image in another tab so you can save it.

You'll also need to style the sidebar so it looks as close to this image as possible. Clean, maintainable, and organized (S)CSS is an important part of your submission!

It only needs to work in the latest versions of Chrome & Firefox.

How to submit

Send all your files in one email to [email protected] with the subject line: Social Tables Apprentice Challenge.

These files will contain:

• YourInitials-readme.{md, txt} containing:
  • Instructions for running your code
  • Any notes you wish to include
  • Brief answers to the following questions:
    1. What aspect of your submission are you most proud of, and why?
    2. What would you work on if you had more time?
    3. Of all the resources (blog posts, tutorials, videos, mentors etc.) you referenced, what was most helpful for you?
• YourInitials-code.{tar.gz, zip} with your code.
  • Submitting your node-modules folder isn't necessary, because we can get it by running npm install
  • You should submit any files you found necessary to change and enough support and explanation so we can reproduce your results. In any case, include all the information in YourInitials-readme.{md, txt}.
• YourInitials-resume.pdf containing your resume.

Getting started

After running npm install, you can run these commands in the root directory to start the project

npm start

Runs the app in the development mode.
Open http://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.

A Few Helpful Resources

• Introduction to commonly used ES6 features
• Official React Docs
• Official Redux Docs
• Getting Started with Redux (free video series)
• MDN Canvas Tutorial

FAQ

Can I copy code from the Internet?
You must cite any outside resources you use in your work (for example, using comments to denote a snippet obtained from Stack Overflow).

Can I post my solution to the Internet/GitHub?
We ask that you don't. It makes it much harder to evaluate submissions when a completed solution is available for review.

Can I copy someone else's submission, cite it, and submit?
No.

Can I submit without completing all parts of the challenge?
Absolutely! Do as much as you can, seriously. Use your README.md to document where you ended up.

What is the status of my application?
Email [email protected].

I see a typo.
Submit a pull request!

I still have a question.
Submit a Github issue.