odinbook

Project info

A relatively simple social media app. The purpose of this project is to tie together the concepts learned during the rails module of The Odin Project. This is the capstone project of The Odin Project's Ruby on Rails course.

Project description can be found here

Live demo

Live demo available via Fly.io

Table of Contents

• Features
• Technologies utilized
• Project screenshots
• Behind the Scenes
• Installation

Features

Registration

• Devise allows users to register or create new sessions
• OAuth allows users to login with their Github account
• welcome email is sent when new user is created

Profile

• users can add first name, last name, and upload a user image (default gravatar image)

Posts

• users can write posts and upload an image
• posts can have many likes and comments
• users can destroy their posts

Comments

• can have many likes
• users can reply to others (nested comments)
• nested comments use turbo streams to avoid page reloads and update post
• users can destroy their comments

Friendship

• users can add other users as connections
• when users are connections, their posts are rendered on eachother's timeline

Notifications

• notified when a reply is made to a comment
• notified when comments are made on a post
• notified when post recives likes
• notified when a connection is requested and accepted

Additional Features

• Infinite scroll timeline, notifications, and user page
• Realtime updates of the timeline via Actioncable
• Minimal bootstrap styling

Technologies utilized

• Ruby version 3.2.2
• Rails version 7.1.2
• PostgreSQL database
• Devise gem for user authentication
• Faker gem to help seed database with fake users and posts
• OmniAuth gem to sign in through Facebook or GitHub
• Bootstrap styling
• Rails credentials to store sensitive information
• Letteropener gem to test emails during development
• Carrierwave for image uploads
• Cloudinary for image hosting
• Fly.io for deployment
• Pagy gem for infinite scroll timeline

Project screenshots

Post with comments:

Post with nested comments:

Post with an image:

Tabbed user index:

User show page with infinite scroll:

User edit page, where a user image can be uploaded:

Sign in page:

User notifications page with infinite scroll:

Behind the Scenes

Known Bugs

• Bootstrap's javascript dropdowns intermittently stop working, requiring a page refresh.

Improvements

This project could be improved with:

• A chat feature implemented with Actioncable (similar implementation to posts on timeline)

• realtime notifications with Actioncable

• A searchbar to find friends.

• Dark mode

• A button to return to the top of the page on paginated pages with infinite scroll.

• Avoid page reloads when friend requests are created, canceled, declined, or accepted with turbo streams

• Update posts on profile pages with Actoncable

• Make post able to be either a text OR a photo by using a polymorphic association (so users can still like or comment on it while being none-the-wiser).

• a basic set of integration tests (not yet complete)

• Sign up for an email provider like sendgrid/Create better email for mailer

  • At the time of development, sendgrid and postmark seem to want a domain email to sign up (not gmail), mailgun does not have a free teir, and mailchimp requires a physical address.

Notes

Project Initiation

• I initially created this project using the command rails new odin-book --database=postgresql --css=bootstrap

• I found that adding --css=bootstrap changed more files than just adding bootstrap and made the project more difficult to debug.

Image Processing

• Imagemagick not working properly in development

• process resize_to_limit: [400, 400] working with gif files, but giving an error for jpg and png files.

• Possible solutions:

  • Try Rmagick instead of minimagick
  • Rollback Imagemagick to version 6.9.10 instead of version 7.1.1

• ended up processing images through cloudinary

Notifications

• I would like to display notifications in a modal instead of sending the user to another page, but I cannot figure out how to implement infinite scroll in a module from the nav bar.

• Currently, the user is redirected to the users/notifications page instead of rendering a modal in order to implement infinite scroll pagination.

• at first, I couldn't figure out a way to display the modal without the page refreshing once the notifications action was called.

• Attempted solution involving adding a route and using button_to with remote: true, but page still refreshed.

• Turbo stream was the solution to stop page refresh

Development

• Use bin/rails s to view development version of the application.
• Use fly deploy to deploy the application.

Deployment

• Not necesary to configure app secrets on fly.io website

• When deploying to fly.io with Rails Credentials, using Rails.application.credentials.dig(:github, :github_app_id) worked when Rails.application.credentials.github.github_app_id was returning nil.

• When taking the app down from fly.io and the depoloying it again, it was important to make sure the following code was included in fly.toml:

  [deploy]
    release_command = "bin/rails db:prepare"
  

• Deployment with CarrierWave and Cloudinary to fly.io required adding a cache directory in image_uploader.rb to resolve profile picture upload issues.

• Once deployed, I had to follow these instructions with every new terminal window if I needed to deploy changes or interact with fly:

  flyctl was installed successfully to /home/user/.fly/bin/flyctl Manually add the directory to your $HOME/.bash_profile (or similar):

  • export FLYCTL_INSTALL="/home/user/.fly"
  • export PATH="$FLYCTL_INSTALL/bin:$PATH"

Terminal commands used during development

• rails new odin-book --database=postgresql
• rails generate devise User fname:string lname:string image:string
• rails generate controller Users index show
• rails generate devise:views
• rails generate uploader Image
• rails generate model Post content:text user:references
• rails generate controller Posts index show new create
• rails generate model Comment content:text post:references user:references
• rails generate controller Comments new create
• rails generate model Like user:references post:references comment:references
• rails generate controller Likes create
• rails generate model Friendship sent_to:references sent_by:references status:boolean
• rails generate controller Friendships create
• rails generate model Notification notice_id:integer notice_type:string user:references
• rails generate migration AddPostAndCommentReferencesToNotifications post:references comment:references
• rails generate migration AddParentIdToComments parent:references
• rails generate migration AddViewedToNotifications viewed:boolean
• rails generate migration AddOmniauthToUsers provider:string uid:string
• rails generate channel post
• rails generate mailer WelcomeMailer
• rails generate migration AddImageToPosts image:string

Resources

• This blog post was a useful resource when working on associations.
• This resource was helpful when implementing pagination on various pages.
• This comment helped me get unstuck when I was having trouble with the sign in and registration pages after implimenting pagination with turbo. Turns out, I needed to add data: { turbo: false } to those forms.
• The cloudinary docs were very helpful when configuring with carrierwave.
• I referenced this article when setting up credentials
• This article was helpful when setting up Actionmailer with a Gmail account as an alternative to Sendgrid.
• This thread helped me configure a GMail account to send emails.
• This post was helpful when for off emails when seeding during development.

Installation

• Clone this repository to your desktop.
• Navigate to the top level of the directory by running cd odin-book-v2.
• Run bundle install to install the required dependencies.
• Run rails db:setup to create and seed the database.
• Start the rails server by running rails s
• Visit https://localhost:3000 to view the app in the browser