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!
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.
Pick a top web design on Dribbble and implement the UI using React as fast as possible. Best time wins!
It is one of the highest viewed web designs of this month on Dribbble.
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.
https://mere-relation.surge.sh
- https://github.com/johnrjj/chat-ui
- https://github.com/johnrjj/elegant-ui
- https://github.com/johnrjj/reporting-dashboard
- https://github.com/johnrjj/flight-ui-dribbble-challenge
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!
My tools of choice are Sketch, React, styled-components and react-feathers.
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.
Practice. Lots of practice.