For your own privacy, please do not fork this repo! Instead, follow these instructions to mirror the repository to a new private repo on your account:
-
Create a new private repo on your github (eg, my-assessment)
-
On the command line, create a bare clone of our repo:
git clone --bare git@github.com:workco/code-assessment-web-ui.git
- Enter the temporary directory created by that command and push to your repo
cd code-assessment-web-ui.git
git push --mirror git@github.com:my-github-account/my-assessment.git
- In the working directory of your choice, clone the repo to start local development
git clone git@github.com:my-github-account/my-assessment
PS: Having trouble with these instructions? Reply to the talent team with your questions.
Please refer to emailed instructions from the talent team as to which/how many tasks to work on. See the master task list here.
Create a new branch off of main for each task you work on (except #5).
Make one pull request for each task. Set this up like you would a real PR. Some features we’ll look for:
- Informative, consistent commit message(s)
- A detailed PR description. Explain the fixes or functionalities accomplished, any decisions you made along the way, or alternative implementations you may have considered or attempted. Feel free to add images and videos.
- If applicable: Why did you choose this task?
You can merge the PR when you’re done. Implement your tasks in any order you'd like.
Other things we’re looking for in your work:
- Code quality and consistency
- New/updated Jest tests (when appropriate)
- New/updated Storybook stories (when appropriate)
When you’re done with your work, please share your private repo with workco-talent and reply to your original email from the talent team to let us know you're done.
In the project directory, you can run:
Install dependencies.
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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Runs tests (out of watch mode) and create a coverage report.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Lint all .ts files according to ESLint config. Run yarn lint:fix to automatically apply fixes.
Start a local Storybook server to browse component stories.
This project was bootstrapped with Create React App.
We're using React, one of our favorite front-end libraries!
- Our implementation features React Hooks, a feature that came out in React 16.8. We primarily use the useState and useEffect hooks.
- The app's data is exposed using React Context and managed via a custom React Hook called
useAppContext. - Routing via React Router.
- We are validating properties with TypeScript. See more info in the React docs.
- Fonts are provided by Google Fonts.
- Styling uses CSS modules and Sass. This article contains a good writeup of how the two work together.
We use Storybook on many of our projects to provide a living style guide of our app's components. This project includes some basic stories and the following addons:
Create React App comes with Jest built-in. We've written a few tests and included the following dependencies to support them:
To catch errors and enforce consistency, we're using ESLint in two forms:
- Create React App's ESLint Config
- ESLint Prettier Plugin
For more information, read about ESLint in the Create React App docs.
Use nvm to ensure the correct Node.js version (specified in .nvmrc)
nvm useAdditionally, you may need to run nvm install if the specified version is not yet installed.
You can find the Figma file for this project here: https://www.figma.com/file/1PbluBCo3DdjdSeMwb6i0p/Code-Assessment-Web. The "App" designs are for a mobile assessment - please disregard.
Please see package.json for a list of supported browsers.
Note: The UI is optimized for widths of greater than or equal to 375px.