Cover image for Crafting Code Chronicles

Crafting Code Chronicles

Creating my blog was an amazing learning experience, highlighting the importance of thoughtful planning and incorporating valuable resources. Previously, my approach lacked a Minimum Viable Product (MVP), resulting in a chaotic blog. However, with insights from senior engineers and resources from Chris at GoRails, I embarked on a journey to reconstruct and document the technical process.

Database Structure:


The foundation of the blog is based on two models – User and BlogPost. The Devise gem was used for my personal authentication + authorization, and in the future it will handle guests as well.  Embracing Action Rich Text for content creation and Active Storage for image uploads to Amazon S3 enriched the user experience.

DB design (descriptive)


Scopes for Dynamic Content Sorting


Ensuring the display of the latest posts on the index page led me to leverage scopes for custom ActiveRecord queries. The introduction of a 'published_at' column in BlogPosts facilitated categorizing posts as drafts, published, or scheduled.

  def draft?
    published_at.nil?
  end 

  def published?
    published_at? && published_at <= Time.current
  end 

  def scheduled?
    published_at? && published_at > Time.current
  end

I then used ActiveRecord to query these methods:

  scope :sorted, -> { order(arel_table[:published_at].desc.nulls_first).order(updated_at: :desc) }
  scope :draft, -> { where(published_at: nil)}
  scope :published, -> { where("published_at <= ?", Time.current)}
  scope :scheduled, -> { where("published_at > ?", Time.current)}

Utilizing these scopes in my model facilitated seamless handling of different scenarios based on the user's sign-in status.

  def index 
    if user_signed_in?
      @blog_posts = BlogPost.all.sorted
      @pagy, @blog_posts = pagy(@blog_posts)
    else
      @blog_posts = BlogPost.published.sorted
      @pagy, @blog_posts = pagy(@blog_posts)
    end 
  end

Design


The design phase, powered by Tailwind CSS, was a thrilling endeavor. Investing time in envisioning the blog's appearance through sketches laid the groundwork for a visually appealing and user-friendly interface. One thing I noticed with Tailwind CSS is that the code seems packed and congested which may cause confusion when wanting to change it. For now, it's a tool that is really handy till I master Javascript and the frameworks that power it.

Tailwind CSS snippet


Project Organization


GitHub Projects emerged as a pivotal tool for orchestrating tasks. This approach, inspired by agile methodologies, involved breaking down the project into phases and manageable tickets. From noting scenarios and creating user stories to task breakdowns within sprints, the agile workflow streamlined the development process.

Languages and Framework


  • Ruby - 3.2.2
  • Rails - 7.0.4.3

Database


  • PostgreSQL

Gems


  • Tailwind CSS
  • Devise for Authentication and Authorization
  • Pagy for Pagination
  • RSpec for Testing
  • Launchy
  • Orderly

In summary, my blog transformation journey encompassed a robust database structure, elegant design with Tailwind CSS, and an organized project management approach via GitHub Projects.

As I update this blog with more features, I'll dive deeply into  techniques I use and my overall experiences as a developer.

Feedback is always welcome, please shoot me an e-mail at: karanm645@gmail.com
Back