DEV Community: Bryanjazo

The journey of learning code while being a parent.

Bryanjazo — Fri, 09 Jul 2021 23:58:57 +0000

My Journey

This year has been filled with surprises some good some bad. Throughout my life I have always drifted through the journey called life, nothing interested me nor did I get excited for much. I was always trying different things picking up new hobbies but never really found the satisfaction I craved. In the year 2021 everything changed, as I stumbled across some videos of some software engineers I was super interested in how it all works. Ever since I was a little kid I always enjoyed playing video games and even wanted to be a game developer but as a kid, everyone always told me that's not where the "money" is at. So through my years, nothing else felt like it mattered.

After seeing those coding videos it felt like a spark light up, I started searching for courses on Udemy and looked up what languages are the best and most used and started with simple HTML and CSS. After watching some videos and building my first site I was hooked. "This," I told myself, "This is what I want to do" the constant rush of learning something new and the thoughts of what to build next was the one thing that I loved from coding.

Now what?

All this excitement rushed to my head and I was planning so far ahead! But then... I started feeling overwhelmed when searching for how I can land a software engineer job. While stumbling across all of these different ways such as having projects with a good understanding of authentication, extracting data from Api's, and more I thought how am I possibly gonna land a job with the simple knowledge of HTML, and CSS.

Discovering FlatIron and the news of my incoming baby.

This is when I discovered FlatIron school. This would have been the biggest commitment of my life spending this type of money on school would have been a first, but I decided to do it since I’m the type to need something organized and scheduled for me to have the best learning experience. On top of this, I received the news that I was going to be a father. Receiving that news and signing up for school brought a mix of emotions such as fear, happiness, and excitement at the same time. I had to get my mind right for me to excel in school as well as take care of my home needs.

My journey at FlatIron.

My journey at FlatIron had to be one of the best experiences of my life. The cohort I joined 020121 had to be one of the best out there. Such genuine amazing students and teachers ready to learn and teach. Making friends and learning how to code and having fun while doing it taught me that your job doesn't have to be something you hate. It got tough yes, did I feel like quitting yes, but I stuck through it and as of July 2021 I am a FlatIron graduate. This wasn't easy though having to wake up earlier due to having a baby to take care of her needs as well as my wife's was challenging. Learning and being deprived of sleep and not being in the best-rested state was also a challenge but I had to understand that I had to work harder than anyone else to come out successful Now I'm on a job searching journey looking into sharpening my skills as a developer and making an impact through code.

Fin.

Now, what's the point of sharing this story? This is a way to share not only to someone who needs motivation but also to someone trying to start software engineering, I want people to understand no matter what living conditions you are facing hard work will always beat talent 100% of the time.

Deploying To Heroku Rails API back end and React front end

Bryanjazo — Sun, 27 Jun 2021 00:17:32 +0000

Intro

In this blog, we will go over the ways to deploy to Heroku both rails API and React front end.

Rails API

First, we need to create a react app to skip the steps below I recommend installing it with postgresql. Starting off type

rails new your-app-name-here --api --database=postgresql

In the terminal or if you have normal rails that's okay too.

--Steps you can skip if you have the line above--

Step 1

You want to delete anything that has to do with sqlite3, head over to your gem file and install

gem 'pg'

Make sure you deleted

gem 'sqlite3', '~> 1.4'

Step 2

In the config/database.yml Change the default adapter to
postgresql, and the development database, test, and production and delete everything that has to do with sqlite3 and replace it with

app_name_development, app_name_test, and app_name_production

To their specific category.

Step 3

Delete your Gemfile.lock then bundle install. this will help reduce errors in having any SQLite data in your Gemfile.lock.

Continue from here if you launched rails with --database=postgresql.

Step 4

In your terminal type Heroku login this will enable you to log into the Heroku server. after, go ahead and create an app in Heroku or you can do Heroku create <your app name> in your terminal.

Step 5

Run rails db:create to create your new database.

Step 6

Run

git add .

git commit -m "your message"

heroku git:remote -a <your App name>

git push Heroku master

Step 7

Run rails db:migrate and as well as Heroku rake db:migrate you can do the same if you have seeded data.

--And that's the deployment steps for Rails API--

Deplying React Front End

Step 1

This part is pretty simple create your react app as so

npx create-react-app <your app name>

Step 2

In this step log into Heroku and do.

heroku login

this will log you into the Heroku server.

Step 3

Heroku create <your app name>

this will create your app.

Step 4

run

git add .

git commit -m "your message"

heroku git:remote -a <your App name>

git push Heroku master

this will go and push your app to Heroku and deploy it.

Finally

Enjoy your deployed app! for your front end to connect to your back end make sure you copy the restful route Heroku gives you for you app link.

React-Redux Amazon Clone Project

Bryanjazo — Wed, 23 Jun 2021 23:23:42 +0000

Final Chapter

It Has been a journey at Flat Iron School, with many ups and downs without a doubt. Since the beginning of the course, I knew this is what I wanted to do and this final push to finish a 5-month extensive course where it consisted of code every single day sharpened my critical thinking skills as well as my coding skills.

Intro

For this project I wanted to do something special, Thinking about what other companies look for and what they might look for in a Software Engineer I decided to do an amazon clone with full payment functionality.

Lets Talk Code

to Start the project I ran

npx create-react-app Amazon-Clone

The way I decided to tackle this project was by splitting everything into sections. The way I started was with something simple and worked my way up therefore, I chose to start with the NavBar. Keeping it simple gave my NavBar a search bar and 3 options that can be customizable and hidden so users who aren't logged in have to Sign In or Sign up for them to use those features.

Next Step

The next step of this project I went with was I created the Home Page which I will be extracting the Products I need From my

Rails API’s

using

gem 'faker'

With this, I was able to extract my products and create multiple rows using a flexbox using these CSS settings below

.home {

  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px;
}



.home__row {
  text-align: center;
  display: inline-block;
  z-index: 1;
  margin-left: 5px;
  margin-right: 5px;

}

.home__image {
  width: 100%;
  z-index: -1;
  margin-bottom: -150px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.star{
  color: yellow;
  display: flex;
}
.product {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin: 10px;
  padding: 20px;
  width: 85%;
  max-height: 400px;
  min-width: 100px;
  background-color: white;
  z-index: 1;
}



.product > img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
  margin-bottom: 15px;
}

.product > button {
  background: #f0c14b;
  border: 1px solid;
  margin-top: 10px;
  border-color: #a88734 #9c7e31 #846a29;
  color: #111;
}

.product__price {
  margin-top: 5px;
}

.product_info {
  width: 100%;
  height: 100px;
  margin-bottom: 15px;
}

this enabled me to place the cards in a row with the customization I needed. For this Home page, I needed to have the cards ready right when the DOM loaded and With the skills, I Learned I understood that
ComponentDidMount

would be a good choice, making a fetch to my back end and have those products ready before the page fully loads.

Card Layout

On the Home page, the card layout had to be unique since Amazon carries a simple but eye-catching way of setting things up. Therefore, each Product card needed to have the image, title, rating, description, and add to button which is the call to action to enable customers for a quick add to cart for a quick purchase.

Add To Cart

referencing the above text the Add to cart had to be a dispatch action that enabled me to add the specific product with its attributes to a new array called basket so then later on I would be able to use it. I was able to learn Context, and redux-tool-kit so I did both but stuck with redux-tool-kit for project requirement purposes. The way the reducer is set up is unique and amazing since the state of this toolkit reducer is an updated state meaning we no longer need spread operators.

How I set my reducer

To enable redux-tool-kit we have to

npm install @reduxjs/toolkit react-redux

For documentation, you can click Here for a Quickstart.

this gives us access to a variety of tools such as

configureStore, createSlice, and createAsyncThunk

Which is what I needed to meet the requirements. For the reducer, I Had to think of each action that I Needed which where

addToBasket, removeFromCart, setUserDetails, setUser, emptyBasket

and this is how I set it up

const basketStore = createSlice({
  name: "basket",
  initialState:{
    basket: [],
    user: localStorage.user,
    userDetails: []
  },
  reducers:{
    addToBasket: (state, action) => {
      state.basket.push(action.payload)
    },
    removeFromCart: (state, action) => {
      const index = state.basket.findIndex(
        (basketItem) => basketItem.id === action.id)
      if (index >= 0){
        state.basket.splice(index,1);
          }else{
       console.warn("No Items Found with the Id of:", action.id)
      }
    },
    emptyBasket: (state, action) => {
      state.basket.clear()
    },
    setUser: (state, action) => {
      console.log(state,action, "kkk")
      state.user = action.payload
    },
    setUserDetails: (state, action) =>{
      state.userDetails.push(action.payload)
    }
  }
})

After all of this, I was able to implement the checkout functionality that enabled me to use stripe.

Setting up stripe

to set stripe up I needed to install two packages

npm install @stripe/react-stripe-js

and

npm install @stripe/stripe-js

this was needed to use certain elements to have stripe work. To make stripe fully functional I decided to use firebase to enable payment but used Rails to store my orders to later retrieve them. for firebase I had to install the firebase packages it gives you when creating a new app and doing

firebase init

this let me pick the option function which enabled me to set sort of like another back end but only for stripe. the function consisted of this code

const functions = require("firebase-functions");
const express = require('express');
const cors = require('cors')
const stripe = require("stripe")('ENV')

const app = express();

// - Middlewares
app.use(cors({ origin: true }));
app.use(express.json());

// - API routes
app.get("/", (request, response) => response.status(200).send("hello world"));

app.post("/payments/create", async (request, response) => {
  const total = request.query.total;

  console.log("total:", total);

  const paymentIntent = await stripe.paymentIntents.create({
    amount: total, // subunits of the currency
    currency: "usd",
  });

  // OK - Created
  response.status(201).send({
    clientSecret: paymentIntent.client_secret,
  });
});

// - Listen command
exports.api = functions.https.onRequest(app);

which connected firebase as a back end to send a request to stripe every time my functions fired.

Biggest Challenge

One of the biggest challenges I had coming into this project was trying to organize myself to do a step-by-step for this project. I have a strong tendency to overstress initial projects with a blank slate of code since I just learned that language. I’m still learning to understand when it’s okay to take a step back breathe and plan the code out and not just freestyle it and think one step at a time instead of ten.

Coding Biggest Challenge

For my project’s coding, the biggest challenge had to be implementing stripe. I started by trying to use rails as the back end to send requests but quickly found out that rails had many many extra steps to pull stripe off making firebase my second choice.

Grand Finally

To wrap things up, this has been an amazing journey from looking back 5 months ago and not understanding one single line of code to now reading it as if it was second nature to me. I was lucky enough to reach out to people in the class and make a strong foundation as well as my whole amazing Cohort and if I had the chance to re-live and do it from day one I would.

What is .this?

Bryanjazo — Mon, 07 Jun 2021 06:37:16 +0000

Intro

I was quite interested in the keyword .this in javascript, through the weekend doing some research helped me understand why

.this

is more than what it seems.

What is .this

.this

Is a keyword that references another value most likely an object that represents the current

current execution context

You might ask what is current execution context. Well, the current execution context means that .this inside a function references the object function at a given time. If you'd like to give it a try, go into your DEV tools and try out

console.log(this)

Now you should be able to see something like this,

Window {window: Window, self: Window, document: document, name: "", location: Location, …}.

What .this means here is the global object of the browser.

.this in functions

Now things get super interesting when we create a function and repeat what we did in the browser with console.log but now inside the function, let's create a function to demonstrate.

function testingThis(){
 console.log(this)
}
testingThis();

Now you see we get the same thing, that's because our global context is still executed in the function. Now let's take the same function and use it as a property on an object.

function testingThis(){
 console.log(this)
}

const chromeBoi = {
 status: "cool",
    testingThis,
}

chromeBoi.testingThis();

Now this will give you the object of chrome boy In the calling of it.

This and classes

Now the biggest question I had after going through all the documentation is how does .this work with classes? how does javascript know what this is and how to assign it. Now with classes, it a different story the way to understand how .this works with classes is to understand that every time we instantiate a new instance of the class, let's name our class ChromeRules when we instantiate it as so,

c = new ChromeRules(someObject)

What we're doing here is we're creating a new object which in general will let us understand what this would be which is the object of the new instance of ChromeRules so if we had a function inside the class ChromeRules .this in this sense will be the object being passed in and will be called on the function being called on for example,

c.listName();

Conclusion

this search was a really good refresher going into a different language react, And knowing this is a big advantage.

TinDog Javascript

Bryanjazo — Thu, 27 May 2021 21:36:21 +0000

Intro

For this project, I decided to go all out with a Tinder replica for Dogs, and let me tell you it had to be one of the most fun but stressful moments of my life. To start I started by running rails new tinDog --API --database=postgresql to get started. for this project, I decided to have a has_many relationship with likes so that way I'm able to show a user all of their profiles/cards they've liked. I did also think of doing a matching mechanic but I decided to save that for another day. In this project, one of the biggest challenges I faced was struggling to get user's images to show and retrieve from their computer. the way I overcame this issue is instead of trying to rush because images weren't being pushed out I just had users be able to upload image URLs and display them in their feed.

What I learned

One of the things I took from this project is the number of things you can do by manipulating the DOM and creating It the way you envision it I believe that you can 100% create a full app by just using JS and rails and make it an amazing app itself.

If I had a chance to go back

if I had a chance to go back and re-do this project I would tell myself to take it easy and not overcomplicate things like getting stuck trying to use gem 'active-storage' and making it all perfect.

Conclusion

Furthermore, I am beyond happy I'm one step closer to becoming a full-stack software engineer.

Rails Spotify Project

Bryanjazo — Sat, 24 Apr 2021 00:43:00 +0000

Intro

For this project, I decided to make it a challenging one getting into half of the course. For this project, I wanted to do a Spotify replica.

To start off I begin by starting a new rails project
rails new < project_name >
For this project, I decided to use devise in order to get my login and sign up at a much faster paste in order to do this I downloaded

gem 'devise'

and created a
root 'welcome/home'
To send all of my users to the home page when loading up rails to the default homepage I wanted users to be directed to. This made it simple due to the fact that it creates your registration forms for you saving me some time. all I had to do was to make sure I was

link_to
the right places in order for the users to be redirected to the specific sign-in/sign-up form.

Devise is an amazing gem that enabled me to use cool quirks such as
authenthicate_user!
which enables my project to not let anyone in certain routes without proper authentication

After my root home and sign up and sign in were working I started to think about how I wanted to do this project. to start off I had to get an idea of what Spotify did in order for me to get some idea as to what I wanted to do. After several hours I thought of a simple but nice way to go about this. I started by figuring out how I was going to make specific calls to the API. as I searched through Spotify's documentation I found that it was definitely not user friendly so I dug around more and ran into this gem called
gem 'rspotify'
which enabled me to create methods with exampled they provided to make calls into the database all I needed was a
Sessions Secret And App ID
After I got that working I handled my controllers.
albums, artists, comments, omniauth, playlists, tracks, and welcome controllers
This gave me the ability to get started on making calls to the API to let me do what I needed to do. to be more specific, our users who sign up are going to have the ability to search for an artist, retrieve that artist, and then add it to their playlist collection.

  def search
  end

  def index
    if !params[:artist_name].empty?
      @artists = RSpotify::Artist.search(params[:artist_name])
    else
      redirect_to root_path
    end
  end

  def show

    @artist = RSpotify::Artist.find(params[:id])
    respond_to do |f|
      f.html {render :show}
      f.json {render json: @artist.albums}
    end
  end

Then the user has the ability to listen to the track leave a comment and delete it from their playlist if they want to. Users who are not signed in also have the ability to search for tracks and look through the featured items home tracks but not be able to create a playlist, listen to Spotify, and leave comments.

Challenges

Some of the biggest challenges I ran into facing this project was definitely the non-user-friendly Spotify API, figuring this out took me around 2 days reading and searching but I can guarantee my googling skills leveled up a lot. and that made me confident because this was a project I took on alone with hardly any help! If I were to give myself advice starting this project off it would be to relax and use more
binding.pry
As well as take time off if I need to.

Sinatra Where Coders Are Found

Bryanjazo — Sat, 27 Mar 2021 19:11:57 +0000

So this is it, already my second project. This project was definitely way different than my last one but in such an amazing way. This project made me realize how much I love coding and pursuing my career as a software engineer. This project consists of a series of workouts a user can review as long as the individual is logged in. The individual at the start of the project has two options one to log in and one to create an account. If the user does not have an account he/she will not be able to use any functionalities of the website even if they try to manually type in the endpoints. Once the user has created their account they'll be able to go into the site and be able to course through the pre-installed workouts and read the description so the user can be informed on how the exercises are done. If the user would like to create their own workout they'll have the full ability to add and edit the custom workouts! and the great part about this is that it'll only be shown to their specific workout page and not any other user who has created one as well. One of the biggest challenges had to be getting the security of the site full proof and not having any bugs where the user can delete my whole database or the pre-saved workouts I provided for the user, but with a little bit of patience, I managed to understand where I was going wrong and update my code to fix it. Furthermore, this project did not only help me build my skills in programming but taught me the importance of being detailed and precautions so my site won't be faulty and put my site and other user's information at risk.

First API project

Bryanjazo — Sun, 28 Feb 2021 01:08:23 +0000

This had to be one of the most emotional projects I have ever done in my life. I finally finished my first API project for Flat Iron School, and let me tell you it was amazing, so let me tell you about it. The way it works is by taking in an API(Jikan), which is the API I used to pull different genres of animes depending on what the input of the user was. So far I have a total of 6 genres users can choose from it goes from Action, Cars, Adventure, Comedy, Dementia, and Demons. Once the user inputs his preferred choice, numbers 1-20 show up with the titles that output the top 20 animes trending today. This was something I thought of to later grow into an algorithm that can be implemented in a cite that grabs all of your animes watched and picks the highest percentage anime that corresponds to your liking. One of my toughest challenges in this project was building it from scratch. Just starting from a blank made me nervous in the beginning but quickly got the hang of it. Another big challenge I ran into was when the program initiated and it asked for a genre it was able to run until I asked for the synopsis and it would put out the same synopsis for each of the 20 animes therefore, I quickly debugged my code and found out I had not specified the level or synopsis in the object that I wanted to get into. Not many anime platforms do this and it does get boring if you don't have anything to watch so I'm going to later grow this project into something that can be amazing and pick the best anime for you.

project link: https://github.com/Bryanjazo/anime_project

Why I want to become a software engineer.

Bryanjazo — Thu, 04 Feb 2021 06:57:27 +0000

Throughout my life, I was always someone who loved everything. I never understood my place in life and what I wanted to do as a career not just that but something I liked. I went from being a personal trainer to studying real estate, and never really understood my why in all of this. One day as I was scrolling through Tik Tok I've seen a couple of videos about software engineering and how in reality it’s not as hard as everyone makes it seem! sure it’stough but not impossible. One day I ran into this one girl talking about how fun it was and not just that the pay was awesome! I know what you're thinking "pay isn't everything" and while that might be true it was just a bonus.
As a kid, I loved playing video games! and I always loved the idea of how websites worked even made a couple on WIX and Shopify and that alone was already fun I could only imagine actual live coding and creating something on your own... but back to my story, the girl on tik tok talked about the school she went to and it was flat iron! so that's when the thought-about making the decision began. I thought about my why if I was going to make this commitment, and how fun and interesting it was going to be and it all came to me.
I’m passionate about it, I want to do this not only for myself but to invest in myself to have a more comfortable, stable, and fun life! Not only that but you're independent as a coder and as a mid introvert, I loved the idea! I believe this will catapult me into my next opportunities and help me be the person I need to be. I would never take back the choice I made in deciding to pursue this career.