BerkeleyGag is an attempt to capture the functionality of 9GAG but exclusively for UC Berkeley students. Originally designed to give access only to berkeley students, BerkeleyGag now welcomes anyone who wants to sign up.
If you only wish to look around you can use this email and password:
email: test@test.com
password: bypassconfirmation
Below I explain how various parts of the site fit together.
I used the Behaviour Driven Development(BDD) workflow to build the site. This means that you can run rspec and cucumber tests and see that everything passes on your own system.
To run the tests:
-
spork (you can forgo this step, but your tests will run slower)
-
cucumber features/
-
rspec spec/
Contents of this document:
-
Creating a user
-
Sessions management
-
Update settings
-
Viewing your profile
-
Posting
-
Voting
-
Feed
-
Infinite scroll
-
404 and unauthorized requests
From the signup page the request with the user data arrives to the ‘create’ action in user’s controller. Here I instantiate a new user with the data provided and try to save her to the database. The user class validates the email:
1. for its presence 2. for its uniqueness (case insensitive) 3. for its format, according to /.+@.+\..+/i regular expression
A note on this regular expression. I used to employ very convoluted regular expressions to test for email validation, but it turns out that if a user was so inclined she could bypass even the most complicated regex. Instead I believe it is better to send them an email with a confirmation link and deprive the new user of privileges otherwise associated with the user who confirmed her email. For more on this make sure to check out: davidcel.is/blog/2012/09/06/stop-validating-email-addresses-with-regex/
The passwords are validated using ‘has_secure_password’ method. This requires us to have a password_digest attribute. Which I created earlier the migration ‘create_users’.
When the user is successfully saved to the database, she is sent out an email to her address using UserMailer. Sometimes it ends up in the spam folder, I have not figured out how to fix that yet. – use mailchimp? The email contains a confirmation link, that when clicked validates her email address with the database and allows the user to post and like photos. The inner workings of the confirmation process look like this:
-
When a user is created, her new record contains a confirmation code
-
This code is sent out to her email address
-
When she clicks on the link, a request is sent to the server carrying a token - the confirmation code
-
If the two match, her confirmation code is change to “Verified” and she becomes a verified user.
app/models/user.rb - has_secure_password, validations, set_confimation_code methods
app/controllers/users_controller.rb - new, create, confirm actions
app/views/users/new.html.erb
rspec spec/controllers/users_controller_spec.rb
rspec spec/mailers/user_mailer_spec.rb
rspec spec/views/users/new.html.erb_spec.rb
rspec spec/models/user_spec.rb
When a user lands on the /signin page a Login object is created. The user fills out the signin form with her email and password. The validation is mainly done by the User class, where the ‘authenticate’ method, provided by ‘has_secure_password’, hashes users input and compares it to the password_digest I store in the database. Upon a successful sign in a session is created that allows the user to interact with the application without having to authenticate on every request. The signout link at the top left corner destroys the current user’s session.
app/models/login.rb
app/controllers/sessions_controller.rb
app/views/sessions/new.html.erb
rspec spec/views/sessions/new.html.erb_spec.rb
rspec spec/controllers/sessions_controller_spec.rb
rspec spec/helpers/sessions_helper_spec.rb
rspec spec/models/user_spec.rb
rspec spec/models/login_spec.rb
Once logged in, the user can click on his email to reach the ‘edit your account’ link. After clicking the link, the user is presented with a standard mechanism of updating her information.
app/models/user.rb
app/controller/users_controller.rb - edit, update actions
app/views/users/show.html.erb
app/views/users/edit.html.erb
rspec spec/controllers/users_controller_spec.rb
rspec spec/models/user_spec.rb
rspec spec/views/users/edit.html.erb_spec.rb
To view the reputation and manage what she has posted, the user can click on her email at the top of the navigation bar.
app/views/users/show.html.erb
app/views/shared/_feed_item.html.erb
rspec spec/views/users/show.html.erb_spec.rb
A user can post either one of two ways:
-
Directly choosing a photo from her archives
-
Creating a meme on memeful.com and copy-pasting a link into the link input form.
Both ways require the user to provide a title of at most 60 characters, which has a convenience-counter at the top right of the input form.
The photos are stored in the Amazon S3 cloud storage. The uploading process is handled by the Rmagick gem. While the image is uploading, a blue progress bar appears to notify how much is left, this is a bootstrap3 feature, love it.
In case any of the inputs are invalid, the page is not reloaded, instead you get an alert asking to provide a valid input.
If the user uploads from a mobile device, often the orientation is landscape instead of portrait, the auto_orient method rotates the image 90 degrees.
app/controllers/posts_controller.rb - create, post_params methods
app/models/post.rb - mount_uploader
app/uploaders/photo_uploader.rb - auto_orient method
Gemfile - rmagick, carrierwave gems
rspec spec/models/post_spec.rb
rspec spec/controllers/posts_controller_spec.rb
rspec spec/views/posts/_post.html.erb_spec.rb
Voting is done by the ‘vote’ action in the posts_controller. The logic is simple: if the vote exists - update it with however the user just voted, else build a new vote for the current_user.
app/controllers/posts_controller.rb
app/models/post.rb
rspec spec/controllers/posts_controller_spec.rb
rspec spec/models/post_spec.rb
rspec spec/models/post_vote_spec.rb
The feed is constructed from two partials: _feed_item.html.erb and _feed.html.erb, which can be found in the app/views/shared folder. The feed can be sorted by ‘freshest’ which shows the newest posts, the most up-voted and down-voted.
app/models/post.rb - by_votes_up, by_votes_down, by_votes_freshest
app/controllers/home_controller.rb - index, haha, mehe
app/views/shared/_feed_item.html.erb
app/views/shared/_feed.html.erb
rspec spec/models/post_spec.rb
rspec spec/controllers/home_controller_spec.rb
rspec spec/views/shared/_feed.html.erb_spec.rb
rspec spec/views/shared/_feed_item.html.erb_spec.rb
Infinite scroll is achieved by using will-paginate gem and some custom javascript that you can find in application.js Essentially I check if the user scrolled past the visible document height and send an ajax request to fetch more posts. This is handled by the will_paginate gem.
app/assets/javascripts/application.js
If the user tries to access some unknown page I catch this behaviour with ‘match “*gibberish”, to:“home#not_found”’ in the routes.rb Also if a user tries to reach an unauthorized page, such as another user’s page, her access will be denied as she is not the current user for that other user’s profile. For this purpose I define ‘AccessDenied’ class which inherits from ‘StandardError’.
config/routes.rb
lib/access_denied.rb