Deployment to production

Gemfile

@@ -42,10 +42,7 @@ gem 'tzinfo-data', platforms: %i[windows jruby]
 gem 'bootsnap', require: false
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
-# gem "image_processing", "~> 1.2"
-
-# authorization
-gem 'cancancan'
+# gem 'image_processing', '~> 1.2'
 
 # add devise for authentication
 gem 'devise'

Gemfile.lock

@@ -85,7 +85,6 @@ GEM
     bootsnap (1.17.1)
       msgpack (~> 1.2)
     builder (3.2.4)
-    cancancan (3.5.0)
     capybara (3.39.2)
       addressable
       matrix
@@ -305,7 +304,6 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap
-  cancancan
   capybara
   debug
   devise

README.md

@@ -1,4 +1,4 @@
-# Budget App
+# Budget App - Budgetti
 
 <a name="readme-top"></a>
 
@@ -24,9 +24,9 @@
 
 <!-- PROJECT DESCRIPTION -->
 
-## 📖 Budget App <a name="about-project"></a>
+## 📖 Budget App - Budgetti <a name="about-project"></a>
 
-The **Budget App** is a comprehensive solution for managing personal finances, designed using Ruby on Rails with a PostgreSQL database. This fully functional application allows users to create categories, track transactions, and get an overview of their spending. An important feature of the app is its ability to associate transactions with categories, enabling users to understand their spending habits better. This promotes responsible financial management, which is a vital part of personal finance. The Budget App is not just an application, but a financial companion that enhances the budgeting experience by organizing and simplifying the process
+The **Budget App - Budgetti** is a comprehensive solution for managing personal finances, designed using Ruby on Rails with a PostgreSQL database. This fully functional application allows users to create categories, track transactions, and get an overview of their spending. An important feature of the app is its ability to associate transactions with categories, enabling users to understand their spending habits better. This promotes responsible financial management, which is a vital part of personal finance. The Budget App is not just an application, but a financial companion that enhances the budgeting experience by organizing and simplifying the process
 
 ## 🛠 Built With <a name="built-with"></a>
 
@@ -77,7 +77,12 @@ The **Budget App** is a comprehensive solution for managing personal finances, d
 
 ### Screenshots <a name="key-features"></a>
 
-<img src="#" alt="public index without login" width="500"/>
+<img src="screenshots/splash-screen.png" alt="public index without login" width="500"/>
+
+### LIVE DEMO <a name="live-demo">
+
+> [LIVE Link](https://budget-app-gsnk.onrender.com/)
+> [Video demo](https://www.loom.com/share/d45038fec4da479a850a62cc4929b4e7?sid=442ca8e7-66da-458b-9421-e4dcabeede23)
 
 
 <p align="right"><a href="#readme-top">👆</a></p>
@@ -106,6 +111,8 @@ git clone https://github.com/fmanimashaun/budget-app.git
 cd budget-app
 
 bundle install
+
+npm install
 ```
 
 ## Database Setup
@@ -187,7 +194,9 @@ If you like this project leave a start for it.
 
 ## 🙏 Acknowledgments <a name="acknowledgements"></a>
 
-I'd like to thank Microverse for helping us in the journey to become a Fullstack developer.
+- I'd like to thank Microverse for helping us in the journey to become a Fullstack developer.
+
+- Special appreciation [Gregoire Vella on Behance](https://www.behance.net/gregoirevella) for the Original design idea 
 
 <p align="right"><a href="#readme-top">👆</a></p>
 

app/assets/stylesheets/application.tailwind.css

@@ -4,10 +4,42 @@
 
 @font-face {
   font-family: 'Proxima Nova Light';
-  src: url('../fonts/ProximaLight.otf') format('opentype');
+  src: url('ProximaLight.otf') format('opentype');
 }
 
 @font-face {
   font-family: 'Proxima Nova Bold';
-  src: url('../fonts/ProximaBold.otf') format('opentype');
+  src: url('ProximaBold.otf') format('opentype');
+}
+
+.session input::placeholder {
+  @apply bg-white;
+  @apply text-accent-100;
+}
+
+#content {
+  transition: transform 0.3s ease-out, margin-block 0.3s ease-out;
+}
+
+.off-canvas {
+  position: relative;
+  transform: translateX(300px);
+  margin-block: 50px;
+}
+
+.close {
+  left: -300px;
+}
+
+.toast {
+  background-color: #333;
+  color: white;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 120px;
+  font-size: 17px;
+  transform: translate(-50%, 0);
+  border-radius: 10px;
 }

app/controllers/application_controller.rb

@@ -1,2 +1,17 @@
 class ApplicationController < ActionController::Base
+  before_action :configure_permitted_parameters, if: :devise_controller?
+  before_action :redirect_if_signed_in
+
+  protected
+
+  def configure_permitted_parameters
+    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
+    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
+  end
+
+  private
+
+  def redirect_if_signed_in
+    redirect_to categories_path if user_signed_in? && request.path == root_path
+  end
 end

app/controllers/categories_controller.rb

@@ -0,0 +1,30 @@
+class CategoriesController < ApplicationController
+  before_action :authenticate_user!
+
+  def index
+    @categories = Category.where(user: current_user)
+    @total_spent = @categories.sum { |category| category.expenses.sum(:amount) }
+  end
+
+  def new
+    @category = Category.new
+  end
+
+  def create
+    @category = Category.new(category_params)
+    @category.user = current_user
+    if @category.save
+      flash[:notice] = 'Category was successfully created.'
+      redirect_to categories_path
+    else
+      render :new
+    end
+  end
+
+  private
+
+  # Only allow a list of trusted parameters through.
+  def category_params
+    params.require(:category).permit(:name, :icon)
+  end
+end

app/controllers/expenses_controller.rb

@@ -0,0 +1,32 @@
+class ExpensesController < ApplicationController
+  before_action :authenticate_user!
+
+  def index
+    @category = Category.find(params[:category_id])
+    @expenses = @category.expenses.order(created_at: :desc)
+  end
+
+  def new
+    @expense = Expense.new
+    @categories = current_user.categories.all
+  end
+
+  def create
+    @expense = Expense.new(expense_params)
+    @expense.user = current_user
+    if @expense.save
+      flash[:notice] = 'Expense was successfully created.'
+      redirect_to categories_path
+    else
+      @categories = current_user.categories.all
+      render :new
+    end
+  end
+
+  private
+
+  # Only allow a list of trusted parameters through.
+  def expense_params
+    params.require(:expense).permit(:name, :amount, category_ids: [])
+  end
+end

app/helpers/categories_helper.rb

@@ -0,0 +1,2 @@
+module CategoriesHelper
+end

app/helpers/expenses_helper.rb

@@ -0,0 +1,2 @@
+module ExpensesHelper
+end

app/javascript/application.js

@@ -1,3 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "@hotwired/turbo-rails"
-import "controllers"
+import "@hotwired/turbo-rails";
+import "controllers";
+import "./myScript.js";

app/javascript/myScript.js

@@ -0,0 +1,34 @@
+document.addEventListener("turbo:load", () => {
+  console.log("Page loaded with Turbo Drive");
+
+  const menuBtn = document.querySelector("#menu-btn");
+  const content = document.querySelector("#content");
+  const menuBar = document.querySelector("#menubar");
+  const avatar = document.querySelector("#avatar");
+  const toast = document.querySelector("#toast");
+
+  var img = new Image();
+
+  img.src = "https://avatar.iran.liara.run/public";
+
+  img.onload = function () {
+    avatar.src = img.src;
+  };
+  img.onerror = function () {
+    avatar.src = avatar.dataset.avatarPath;
+  };
+
+  // add event listener
+  menuBtn.addEventListener("click", () => {
+    content.classList.toggle("off-canvas");
+    menuBar.classList.toggle("close");
+  });
+
+  // show toast if it has a message
+  if (toast.innerText.trim() !== "") {
+    toast.classList.remove("hidden");
+    setTimeout(() => {
+      toast.classList.add("hidden");
+    }, 5000); // The toast will be hidden after 5 seconds
+  }
+});

app/models/category.rb

@@ -0,0 +1,9 @@
+class Category < ApplicationRecord
+  belongs_to :user
+  has_one_attached :icon
+  has_many :category_expenses, dependent: :destroy
+  has_many :expenses, through: :category_expenses
+
+  validates :name, presence: true
+  validates :icon, presence: true
+end

app/models/category_expense.rb

@@ -0,0 +1,7 @@
+class CategoryExpense < ApplicationRecord
+  belongs_to :category
+  belongs_to :expense
+
+  validates :category, presence: true
+  validates :expense, presence: true
+end

app/models/expense.rb

@@ -0,0 +1,15 @@
+class Expense < ApplicationRecord
+  belongs_to :user
+  has_many :category_expenses, dependent: :destroy
+  has_many :categories, through: :category_expenses
+
+  validates :name, presence: true
+  validates :amount, presence: true, numericality: { greater_than: 0 }
+  validate :categories_not_select
+
+  def categories_not_select
+    return unless categories.any? { |category| category.name == 'Select at least one category' }
+
+    errors.add(:categories, 'cannot contain "Select at least one category"')
+  end
+end

app/models/user.rb

@@ -2,5 +2,10 @@ class User < ApplicationRecord
   # Include default devise modules. Others available are:
   # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
   devise :database_authenticatable, :registerable,
-         :recoverable, :rememberable, :validatable
+         :recoverable, :validatable
+
+  has_many :categories, dependent: :destroy
+  has_many :expenses, dependent: :destroy
+
+  validates :name, presence: true
 end

app/views/categories/index.html.erb

@@ -0,0 +1,56 @@
+<div class="relative w-full flex bg-gradient-to-tr from-primary to-dark-blue">
+  <%= render 'layouts/nav' %>
+
+  <div class="w-full flex flex-col bg-off-white relative" id="content">
+    <header class="bg-primary flex justify-between p-2">
+      <button id="menu-btn">
+        <%= image_tag 'menu.svg', alt: 'back arrow' %>
+      </button>
+      <h2 class="text-white">CATEGORIES</h2>
+      <%= link_to '#', class: "text-white" do %>
+        <%= image_tag 'search.svg', alt: 'search icon' %>
+      <% end %>
+    </header>
+
+    <div class="flex flex-col px-5 py-5 gap-2 flex-grow overflow-y-auto">
+      <% if @categories.empty? %>
+        <p>There are no categories yet.</p>
+      <% else %>
+        <% @categories.each do |category| %>
+          <div class="w-full">
+            <%= link_to category_expenses_path(category) do %>
+              <div
+                class="flex gap-2 items-center bg-white rounded-lg shadow-lg p-2"
+              >
+                <%=
+                  image_tag category.icon,
+                            alt: 'category image',
+                            class: 'w-16 h-16'
+                %>
+                <div class="flex-grow">
+                  <p
+                    class="flex justify-between font-bold text-sm text-accent-100"
+                  >
+                    <span><%= category.name %></span>
+                    <span><%=
+                        number_to_currency(category.expenses.sum(:amount))
+                      %></span>
+                  </p>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="w-full mt-auto bg-secondary p-2">
+      <%=
+        link_to 'ADD CATEGORY',
+                new_category_path,
+                class:
+                  'block w-full text-center no-underline font-bold bg-transparent text-white border border-white p-2 rounded cursor-pointer'
+      %>
+    </div>
+  </div>
+</div>