Forem: Nicholas Mendez

How to Configure Active Storage with Amazon AWS S3 Cloud Storage

Nicholas Mendez — Wed, 28 Sep 2022 19:58:25 +0000

Active Storage Overview

Active Storage is a ruby gem that facilitates uploading files to a cloud storage service and attaching those files to Active Record objects. Testing and development environments have a local disc service option for storing files locally. Active Storage utilizes naming conventions similar to Active Record , making it very intuitive and easy to integrate into any Ruby on Rails application.

Final Result

Please feel free to visit my gitHub repository or my website to see the the results of this tutorial.

Website: https://extrackt.onrender.com/
Repository: https://github.com/nickmendezFlatiron/extrackt

If you already have Active Record installed , navigate down to the "Configuring Active Storage for S3" section.

How To Setup Active Storage

I highly recommend planning out your application prior to installing Active Storage. Map out your models, attributes, associations, and routing logic. I recommend using an entity relationship diagram (ERD) to map out your model/table relationships dbdiagram. Build out a frontend that can capture files for you to test and troubleshoot Active Storage.

1) Install the Active Storage gem from your terminal , or add the Active Storage gem to your Gemfile and run bundle install



gem 'activestorage', '~> 7.0', '>= 7.0.4'

2) As an option , install Active Storage Validator to add validations to your Active Storage uploads



gem 'activestorage-validator', '~> 0.2.2'

3) Migrate the Active Storage auto generated tables to your database



rails db:migrate

4) Create and migrate the rest of your Models , preferably using a scaffold or resource generator. When using generators , Active Storage attachments follow the convention below. Use the attachments (plural) to setup a one-to-many relationship between records and files



rails g resource User avatar:attachment photgraphs:attachments

At this point , your app_name/app/db/migrate folder should look similar to this

4b) Alternatively, open your model and define the attachment directly in the model. Setup a one-to-many relationship between records and files using the has_many_attached naming convention



class User < ApplicationRecord
  has_one_attached :avatar
  has_many_attached :photographs 
end

Configuring Active Storage for S3

1) Add the AWS S3 Gem to your Gemfile and run bundle install



gem "aws-sdk-s3", require: false

2) Set your Active Storage service in config/environments folder

to use S3 service in your development and production environment , include the following code in your config/environments/development.rb and config/environments/production.rb files. ```

Store files on Amazon S3.

config.active_storage.service = :amazon

- if you'd like to store files locally in your development environment, copy/paste the following code in your config/environments/development.rb file.

config.active_storage.service = :local

3) Inside your config folder , create a storage.yml file if one does not exist. 
![storage.yml file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i6ei8q5la2et9e7p41b.png)
- Inside the config/storage.yml file , copy/paste the following code. We will enter a bucket and region in a later step

local:
service: Disk
root: <%= Rails.root.join("storage") %>

test:
service: Disk
root: <%= Rails.root.join("tmp/storage") %>

amazon:
service: S3
access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
bucket: "bucket_name_here"
region: "your_region_here"

4) Login to your AWS account or [create a free account.](https://aws.amazon.com/s3/pricing/?loc=ft#AWS_Free_Tier)

5) Under the services tab, navigate to the S3 
![Amazon S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqtgcodiapftc02fekku.png)

6) Create a New Bucket by clicking the orange Create Bucket button
![create bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vig3r9z3czityo21y80p.png)
7) Under General Configuration:
- use your application's name as the bucket name.
- Select the region which is closest to your location.
![general config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvgjougv40injn0n7l9x.png)
8) Leave default settings for the rest of the bucket and click the create bucket button on the bottom of the page.

9) Inside the config/storage.yml file from step 3 , enter the bucket name and region from the bucket you created.
![myrails app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sd2dc1329yfr3ftniyu3.png)
![VS code rails app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg5cr896dne1jfi8v3v0.png)

10) Navigate back to your AWS website tab and select IAM under the services tab. Click on Users and then click on the blue Add Users button
![AWS IAM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxedwocyp3n73e4aq5hl.png)
![AWS Users](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/px6ui3f7t2iy3ppd5b36.png)
![Add users](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8oa1l7gjoj2ljvdxelh7.png)

11) Use your application's name as the user name and select programmatic access.
- Select Attach Existing Policies tab and search for S3. 
- Select the Amazon S3 Full Access policy.

![step 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqw7nih0oo2p909vmi2g.png)
![S3 Access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fo32mvy33cqhcgkdu9i3.png)

![User](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzxlmd8xssyih4dir4j3.png)
12) Navigate back to your IDE and open a terminal. cd into your root directory folder and run the following command.
- We will be adding our AWS S3 user information into an encrypted file because we do not want to store sensitive information in plain text.

EDITOR=VIM bundle exec rails credentials:edit

- Note: If you encounter an "Couldn't decrypt config/credentials.yml.enc. Perhaps you passed the wrong key?" error , delete the config/credentials.yml.enc file and rerun the command.

13) Inside the VIM editor , press the i key to edit the contents inside the terminal window. 
- copy/paste the secret access key and access_key_id from the S3 user you created.
- make sure to uncomment 
![VIM Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy8fh8y4h3zjrku000q8.png)

14) Press the escape key and then type :qa to exit and save the file

At this point , everything is set up. If you plan on deploying your project , make sure to commit and push to your Github Repo. Once you have a URL for your live application , configure CORS in your S3 bucket under the Permissions tab. Here is a CORS configuration example

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"POST",
"PUT"
],
"AllowedOrigins": [
"https://www.example.com"
],
"ExposeHeaders": []
}
]


---
Resources
- [Active Storage Guide](https://edgeguides.rubyonrails.org/active_storage_overview.html#attaching-files-to-records)
- [Amazon AWS](https://aws.amazon.com/s3/)
- [AWS CORS Configuration](https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html)

Heroku Alternative: How to Deploy A ReactJS Rails API App to Render

Nicholas Mendez — Wed, 28 Sep 2022 01:06:15 +0000

The Fall of Heroku

Heroku recently announced they are discontinuing some of their free plan options starting November 28. Free plans widely popularized Heroku as a go-to platform as a service (PaaS) for developers to deploy their applications and APIs. Consequently, many hobbyists, programming courses, and existing Heroku projects are looking to migrate to a comparable alternative. After spending time weighing out the available options , I decided to deploy my future projects to Render.com .

Why Choose Render.com?

Render.com provides free plans for deploying static sites , web services with HTTP/2 and full TLS, PostgreSQL databases, and Redis integration. The deployment process is beginner-friendly and the documentation is easy to follow. Upgrading to a starter plan costs less than a monthly Spotify account. Setup an AWS S3 bucket for file storage, and you have yourself a great starting point for any application at no cost.

If you're starting from a ground zero, follow these instructions to setup your environment to ensure the deployment goes smoothly. If not , skip down to "Configuring Your App for Render"

Create A React Rails API App from scratch

create a Rails API in a new project folder
rails new app-name --api --minimal --database=postgresql
cd into the folder and run the following command in terminal
bundle lock --add-platform x86_64-linux --add-platform ruby
Build out an MVP with routes , controllers, models , migrations, and create a database.
create a new React application in a client folder inside the root directory
npx create-react-app client --use-npm
Add a request proxy inside the client/package.json file
"proxy": "http://localhost:3000"
Update the start script in client/package.json file
"scripts": { "start": "PORT=4000 react-scripts start" }

At this point , your file structure should resemble something like this, minus a few optional folders and config files, which we will soon add.

Configuring Your App for Render

Now you're ready to configure your app to deploy it to Render.
Follow the following steps to configure your application for deployment.

1) Sign up for Render.com.

2) Open config/database.yml file and find the production section.

Modify it to gather the database configuration from the DATABASE_URL environment variable.
This should be located at the bottom of the file.

production:
  <<: *default
  url: <%= ENV['DATABASE_URL'] %>

3) Open config/puma.rb and make sure the following lines are uncommented.

Feel free to clear out the file and copy/paste the code block below.

max_threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
min_threads_count = ENV.fetch("RAILS_MIN_THREADS") { max_threads_count }
threads min_threads_count, max_threads_count

port        ENV.fetch("PORT") { 3000 }

environment ENV.fetch("RAILS_ENV") { "development" }

pidfile ENV.fetch("PIDFILE") { "tmp/pids/server.pid" }
workers ENV.fetch("WEB_CONCURRENCY") { 4 }
preload_app!
plugin :tmp_restart

4) Open config/environments/production.rb and enable the public file server when the RENDER environment variable is present.

This is an existing line of code in the file , which we are modifying.

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? || ENV['RENDER'].present?

5) Create a build script to build out your app when you deploy it.

This script will automate the build process and update your application every time it is deployed.
inside your app-name/bin folder , create a file called render-build.sh
copy/paste the following code into the render-build.sh file

#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
# clean
rm -rf public
# build
npm install --prefix client && npm run build --prefix client
# migrate
bundle exec rake db:migrate
# postbuild
cp -a client/build/. public/

your file should look like this when you're done

6) Make sure the script executes by running the following command in terminal.
chmod a+x bin/render-build.sh

7) Commit and push these changes to your GitHub Repository

Deploying To Render

8) Inside the root directory , create a file name render.yaml. Copy/paste the following code into the file. Replace app_name with your application's name

databases:
  - name: app_name
    databaseName: app_name
    user: app_name

services:
  - type: web
    name: app_name
    env: ruby
    buildCommand: "./bin/render-build.sh"
    startCommand: "bundle exec puma -C config/puma.rb"
    envVars:
      - key: DATABASE_URL
        fromDatabase:
          name: app_name
          property: connectionString
      - key: RAILS_MASTER_KEY
        sync: false

The file should look like this when you're done.

9) Commit and push these changes to your GitHub Repository

10) Navigate to the Render website and make sure you're logged in. On the Render Dashboard, go to the Blueprint page and click the New Blueprint Instance button. Select your repository (after giving Render the permission to access it, if you haven’t already).

11) Your repository branch should already be set to "main", or select whichever branch you want to deploy. I used my "main" branch.

12) In the deploy window, set the value of the RAILS_MASTER_KEY to the contents of your config/master.key file. Then click Approve.

13) Navigate to your Dashboard and click on the web service you just created.

14) Click on the blue Manually Deploy button on the top right hand side and select "clear build cache and deploy"

15) Wait for your app to successfully deploy and click on the generated URL your_app_name.onrender.com at the top.

And that's how you deploy a full-stack React/Rails API application to Render. If you have any questions , feel free to drop a comment below. If you're a Flatiron Student, drop a comment below if this has helped you.

To see the final result, visit my gitHub repository and Render website if you'd like.

Website: https://extrackt.onrender.com/
Repository: https://github.com/nickmendezFlatiron/extrackt

Resources

Getting Started with Ruby on Rails on Render

The Pitfalls of the Destroy Method in Active Record

Nicholas Mendez — Thu, 25 Aug 2022 21:13:11 +0000

The Slippery Slope Of Associations

The Association Principle is when we mentally connect things together , and then automatically follow the links we have created. We create associations to simplify our decision making process. And sometimes , the associations we create are wrong.

Here's a scenario. You go to the store to buy refreshing bottle of cold-pressed juice. You find one in the fridge and proceed to read the ingredients. Then, you see another flavor on the shelf and decide to buy that instead. By the time you get in your car , you notice the juice you bought is made from concentrate. Tsk tsk , you didn't read the ingredients the second time.

Well , what happened? You mentally associated the second juice with cold-pressed juices. Why? Because it was positioned next to the original bottle you picked up. Thus , you did not read the label and ended up with an undesirable outcome.

Learning occurs through the failures which we experience , not our successes. And similarly to the juice fiasco , I learned the pitfalls of the association principle while using Active Record's destroy method.

What is Active Record?

Active Record is a very powerful ORM in the Ruby on Rails library. It uses the convention over configuration paradigm to facilitate DRY code ,allowing the developer to focus on higher order tasks. Some of the most powerful macros within Active Record are Associations.

Associations are a set of macro-like class methods for tying objects together through foreign keys

Associations unlock a multitude of class methods, which make it easier to interact with and manipulate associated records through the relationships established between data tables. One of these methods being the destroy method. Let's explore the intricacies of the destroy method through a few examples I pulled from my most recent project , Flood Mail.

Flood Mail is a messaging platform built around game theory principles. Each user has complete control over their data. Delete a message , and it is deleted for both users. If a user deletes their account , then all associated data is deleted too.

Table Associations

If you're not familiar with table associations ,check out this page here.

Calling Destroy on an Object

According to the Ruby docs , the destroy method "Deletes the record in the database". Simple enough. We call it on an instance and ActiveRecord removes it from the database.

For the sake of this example , let's assume the Email Threads table is not referenced in any other table. The destroy method will function as follows.

Now , in the context of Flood Mail's backend, Email Threads are referenced in 2 other tables : Messages , and User Email Threads. Unless we setup the proper associations , the destroy method will throw an error.

In this example , Rails is attempting to save us from ourselves. If we remove the object in the example above , then we will have orphaned records in the dependent database tables.

Using Destroy Method with Associations

To remedy this , we use dependent: :destroy option inside our Email Thread model. Now , whenever we destroy an Email Thread , the destroy method will be called on all associated records as well. The result of calling the destroy method is slightly different now , but it's easy enough to remember.

Using Destroy Method with Join Tables

This example builds on the previous. We assume we have all the proper associations setup in our Models; therefore, we shouldn't receive any errors or orphaned messages. We want to destroy all the associated messages for our selected email thread. Since this is a collection of messages, we use the destroy_all syntax.

Destroy and destroy_all will always call the destroy method of the record(s) being removed so that callbacks are run.

Our destroy method has now removed every record in our collection of messages. If we try to find one of the deleted records ,we should expect an error.

Using the Destroy Method on Join Tables PT.2

Let's apply the same logic from our previous example to a user object. We'll assign the first user the variable user , and we'll delete the user's collection of email threads. Exactly as we did with the messages collection in for email thread.

And now if we try to find one of the deleted email threads , we should expect an error. Right?

The "Gotcha" Moment

Yet again we've been bamboozled by the association principle. Why are we able to find the record , it should have been destroyed? Well , let's dive into the Ruby on Rails docs to find out what actually gets deleted when we use these methods.

As it turns out , the join records are being deleted. If we want to delete the associated records themselves ,we will need to iterate over our collection and call the destroy method on each object.

user.email_threads.each {|e| e.destroy}

In Conclusion

By now , we've learned to should measure twice and cut once. By understanding what the destroy method is doing in different use cases , we'll avoid the possibility of creating orphaned records and corrupting our database tables. We've learned how to setup the proper associations to delete records and their dependents , as well as any other associated records using Active Record methods.

Resources

Flood Mail Repository
Active Record Associations
Ruby on Rails Active Record Documentation

ActiveRecord Methods to keep Your Databases Clean

Nicholas Mendez — Wed, 27 Jul 2022 02:46:00 +0000

Contaminated databases are a drag on performance.

In machine learning , datasets contaminated with duplicates cause models to learn artificial patterns that do not exist. In the real-life context of emergency dispatch call centers, multiple calls about the same complaint cause multiple officers to respond to the same incident.
Consequently , misallocated resources resulting from poor dataset structure create larger problems than originally encountered.

The solution is naïvely simple : Don't enter conflicting records in our dataset.

While the constraints and parameters of every dataset will vary , the general process and application of said solution is the same.

Identify which parameters will be used to find existing records in your model's dataset.
Uniquely identify each entry when submitting an entry/record.
Handle all responses from querying the dataset.

Simple enough , right? Fortunately, ActiveRecord offers a few finder methods. These methods allow us to determine whether or not a conflicting record exists prior to entering a new record into our database.

Let's explore how to maintain a stable and clean database through practical examples.

Queue Wag n' Walk , a schedule planner tailored to dog walking. There are a few different headaches that will come from contaminating the database ; let's identify the different entries that may compromise our table of appointments.

This example requires a basic understanding of ActiveRecord gem , table associations , and SQL tables.

1. Identify Useful Parameters

Each scheduled appointment has 4 different user inputs ; a date/time , a dog , a walker (employee) , and the walk duration. A few potential scheduling conflicts should stand out:

Scheduling a walker for a time slot that conflicts with their current appointments
Scheduling a dog for a time slot that conflicts with their current appointments
Scheduling the same appointment twice

The first method to consider is the find_or_create_by method.
This method either finds the first record with the provided attributes, or creates a new record if one is not found. This method used on its own is useful when we're searching for an exact record , or when our dataset is simple.

Appointment.find_or_create_by({ 
employee_id: params[:employee_id] , 
start: params[:start]})

If no record with the provided employee id and starting appointment date/time is found in our Appointments Table, then a new record is entered.

If we attempt schedule an appointment while an existing appointment is in progress , our find_or_create_by method will not notice and will enter a conflicting appointment for our walker into our schedule.

Method Chaining

The second method to consider is actually a combination of multiple methods, known as method chaining. By method chaining , we are able to apply multiple conditions to vet and find records in our database.

.where Method

exist = Appointment.where({
      start: params[:start] , 
      dog_id: params[:dog_id]
      })

.where selects all records that match the attributes passed to the method. In this case , exist will equal all appointments with the start time matching the provided start time , and the dog id matching the dog id.

.or Method

 exist = Appointment.where({
      start: params[:start] , 
      dog_id: params[:dog_id]
      }).or(Appointment.where({start: params[:start] , 
            employee_id: params[:employee_id]}))

Chain the .or method to add a second condition to your query. In this case , we are looking for any appointment matching the provided start time and dog id , or any appointment matching the provided start time and employee id.

.find_all Method

appt_in_progress_dogs = Appointment.all
.find_all {|a| a[:dog_id] == params[:dog_id]}

The find_all method returns an array containing the records selected for which the given block returns a true value. In this case , we are finding all records from the Appointments table whose dog id matches the provided dog id.

.between? Method

appt_in_progress_dogs = Appointment.all
.find_all {|a| a[:dog_id] == params[:dog_id]}
.find_all {|a| params[:start].between?(a[:start] , a[:end])}

The between method returns a true or false value. It determines whether or not a value is between a provided minimum or maximum. In this case , we want to find all records with a dog id matching the provided dog id. Then , out of those records , we want to find all cases where the new appointment starts while an existing appointment for the provided dog is in progress.
In other words , we do not want to schedule a walk for a dog if the dog is in the middle of a walk. The same case applies for any walker (employee).

.find_in_batches Method

Appointment.find_in_batches(batch_size: 1000) do |a|
       a.find_by({start: params[:start]}) 
      end

The find_in_batches method is useful when working with large datasets. Provided the size of a batch , this method will only query the provided batch size at a time. This method will cut some of the performance issues that occur from working with larger datasets.

We are able to be more intentional and specific about the types of records we want to find through method chaining.

2. Uniquely Identify Records

This answer is fairly simple with Active Record. By using Active Record Migrations , a primary key column is automatically generated , and each record entered to our table is assigned a unique id.

3. Handling Query Responses

Now that we've queried the appointments table , we will conditionally respond to the user's new appointment request.

IF Statement

if !exist.exists? &&[*appt_in_progress_dogs,*appt_in_progress_walkers].length < 1

The IF statement in our POST method makes use of the queries we executed. If the new appointment request does not match any existing record exactly , then it passes the first condition in the IF statement. The .exists? method returns true or false. In this case , if no record exists , then we proceed to test the second condition.

The second condition of the IF statement utilizes the splat (*) operator, which functions similarly to Javascript (ES6) spread (...) operator. If no appointments in progress are found for the provided dog or walker, then the length of our array will be zero.

If both conditions are met , then a new Appointment will be created with the provided attributes sent by our front end and our response will be sent as a JSON object.

Else Statement
If either of the conditions return false , then our backend will send an error message response as a JSON object. Some errors may be more complex than others , and therefore , you may setup multiple conditions for multiple errors.

   fetch(`http://localhost:3005/appointments` , {
      method : 'POST' ,
      headers: { "Content-Type" : 'application/json'} ,
      body : JSON.stringify(newAppointment)
    })
      .then(r => r.json())
      .then((appointment) => {
        if(Object.keys(appointment).length === 1) {
          alert(appointment.error)
        } else {
          setAppointments([...appointments , appointment])
          alert(`Appointment for ${newDate} at ${time} has been scheduled`)
        }
      })

Given the response received from our initial POST request , we alert the user of either a successfully scheduled appointment or with an error we sent from out backend.

The same queries and conditions may also be applied to PATCH request. We also need to validate whether updating an existing appointment will cause the same contamination as our POST request.

In Conclusion

ActiveRecord provides many useful methods for querying our databases. Chaining methods allow us to be more intentional and specific with our queries. Determine whether or not a conflicting record exists in our database , and conditionally respond to the possible outcomes.

Resources

How to Deal With Duplicate Entries
CS: Duplicate Records
What is Data Cleaning
Ruby on Rails Docs
Active Record Migrations Docs

How to Setup Dynamic Routing in React to Improve UX

Nicholas Mendez — Thu, 05 May 2022 23:45:19 +0000

Learn:

Why consistency within your app improves user experience
How to utilize structure to create consistency
How to implement dynamic Routing with React Router to make your app predictable

The Two C's: Consistency and Comfortability

We have all heard the proverbial statement "If you build it , they will come". By strategy and research we determine why "they" , or the target user, "will come". We then build out an application to satisfy the "why", no matter how meaningful or trivial it may be. Now I propose a new quote , "If they come , how long will they stay ?".

I bet you've shopped on Amazon before. No matter what product you want to fund, you use the same procedure. Enter a search keyword, sort the products, read a couple of reviews, add to cart , and checkout. Easy enough.

It's this level of consistency that reinforces a positive user experience. If we deliver a consistent experience , then the user will have consistent expectations. Our decisions are easier to make when we know what to expect. Consequently , our user will become very comfortable with using our app. How the user interacts and responds to your app is what defines the user experience.

How to Achieve Consistency with React

Much like Amazon , we want our users to stay. To show how to implement these principles , I built Order Pro.

Order Pro is an order management app tailored to small retail businesses. It allows users to create orders and record customer information. All of the orders are stored in a local database, which the user can access through a table of orders.

Major Key🔑 Alert: Structure your database before diving into the IDE. Know how you're going to store data before capturing and displaying it.

First , we need to capture the order information. We already know what information we need to capture because we've structured our database. And we capture this information with a controlled form. If you're not sure on how to setup a controlled form in React , I recommend this post on how to build a controlled form using React. We push every new order to a local JSON server file "db.json" as an object.

{
  "orders": [
    {
      "name": "Johnny Appleseed",
      "email": "johnE@email.com",
      "date": "2022-04-01",
      "number": 1003,
      "items": [
        "3 shirts",
        "2 tables",
        "1 bag of soil"
      ],
      "fulfilled": false,
      "id": 1
    }
  ]
}

Static Routes vs Dynamic Routes

We've stored the array of order objects in State. Using React Components, we've created re-usable blocks of code to uniformly display each order. Every order is displayed as its own table row. We've even created a nice search bar feature to help our storeowner find an order.

Up until this point , we've used static routes to render our page components. Our Order Form , Order Dashboard , and Homepage are all paths we had to manually route. We want every order to have its own URL , where the storeowner can view the information we couldn't fit in the dashboard.
Just as the table rows are automatically rendered, we also want our order pages to automatically route and respond to the order information we pass. We only need to create one component , OrderNumberPage , for all of the orders. Why? Because creating a static route for every order is as productive as catching wind in a jar.

<Fragment>
  <Navigation logo={logo}/>
  <Switch>
    <Route exact path="/orders">
      <Orders>
        <SearchBar orders={orders} setSearch={setSearch} setFilter={setFilter} search={search}/>  
        <OrderTable orders={orders} setOrders={setOrders} url={url} search={search} filter={filter}/>
      </Orders>
    </Route>
    <Route exact path="/create-order">
      <OrderForm orders={orders} setOrders={setOrders} url={url}/>
    </Route>
    <Route exact path="/">
      <HomePage logo={logo}/>
    </Route>
    <Route exact path="/orders/:orderNumber" >
      <OrderNumberPage orders={orders}/>
    </Route>
  </Switch>
</Fragment>

Now that you've put your jar down , let's import our OrderNumberPage component to our App.js file and append it to our Switch Component(shown above).
I've decided to route the Order Number Page component next to the other static pages because I only want to render the details for the selected order.
Taking a closer look at the URL for OrderNumberPage component , you'll notice the unique identifier :orderNumber. This value will indicate the selected order to render. Later on , we will use the useParams Hook to access our orderNumber identifier.

Generating Dynamic Links

Let's take a look under the hood of the TableRow component to see how to generate the links to each order page.
In line 6 , I de-structure the order object passed to this Component as props. In line 34 , I use the number key and interpolation to generate a URL for each order. If the order number for this Table Row is 1011 , then the URL will be "/orders/1011".
Now that we have links for each order and a destination, we need some way to inform the OrderNumberPage which order information to display.

useParams Hook

Import the useParams hook into the OrderNumberPage component. The useParams hook returns an object with key/value pairs , one of them being the unique identifier orderNumber we setup earlier.
In line 9 , I assign the variable params to useParams(). params.orderNumber will allow us to access the URL parameter :orderNumber from the current route. If we click on the link for order 1011, the params.orderNumber will return 1011.
We'll use this value to find the order whose order number matches params.orderNumber , and in line 12 , filter it out of the list of orders. We then display the information for this specific order in the OrderNumberPage component.

Conclusion

We've setup a dynamic route with a unique URL parameter. We used React's useParams hook and our unique parameter to access a value , which we used to display specific information in our component. Using dynamic routing , we've created a consistent and predictable user experience. We've made our user's life much easier because the functionality of our app is predictable.

Here's a link to the Order Pro repo if you'd like to check it out.

Resource Recommendations
How Customers Think - Gerald Zaltman

Signals : A Simple Stock Market App

Nicholas Mendez — Sun, 27 Mar 2022 21:37:51 +0000

Signals began as a lofty idea to develop a platform for users who want to create and implement automated trade strategies, much like trading bots. Being quickly grounded by own coding ability, I shifted my focus on creating a beginner-friendly stock market tool, with room to develop. Just as I am very new to software engineering, there are many stock market novices who want to learn how trade stocks.
Even the entry level market tools available seem intimidating for a trading newbie. After looking through different trading and analysis platforms such as Tradingview, Yahoo Finance, and Bloomberg, I found a few fundamental components and packaged them into a less intimidating tool. I combined these tools, which provide relevant information to analyzing any market or security. These components are stock quotes, a market keyword search function, a watchlist, technical charting, a trade simulator, a portfolio manager, and trade transaction history. Signals.

Signals Homepage

I built signals with Javascript , using the Alpha Vantage API as a data source and Bootstrap 5 CDN for CSS styling. The Alpha Vantage API offers much more financial data than I needed, which allows for future additions and updates to Signals.
The most difficult challenge was creating "My Portfolio" , a stock portfolio based on the user's trade history. Keeping the target user in mind, I developed a simplified trading system. The trading system is simplified to only allow Long and Short trade positions. The user cannot hold opposing positions of the same stock (a form of hedging). Trades are taken at current market price of the traded asset. Here's how I turned a combination of both user inputs and API requests into an automated, up-to-date stock portfolio.

Overview

Provide the user with relevant information to make educated trading decisions.
Allow the user to either buy or sell any amount of shares for any given ticker symbol. Collect the trade information every time a user executes a trade and store it somewhere.
Use the stored data (trade history) to build the user's portfolio, also determining whether the user's position type in a given stock.
Legibly display the user's portfolio.

Note: Some basic understanding of Javascript is required to follow along with the code snippets provided and technical functionality.

1. Providing the User with A Stock Quote

Signals fetches a quote from the Alpha Vantage API and displays it to the user. Alpha Vantage uses different API functions, which determine the type of data is returned. The Quote Endpoint API function, which returns a detailed stock quote , requires a symbol, formally known as a ticker. A ticker is a letter abbreviation that acts as an identification code, specific to a traded stock or security on the market.

https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=SYMBOLHERE&apikey=demo

Quote Endpoint API URL

This presents challenge 1; what happens if I don't know the symbol? Fortunately, Alpha Vantage has a Search Endpoint API function , which returns the best-matching symbols based on keywords of your choice.

https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=KEYWORDSHERE&apikey=demo

Search Endpoint API Function URL

Capture the user's keywords with a form input named search bar, replace "KEYWORDSHERE" in the Search Endpoint URL with the user input, display a list of best matching symbols, and select the desired symbol from the list. Simple enough.

searchBtn.addEventListener('click',e => {
  e.preventDefault()
  const searchbarValue = searchbar.value 
  let url = `https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=${searchbarValue}&apikey=VXY7DLJ0XAQQON66`
  marketSearch(url)
})

function marketSearch(url)  {
  fetch(url)
    .then(res => res.json())
    .then(searchresults => {
      let bestMatchesArray = (Object.values(searchresults))[0]
      searchResultsMatches = []
      bestMatchesArray.map(bestMatch => simpleResults(bestMatch))
      appendResults(searchResultsMatches)
    })
}

With an event listener added to the search bar , Signals captures the user input and creates a usable url for the Search Endpoint API fetch request. The best matching companies are found with the marketSearch(url) function.
SimpleResults function cleans up the data from the fetch request and appends each match to the searchResultsMatches array. The appendResults function creates a legible list , which appends each search result stored in the searchResultsMatches array to the DOM (specifically the Toolbox Display), in a legible unordered list. Each list item is given an id , which is the ticker symbol of that specific search result.

searchResultsMatches Array with the user keyword AAPL

A click event listener is added to each list item, and the id of that event target (the ticker symbol) is used to create the Quote Endpoint API URL. Now Signals can use the results of the Search Endpoint API request to build a URL for the Quote Endpoint API Request.

function appendDisplay(e) {
  e.stopPropagation()
  let url = `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${e.target.id}&apikey=VXY7DLJ0XAQQON66`
  fetchStockData(url)
}

appendDisplay(e) function is called every time a click event fires from any given list item appended via appendResults function previously mentioned

The appendDisplay(e) function calls 2 other functions , organizeStockData(data) and printToDOM(stockDataObj).

function fetchStockData(url){
  fetch(url)
    .then(res => res.json())
    .then(data => {organizeStockData(data)
      printToDOM(stockDataObj)
    }) 
}

organizeStockData cleans up and organizes the data returned from a promise and creates stockDataObj. stockDataObj is then used by printToDOM to display a relevant stock quote to the user.

2. Creating a Trade Simulator

Collecting The User Trade Data

Main Display(left) shows the result of calling printTODOM, Search Results(right) displays the results of calling marketSearch function

The Main Display now displays actionable metrics used to speculate on the market and thus, execute trades. The righthand side of the Main Display shows all final information for a specific stock on the specified trading day. The lefthand graph displays intraday price movement and allows for technical charting with live data via Tradingview Widget.

Making use of an input element and a select element, Signals can capture 2 user inputs, which will later be used to create the trade history. The input allows Signals to capture the quantity of shares for a specific trade , and the select options determine whether the shares are being sold or bought.

Storing The User Trade Data

Every trade is then stored in a local database file db.json array "trade-history".

The variable tradeQuantity selects the input we created with printTODOM , which captures the quantity of shares the user will be trading. Variable tradeOptions refers to the select element with the type of trade the user is exercising (Buy or Sell).

An event listener is added to tradeQuantity , specifically a keypress event. Once the event is fired, object newTrade is created. Using the stockDataObj made earlier, Signals stores a few different key/value pairs in newTrade. newTrade now holds the price of the traded symbol, date of the trade , ticker symbol traded, the trade type, and quantity of shares traded. All of this information is relevant to the user for refining trade strategies.
Not every keypress event creates meaningful trade. I used if then statements to determine when it should post newTrade in the "trade-history".

"trade-history" updates when the keypress event is fired by the enter button , and the quantity of shares is positive. Then, newTrade is posted to the "trade-history" database, and the user is alerted that their trade was successful. Any unsuccessful trade prompts an alert message, informing the user to enter a positive integer in tradeQuantity.

function updateDatabase (newTrade, db = 'trade-history') {
  fetch(`http://localhost:3000/${db}`, {
    method: 'POST' ,
    headers: {
      'Content-Type': 'application/json'
    } ,
    body: JSON.stringify(newTrade)
  })
}

updateDatabase sends a post request to a specified database in the JSON array. In this instance, the request is sent to http://localhost:3000/trade-history updating "trade-history" with newTrade, the trade executed by the user. Signals is ready to make a stock portfolio from all the trades, based on the simplified trading system I created.

3. Reducing Trade History to a clean Portfolio.

You may noticed I forgot to mention the function called within the if statement "fetchDatabase("trade-history",makePortfolio)". This function is responsible for turning the data stored in "trade-history" into a Portfolio of current user positions. Argument 2 is a function, which passes the converted JSON object (watchlistObj) as an argument.

function fetchDatabase(db,funct) {
  fetch(`http://localhost:3000/${db}`)
  .then(res => res.json())
  .then(watchlistObj => {
    funct(watchlistObj)
  })
}

Function makePortfolio uses a reduce method to return the
accumulated results in a new array.

This function accumulates all trades by the symbol , stored in the variable reducer. If the trade's type is "Buy" ,then the quantity of shares is added to the existing shares for that specific symbol. If the trade's type is "Sell" , then the quantity of shares is subtracted. If there is only one trade with for a specific symbol, then it is appended as-is , with all "Sell" trades stored with negative quantities. The accumulated result is a reduced array with only 1 array index per symbol. This will be stored in the db.json file as "portfolio".
First, the existing "portfolio" data is cleared with a DELETE request by calling the function fetchDatabase('portfolio',clearPortfolio).
Again, an array method is used to recategorize each index element in reducer. Every element with a negative quantity is stored as a "Short" trade , and every positive quantity is stored as a "Long" trade.

4. Append My Portfolio to DOM

"portfolio" is displayed as table in the DOM. Function appendPortfolio is another function with one argument. Reusing the fetchDatabase function , appendPortfolio passes the JSON converted object from "portfolio" , and appends each element in a legible manner.

function appendPortfolio(portfolioObj) {
  portfolioTableBody.innerHTML = ''
  portfolioObj.forEach(stock => {
    let tr = document.createElement('tr')
    if(stock.quantity > 0) {
      tr.innerHTML = `
    <th scope="row">${stock.symbol}</th>
    <td class="text-success">${stock.type}</td>
    <td>${stock.quantity}</td>
    <td>${stock.price}</td>
    `
    } else if(stock.quantity < 0)
    tr.innerHTML = `
    <th scope="row">${stock.symbol}</th>
    <td class="text-danger">${stock.type}</td>
    <td>${(stock.quantity * -1)}</td>
    <td>${stock.price}</td>
    ` 
    portfolioTableBody.appendChild(tr)
  })
}

portfolioTableBody is a global variable , which uses a querySelector to select the table in my HTML file that will display the data that makes My Portfolio.
Long position types are styled with green text, and Short position types are style with red text.

I added a refresh button to the table which fires a click event, allowing the user to call appendPortfolio function at will.

And thus, Signals was built.
Feel free to explore Signals for yourself. Leave a comment for any features recommendations , improvements, or code refactors you may have.

Bonus points if you know what I used to make the "i" in the Signals logo.

4 Ways House Music Taught Me to Code

Nicholas Mendez — Sat, 19 Mar 2022 17:46:37 +0000

Before joining Flatiron Software Engineering program, I wore a few different hats. Graphic designer, day trader , branding manager, digital marketer , and my favorite, music producer. Just to name a few.
They all have indirectly contributed to my growth as a software engineer. But music production has made the path of software engineering feel very familiar.

For context. Let's rewind to May of 2016. I graduate from university with a BA in Economics, with no ambition to pursue the career path I spent the last 4 years building. My greatest fear is of regret. The life-long regret I'd experience if I never pursue my passion of becoming a music producer. For the next 4 years , I learned the ins and outs of EDM music production.

Here's how my affinity for house music has prepared me to become a software engineer

1 | Workspace and Workflow
Just like code editing, there are a few industry standard workspaces to choose from. My DAW (digital audio workspace) of choice is Ableton Live. For code editing, I prefer Visual Studio Code. Both interfaces are very similar. Folder and file management exists on the left-hand side. The main display is used for building and arrangement. This area is a visual representation of the actual project you are creating, including its molecular anatomy.

2 | Task Packaging
Mix Busing and effect chains in Ableton are much like algorithms and functions. Effect chains and buses group a set of effects, or ways to manipulate a sound (data) , in a specific sequence which produces a new sound. The predictability of the chain is dependent on the effects used. Mix busing is normally used as a tool to merge multiple tracks into one, to make them sound cohesive.

3 | Information Manipulation
At its simplicity, sound is a form of data interpreted by our hearing faculties. Much like any coding language, Ableton provides many tools to manipulate this data. Ableton allows for looping specific sections of a song, parameter automation, file linking , and much more. You can even create your own tools to implement across different projects. Very similar to a script library.

4 | Learning
This section is much less about the actual tools , and more about the process of mastery in both endeavors. I have spent thousands of hours in Ableton, production forums , Youtube tutorials , and communities learning and sharpening my abilities as a producer. Most of us are fortunate enough to have the answer to every question through the power of the internet.

The greatest takeaway from music production I have is to finish out every project you start. Your first projects are not going to be a home run, and that's okay. Learning to start and finish a project is an important skill all in itself.There was a time where I'd create a 16 bar loop in Ableton, and it would sound amazing. But I'd get stuck and move onto another idea. I had all of these great loops, but no finished songs. Finishing a project is a skill that requires training. The only way to create your 50th app is to create 49 more before it.

I'm sure the parallels between music production and coding will continue to develop as my experience as a software engineer develops.