https://github.com/johnrjj/job-manager-dribbble-ui-challenge-july19
Dribbble UI Challenge, July 2019 (with timelapse video!)
https://github.com/johnrjj/job-manager-dribbble-ui-challenge-july19
css css-in-js dribbble html javascript react styled-components typescript
Last synced: 3 months ago
JSON representation
Dribbble UI Challenge, July 2019 (with timelapse video!)
- Host: GitHub
- URL: https://github.com/johnrjj/job-manager-dribbble-ui-challenge-july19
- Owner: johnrjj
- Created: 2019-07-06T18:43:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T03:48:36.000Z (almost 3 years ago)
- Last Synced: 2025-08-31T11:53:01.634Z (3 months ago)
- Topics: css, css-in-js, dribbble, html, javascript, react, styled-components, typescript
- Language: TypeScript
- Homepage: https://www.youtube.com/watch?v=46nTARC1hSI
- Size: 3.64 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Job Manager Dashboard
### Dribble UI Challenge - July 2019
--------
## Bonus Update: Watch the 2 Minute Timelapse Video
Since I get a lot of questions about my workflow, I decided to record a timelapse of me attempting the challenge. The video takes 4 hours and 11 minutes of coding and timelapses it into 2 minutes. Hold on tight (There's a longer video at the bottom of the README if this one is too fast for you).
In the video, I go from a single screenshot and create-react-app (read: from nothing!) to an initial component-based implementation in React in under five hours.
*Click on the video below to watch!*
[](https://www.youtube.com/watch?v=46nTARC1hSI "Dribbble UI Challenge - July 2019 [Timelapse 200x] 4K")
## Overview
Every now and then I like to flex my CSS muscles; One of my honed skills is being able to rapidly prototype web pages from scratch -- in this case, just a screenshot.
##### What's the Dribbble UI challenge?
Pick a top web design on Dribbble and implement the UI using React as fast as possible. Best time wins!
#### What's this month's Dribbble of choice?
[Dashboard - Job Manager](https://dribbble.com/shots/6696668-Dashboard-Job-Manager)
It is one of the highest viewed web designs of this month on Dribbble.
#### Why do this?
One of my hobbies is taking a random screenshot from dribbble and seeing how fast I can implement the UI with React and styled-components.
#### Finished demo
[https://mere-relation.surge.sh](https://mere-relation.surge.sh/)
#### Some previous challenges
- [https://github.com/johnrjj/chat-ui](https://github.com/johnrjj/chat-ui)
- [https://github.com/johnrjj/elegant-ui](https://github.com/johnrjj/elegant-ui)
- [https://github.com/johnrjj/reporting-dashboard](https://github.com/johnrjj/reporting-dashboard)
- [https://github.com/johnrjj/flight-ui-dribbble-challenge](https://github.com/johnrjj/flight-ui-dribbble-challenge)
## 10 Minute Timelapse Extended Blu-Ray Edition
If the 2 minute timelapse is too quick, and you want a more detailed video, here is the 10 minute version which I think can be followed a bit better.
Click on the video below to watch!
[](https://www.youtube.com/watch?v=kGtxwVoXo1U "Dribbble UI Challenge - July 2019 [Timelapse 25x] 4K")
## FAQ
#### Tools used
My tools of choice are Sketch, React, styled-components and react-feathers.
#### Can I hire you?
Feel to inquire about my hourly rate or larger project estimates. Give me a Sketch file and I'll give you a quality web application. Contact me at johnrjj+github[at]gmail.com.
#### How did you get good at this?
Practice. Lots of practice.