Forem: Breon White

Phase-5 / Building an Online Store using Active Record Associations

Breon White — Mon, 13 Mar 2023 07:22:53 +0000

For my Phase 5 project, I decided to try building an online store --however, I definitely wanted this store to have a sense of community. I want users to have multiple roles. For example, as a single user, I wanted the ability to sell my own items as a seller and purchase items (sold by other users) as a buyer.

To do this, I would have to take advantage of Active Record Roles.

What are Active Record Roles?

Active Record roles are a way to define different roles or user types within an application and assign specific permissions or behaviors to those roles. In a multi-role application like the online store I was building, where users may have different abilities and access levels depending on their role, Active Record roles can be a powerful tool for managing and controlling user behavior.

For example, in my online sneaker store, I want to have two main user roles: buyers and sellers. Buyers will be able to view and purchase products..

While sellers will be able to create and manage products, view total sales.

Why Roles are Better

D.R.Y. By using Active Record roles, you can easily assign these different permissions and behaviors to each role, without having to write complex authorization logic throughout your application.

Setting Up My Database

Every great application has an even greater database behind it. So I started with setting up my database migration using Rails. I created this migration by adding foreign keys for the seller_id and buyer_id roles to my users table.

rails generate migration CreateUserRoles seller:references buyer:references

These columns will be used to reference the User record for the seller or buyer associated with a given product listing or purchase through foreign keys.

Setting Up My Models

In my User model, I defined the associations for the seller and buyer roles using the has_many method:

class User < ApplicationRecord
    has_secure_password

    has_many :listings, foreign_key: :seller_id
    has_many :purchases, foreign_key: :buyer_id
end

Setting Up My Controller

Now that I've set up my roles and associations, I can use them to implement role-based functionality in my web store application.

For example, if a user is a seller, they should be able to create and manage listings in the store:

(There's probably a better way to write this, but we can save that for another blog)

def create
        seller = current_user
        sneaker = Sneaker.create(sneaker_params)
        listing = Listing.new(listing_params)
        listing.seller_id = seller.id
        listing.sneaker_id = sneaker.id

        if listing.save
          render json: listing, status: :created
        else
          render json: listing.errors, status: :unprocessable_entity
        end
    end

The same would go for purchases. I can set up my purchases controller to associate the buyer_id with the current_user.id.

Pretty cool! Although this was little confusing to grasp at first, it's still great to know about this feature! From here, I can continue building special feature in my application based on the user's role.

Phase 4 - Improving User Experience using React.lazy

Breon White — Thu, 09 Feb 2023 14:34:36 +0000

Although a 'visually appeasing' frontend application is not really a requirement for most of our coding bootcamp projects, as a creative, I just can't help myself sometimes. Even as a junior engineer, I believe the overall user experience is important.

For my recent project, Buckit, a bucket list management app, I wanted to step it up a little by adding some background images to the app. I'm no css expert, but I found a hacky way to add background images using MUI:

import Box from '@mui/material/Box';
import sky1 from '../images/sky1.jpg';

<Box
      style={{
      backgroundImage: `url(${sky1})`,
      backgroundSize: "cover",
      height: "100vh",
      ....
    }}>

Looking good, but moving slow

Unfortunately, immediately after adding the images, the performance of the site was very noticeable. Directing between pages would take a few seconds to load the background and since this project was using Rails authentication between routes, I figured my application just needed a few more seconds to think.

Creating a (DRY) Loading Page

Since adding these background images were just a 'nice to have' and a bit out of scope, I didn't want to go down a rabbit hole trying to make the site overly efficient --(we can come back and do that later). However, the question still remained --how can I create a simple loading page while keeping my code clean?

That's when I discovered React.lazy.

The React.lazy function lets you render a dynamic import as a regular component...

After reading react's documentation, I got to work on my application!

Refactoring my App.js file

I started by importing Suspense from React in my App.js file:

import React, { Suspense } from 'react';

Next, I removed my importing components and assigned them to variables instead using the React.lazy feature.

Before:

import React, { Suspense } from 'react';
import Home from './containers/Home';
import Item from './containers/item/Item';
import Items from './containers/item/Items';

function App() { ...

After:

import React, { Suspense } from 'react';

function App() {
  const Home = React.lazy(() => import('./containers/Home'));
  const Item = React.lazy(() => import('./containers/item/Item'));
  const Items = React.lazy(() => import('./containers/item/Items'));
....

Lastly, I wrapped everything in the Div in the Suspense component imported from React.

function App() {

  const Home = React.lazy(() => import('./containers/Home'));
  const Item = React.lazy(() => import('./containers/item/Item'));
  const Items = React.lazy(() => import('./containers/item/Items'));

  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}> 
      <UserProvider>
      <Navbar />
        <Routes>
          ...
      </Suspense>
    </div>

For now, I just went with a 'Loading...' placeholder as the fallback --but it's cool to know that you can design a custom loading page in the future if you want

& that's it! SO EASY. A few line changes in ONE file. No refactoring my Routes, no impacts on my context or the rest of my application.

Now, when the page is loading you'll see the small 'Loading...' text for a split second. Thanks React!

Phase 3 - Updating and Dropping Databases using Active Record

Breon White — Fri, 11 Nov 2022 21:46:49 +0000

For this project, we had to build an application that uses Active Record to interact with a database. I decided to go with a task management application for Podcast planning titled Podtask. This tool will allow users to document their podcast topics, featured guests, and tasks to complete for a successful episode release.

One requirement for this project is that the database has to have at least two models with a one-to-many relationship.

One-to-Many Relationships

For context, in relational databases, a one-to-many relationship occurs when a parent record in one table can potentially reference several child records in another table. When I started this project, I created 3 database migrations:

a table for Podcasts (Parent Record*)
a table for Tasks (Child Record*)
and a table for Lists, which was associated with the Podcast ID and a task ID

However, while working through my project, I quickly noticed that I didn't need to use the List table in the database. This is when I had to refresh my memory on how to delete a table, as well as deleting columns from a table.

Delete Column from Database Table

To get started, you have to run a new migration for removing the column. The Tasks table we'll be working with first has the following build in it's migration:

class CreateTasks < ActiveRecord::Migration[6.1]
  def change
    create_table :tasks do |t|
      t.integer :podcast_id
      t.integer :list_id
      t.string :to_do
      t.string :todo_status
      t.timestamps
    end
  end
end

The column we will need to remove is list_id.
I ran the following code to start the migration, and made sure the name included details about the action we wanted to take place:

bundle exec rake db:create_migration NAME=remove_column_from_tasks

Once the migration was created, I followed the instructions found on the Ruby on Rails - Active Record Migrations online guide. To remove a column, we will be using the remove_column statement.

remove_columns(table_name, *column_names, type: nil)

With our statement in place, this is what our migration looks like:

class RemoveColumnFromTasks < ActiveRecord::Migration[6.1]
  def change
    remove_column :tasks, :list_id, :integer
  end
end

Alright, with everything in place we can run this migration using the following command:

bundle exec rake db:migrate
Success! By checking the schema.rb file, we can confirm the column was removed.

Delete Column from Database Table

For deleting an existing table, we can pretty much follow the same steps above except we would be using the drop_table statement instead of the remove_column statement.

After creating a migration...
bundle exec rake db:create_migration NAME=drop_lists_table

...we can set up our migration with the following build:

class DropListsTable < ActiveRecord::Migration[6.1]
  def change
    drop_table :lists
  end
end

Lastly, I ran the bundle exec rake db:migrate command and checked the schema.rb file - success again! Our table was removed.

Migrations Are Our Friends

I'll admit, I was a little comprehensive about making adjustments to the database - especially after already building most of project.

However, I learned that migrations aren't scary. Even with proper planning before starting a project, things happen and there are plenty of resources are your fingertips to guide you through.

Phase 2 - Understanding React's RESTful Routing

Breon White — Fri, 22 Jul 2022 16:57:42 +0000

When I started building my first ever front-end application using React, I hadn't really grasped the importance of RESTful routing just yet. My application, Stream-Mii, was a simple webform that allowed users to search for their favorite shows using a public API and assign the series to a day of the week. Users could then go back and view which shows they had planned to watch on that particular day.

Keeping Routes Simple

I remember learning that routes should be kept simple, but why? After doing some research, I learned that there is a specific (and highly appreciated) reason why routes should be kept simple - and how all of our applications are connected in a larger picture.

What is RESTful Routing?

REST stands for Representational State Transfer. The formal definition for REST is 'a term exchanging data in well-defined formats in order to increase interoperability'.

What this means is that across different languages, there is a set structure in place for handling the different HTTP methods.

HTTP is considered stateless, so when we navigate from one page to another in an application, HTTP doesn't retain any information between the pages. As a developer, we have to implement code to let the application know how to respond to these changes.

Why is REST so appreciated by developers?

Standardization. Before REST, developers would create unique names for each route. That means that every application would have a unique structure for routes. With the number of applications available today, you can only imagine how unsustainable this approach was. However, REST really showcases how connected our applications are.

When you think about everything that we do on the web, it's hard to believe that all of those things can be boiled down to 7 primary actions. This helped me structure my routes for Stream-Mii:

- GET: (/shows - returns a collection of saved shows)
- NEW: (/shows/new - returns a form to add a new show)
- POST: (/shows/new - saves a new show to the database)

With this structure, if I wanted to build on to my application in the future, I could use:

- SHOW: (/shows/:id - returns an existing show with the show details)
- EDIT: (/shows/:id/edit - returns a form to edit an existing show)
- PATCH: (/shows/:id - updates an existing show in the database)
- DELETE: (/shows/:id - deletes an existing show)

Phase-1 Project: CAP KEEPS

Breon White — Thu, 24 Feb 2022 05:26:30 +0000

"Find, save, and easily create photo captions in minutes. No cap."

As a student at Flatiron School, for my Phase-1 project I created a front-end web application that allows music and social media enthusiast to save Instagram captions for future posts using either song lyrics returned from a public API or manually entered to create custom captions of their own.

BACKSTORY

You've picked the perfect post-worthy picture, now you're left with the question "What should my caption be?" This is a question I hear way too often amongst my group of friends. With a quick Google search, you can see there are thousands of websites catered to Instagram captions alone and it's no secret that song lyrics make some of the best captions. This tool I created removes the extra decision making and researching before your next Instagram post. You can access your personal vault of save captions with ease.

HOW IT WORKS

When searching for captions using CAP KEEPS, users can input a string of words in the front-end web form. CAP KEEPS takes that string and generates a custom URL that is used in a Fetch method directly to Genius Lyrics API, a public lyric database.

The fetch request returns the 5 top lyric results in an array. The tools then maps through that array and creates an object using the returned lyric snippet, song, artist, and artist image which are then displayed in an unordered list to the user.

As a user, you have that option to 'Keep' or 'Unkeep' captions returned in the search results. Kept captions are pushed to the database (and when you 'Unkeep' a caption, it's removed from the database).

When you click on "My Captions", similar behavior happens when search results are returned. For each caption stored in the database, it creates an HTML element using the object data and appends it to an unordered list. Here, users can manage their saved captions which includes favoriting ('Like' heart), copying lyrics to the clipboard, or deleting the caption (which uses a method to remove the HTML element and delete the caption from database).

OVERCOMING OBSTACLES

At first attempt, fetching data from a public API was a little intimidating. I used Rapid API for the first time, a public API hub that was very beginner-friendly. Rapid API allows you to test endpoints and preview the type of response you would receive from the fetch request. This gave me the opportunity to experiment and get an idea for the method I would I need to create for mapping through this response.

In order to generate the URL for the fetch request to Genius API, I had to create a special method that takes the string provided in the input field and replaced spaces with '%20' (thank you late night Google searches!). An example of the code I mimicked can be found here.

TAKEAWAYS

It doesn't have to look nice right away, just get it to work! (MVP and Pseudo)

I've always been big on presentation but during this process, the MVP technique was my savior. Step by step, I would write out exactly what I was trying to do, when I wanted this to happen in my code. As my code grew longer and longer, going back to the MVP technique really helped me get my thoughts down and stay organized. There's always time to go back and clean things up.

Set boundaries and know when to ask for help.

I love programming, but almost too much sometimes. During this project, when I was deep in a solve, I found myself spending hours diving through resources to find a solution. I learned how important it is to stop and know when to ask for help or get a second opinion (no matter how much fun you're having trying to find the answer on your own). Having my MVP written out made it even easier to ask questions since I knew exactly what I was trying to do. Time management and asking questions is key for productivity.

Methods save so much time.

Working on this project really highlighted how repetitive code can be when you're writing it. I learned there's almost always a flexible method you can create to handle almost anything for your app. I'm excited to continuing building on these skills to have clean code.

If you're interested in viewing CAP KEEPS, checkout my repo: https://github.com/breonwhite/phase-1-project-cap-keeps
Youtube: https://youtu.be/OSLuZkXDnXQ