Let's Build A Dribbble Clone With Ruby on Rails
Welcome to a five part mini-series where I teach you how to build a Dribbble clone in Ruby on Rails. This series is our most thorough build yet!
Dribbble is an active design community where designers of all varieties post their "shots" of whatever it is they are working on. What was originally intended to become more of "show your progress" type of site has become more of a portfolio for up and coming designers as well as seasoned pros.
Our Dribbble clone will introduce some new concepts as well as others I covered in previous builds. If you landed here and are brand new to Ruby on Rails, I invite you to check out my other series below for some foundational principles behind the framework.
- An Introduction to Ruby on Rails
- Installing Ruby on Rails on your machine
- Build a basic blog with comments using Ruby on Rails
- Build a Twitter clone with Ruby on Rails
What we will be building in depth
Our app will have the following features:
- The ability to create, edit, and destroy "shots" as well as like and unlike individual shots.
- User roles and authentication
- Drag and drop functionality
- Commenting functionality
- View counts/analytics
- A custom responsive shot grid UI using CSS Grid
There's a lot under the hood of this build so I went ahead and created this public repo on Github for you to follow along/reference. For time sake you'll notice in some of the following videos that I copied and pasted some general styles and mark up
What won't be featured in the build
- Independent user profiles
- Search
- Tagging
- Custom color palette generation as Dribbble currently does.
There's a ton we could do to extend the clone but since it's an "example" type of application I decided to forgo extending it dramatically for now. In the future I may add to this series and extend it further but I mostly invite you to do that same on your own to see how you could mimic the real app even more.
Getting started
Assuming you have rails and ruby installed on your machine (learn how to here) you are ready to begin. From your favorite working directory using your favorite command line tool run the following:
$ rails new dribbble_cloneThis should scaffold a new rails project and create the folder called dribbble_clone.
To kick things off I've added all the gems from this project to my Gemfile. You can reference the repo if you haven't already to grab the same versions I've used here.
The Gem List
Our gem list has grown since the previous build. You'll find the larger your app becomes the more gems you'll need.
- CarrierWave + Mini Magick - For image uploads and optimization
- Devise - User authentication and roles
- Guard - Doing work to files as they change - A task runner of sorts
- Guard Livereload - Reloads the browser when files change combined with the Live Reload extension on your favorite browser.
- Better Errors - Displays better errors during development.
- Simple Form - Simpler forms in Rails
- Bulma Rails - My favorite CSS framework as of late based on Flexbox.
- Impressionist - We use this to get view counts on shots
- Gravatar Image Tag - Easy way to grab a user's gravatar image based on their account email
- Acts As Votable - Like and unlike shots
I'll defer to the videos for a guide in getting our project all set up with each individual gem. The bulk of Part 1 is devoted to this process. We customize Devise a bit to add a "name" field for new users who register. Again reference the repo to see what that entails.