DEV Community: Danny Rivera

React - FlatCoin

Danny Rivera — Fri, 25 Jun 2021 23:58:35 +0000

Welcome to React - FlatCoin! This App was develop as a Flatiron School React project. I developed this app to help users practice trading cryptocurrencies using virtual (fake) money.

First thing to mention, this app is an incomplete one. My original plan was to come up with a fully functional trading application but I didn't anticipate multiple tricky variables like calculating true and updated return on total investment and data collected to display charts. But I made sure to meet project requirements, this app is still a work in progress.

Back End Setup:

Rails make it very easy to set up a backend API for a React-Project.

rails new react-flatcoin-rails-backend --api

I generated my models via scaffold:

rails generate scaffold user first_name last_name email password:digest
rails generate scaffold portfolio name description initial_balance:decimal current_balance:decimal user_id:integer
rails generate scaffold trade coin_name coin_id price:decimal quantity:integer user_id:integer portfolio_id:integer

I used serializers to easily control the way I'm displaying data as a JSON.

gem 'active_model_serializers'

And finally I created a session controller to deal with User Authentication.

rails generate controller Session new --no-helper --no-assets --no-test-framework --skip-routes --skip

Check out my back end repository here on GitHub!

Note: You may refer to my previous Rails project for more detailed information on Rails API FlatCoin on Rails.

Front End:

First thing first, it's really easy to create the basic structure of a react App:

npx create-react-app react-flatcoin

Then make sure to add Redux:

npm install react-redux --save

When starting an App from scratch it makes sense to start off by visualizing your final product, it doesn't have to be exactly like your final product but at least have a good idea of the different components of your app. My app required a user logging in and playing around with its portfolio of cryptocurrencies, so for me it make sense to start off by setting up User Authorization.
This part gave me such a hard time, but after 3 days of struggle I found this useful article about its setup Using JWT in Your React+Redux App for Authorization check it out, will save you hours.

My next challenge was to fully understand Middleware and asynchronous actions within React/Redux in order to start creating the functionality of my App, since my app required to fetch data from both my Rails API back end and live cryptocurrency data from CoinGecko. After some heavy research I found this YouTube video that helped me fully understand the whole process.

In index.js I'm using Provider to create a global store to keep things simple, I'm also using combineReducers to combine cryptosReducer and usersReducer since they are being fetch from 2 different back ends.

// React
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Imporing CSS
import './index.css';

// Redux - Thunk
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'

// Imporing Reducers
import { combineReducers } from 'redux'
import cryptosReducer from './reducers/cryptosReducer'
import usersReducer from './reducers/usersReducer'

import reportWebVitals from './reportWebVitals';

const rootReducer = combineReducers({
  user: usersReducer,
  crypto: cryptosReducer
})

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// Creating Store
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk, logger)))

ReactDOM.render(
  <React.StrictMode>  
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

logger turned out to be an excellent tool to visualize the previous state and the next step based on the action that's been passed.

npm install react-logger --save

Just add it as a second middleware when creating store:

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk, logger)))

On your console:

My App.js file is easy to follow, I created a fetchEverything function to deal with fetchLoggedInUser and fetchCryptos via componentDidMount.

I handle loading via handleCryptoListLoading's logic, then render returns all its content.

mapStateToProps function maps proper state values and mapDispatchToProps dispatches its values, then I use connect to connect them both:

export default connect(mapStateToProps, mapDispatchToProps)(App)

Full code:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchCryptos } from './actions/cryptoActions'
import { fetchLoggedInUser } from './actions/userActions'
import { logOutUser } from './actions/userActions'
import CryptoList from './components/CryptoList'
import TradeCryptoList from './components/TradeCryptoList'
import NavBar from './components/NavBar'
import NotLoggedInNavBar from './components/NotLoggedInNavBar'
import Dashboard from './components/Dashboard'
import LoginForm from './containers/loginForm'
import SignUpForm from './containers/signUpForm'
import TradeCryptoHoldingDescription from './components/TradeCryptoDescription'
import TradeCryptoHistoryList from './components/TradeCryptoHistoryList'

import './App.css';

import Loading from './svg/Loading'

import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom'

class App extends Component {

  fetchEverything = () => {
    this.props.fetchLoggedInUser()
    this.props.fetchCryptos()
  }

  componentDidMount() {
    this.fetchEverything()
  }

  handleCryptoListLoading = () => { console.log true or false
    if(this.props.loading) {
      return <Loading />
    } else {
console.log(this.props.current_user.first_name)
      return <CryptoList cryptoData={this.props.cryptoData} />
    }
  }

  handleTradeCryptoListLoading = () => { console.log true or false
    if(this.props.user_loading) {
      return <Loading />
    } else {
      return <TradeCryptoList cryptoData={this.props.cryptoData} current_user={this.props.current_user} />
    }
  }

  handleTradeCryptoHistoryListLoading = () => { console.log true or false
    if(this.props.user_loading) {
      return <Loading />
    } else {
      return <TradeCryptoHistoryList cryptoData={this.props.cryptoData} current_user={this.props.current_user} />
    }
  }

  logOut = () => {
    localStorage.removeItem("token")
    this.props.logOutUser()
    alert("Succesfully log out!")
  }

  render() {
    return (
      <>
        <div className="App">
          <Router>
            <div className="app__navBar">
              {this.props.login? <NavBar logOut = {this.logOut}/> : <NotLoggedInNavBar/> }
            </div>
            <Switch>

              <Route exact path="/">   
                <div className="app__body">
                  <div className="app__container">
                    <Dashboard current_user={this.props.current_user}/>
                    {this.handleCryptoListLoading()}
                  </div>
                </div>
              </Route>

              <Route exact path="/login">
                <LoginForm />
              </Route>

              <Route exact path="/signup">
                <SignUpForm />
              </Route>

              <Route exact path="/logout">
                <h1>Loguot</h1>
              </Route>


              <Route path="/coins/:coin_id" component={(routeInfo) => {
                const paramsCoinId = routeInfo.match.params.coin_id
                const foundCoin = this.props.current_user.coins.find(p=> p.coin_id === paramsCoinId)
                const foundCrypto = this.props.cryptoData.find(p=> p.symbol === paramsCoinId)
                const foundPortfolio = this.props.current_user.portfolios.find(p=> p.name === "Initial Portfolio")
                return <TradeCryptoHoldingDescription coins={foundCoin} current_user={this.props.current_user} crypto={foundCrypto} portfolio={foundPortfolio}/>
              </Route>

              <Route exact path="/trades">               {this.handleTradeCryptoHistoryListLoading()}
              </Route> 

              <Route exact path="/portfolio">
                {this.handleTradeCryptoListLoading()}
              </Route>            

              <Route path="/" render={() => <div><h1>Oops! That page doesn't exist.</h1></div>} />

            </Switch>
          </Router>
        </div>
      </>
    )
  }
}

const mapStateToProps = state => {
  return {
    cryptoData: state.crypto.cryptos,
    loading: state.crypto.loading,
    login: state.user.login,
    current_user: state.user.user,
    user_loading: state.user.loading
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchCryptos: () => dispatch(fetchCryptos()),
    fetchLoggedInUser: () => dispatch(fetchLoggedInUser()),
    logOutUser: () => dispatch(logOutUser())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Actions: when fetching data from CoinGecko I use the ADD_CRYPTOS action:

export const fetchCryptos = () => {
    return (dispatch) => {
        dispatch({ type: 'LOADING_CRYPTOS'})
        fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20binancecoin%2C%20tether%2C%20polkadot%2C%20cardano%2C%20ripple%2C%20litecoin%2C%20chainlink%2C%20bitcoin-cash%2C%20stellar%2C%20usd-coin%2C%20uniswap%2C%20dogecoin%2C%20wrapped-bitcoin%2C%20okb%2C%20aave%2C%20cosmos%2C%20nem%2C%20solana%20%20&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h')
        .then(response => {
            return response.json()
        })
        .then(responseJSON => {
            dispatch({ type: 'ADD_CRYPTOS', cryptos: responseJSON})
        })
    }
}

Reducer:

const cryptosReducer = (state = {
    cryptos: [],
    loading:false
}, action) => {
    switch(action.type) {
        case 'LOADING_CRYPTOS':
            return {
                ...state,
                cryptos: [...state.cryptos],
                loading: true
            }
        case 'ADD_CRYPTOS':
            return {
                ...state,
                cryptos: action.cryptos,
                loading: false
            }
        default:
            return state
    }
}

export default cryptosReducer

I used a very similar approach to fetch user's data from my Rails API back end, you may check out front end repository here on GitHub for full code.
Check out a quick YouTube video of my application.

I went through a lot of challenges when building up this App, but it gave me a clear understanding of React. Now I feel ready to keep on refining this project or start another from scratch and avoid those mistakes I made with this one.

Flatcoin Watchlist JS

Danny Rivera — Thu, 27 May 2021 11:49:26 +0000

This App was develop as a Flatiron School JS project. I developed this app to help users create cryptocurrencies watchlists where they can see updated data from their favorite coins.

Back End Setup:

Note: You may refer to my previous Rails project for more detailed information on Rails, click the following link to find useful information about the API I'm using and more details FlatCoin on Rails.

I easily created my back end running:

rails new js_watchlist_backend --api

I generated my models via scaffold:

rails generate scaffold coin coin_api_id name symbol
rails generate scaffold watchlist name description
rails generate scaffold watchlistCoin coin:references watchlist:references

Check out my back end repository here on GitHub!

Front End:

This is a single page Application (SPA), so a basic front end JS setup will have an index.html, index.css and index.js.
Learning JS from scratch in one month was very challenging but after days of heavy debugging I realized that it's just a matter of understanding how to communicate with the backend API via fetch.

I started out by creating editing my index.js file.

let editMode = false
let addWatchlist = false

let divWatchlistCollection = document.querySelector('#watchlist_collection')
const flatcoinWatchlistAdapter = new FlatcoinWatchlistAdapter(`http://127.0.0.1:3000/`)
const flatcoinCoinAdapter = new FlatcoinCoinAdapter(`http://127.0.0.1:3000/`)
const watchlistForm = new WatchlistForm
const coinlistForm = new CoinForm

// Creating a global variable for coinFormContainer
const coinFormContainer = document.getElementById("coin_form_container")
//Creating a global variable for Back to watchlist btn
const backToWatchlistBtn = document.getElementById("back_watchlist_btn")
// Creating a global variable for Watchlist Collection
const watchlistCollection = document.getElementById("watchlist_collection")
// Creating a global variable for Watchlist Form container
const watchlistFormContainer = document.getElementById("watchlist_form_container")
// Creating a global variable for Coin Collection
const coinCollection = document.getElementById("coin_collection")
// Creating a global variable for New Watchlist Btn
const newWatchlistBtn = document.getElementById("new_watchlist_btn")
// Creating a global variable for Coin Container
const coinContainer = document.getElementById("coin_form_container")
// Creating a global varial for Watch list created Confirmation Container
const confirmationContainer = document.getElementById("watchlist_created_confirmation")
// Creating a global varial for Watch list deleted Confirmation Container
const confirmationDeleteContainer = document.getElementById("watchlist_deleted_confirmation")
// Creating a global varial for Watch list updated Confirmation Container
const confirmationUpdateContainer = document.getElementById("watchlist_updated_confirmation")
// Creating a global varial for Coin Delete Confirmation
const confirmationCoinDeleteContainer = document.getElementById("coin_deleted_confirmation")
coin_created_confirmation
// Creating a global varial for Coin Create Confirmation
const confirmationCoinCreateContainer = document.getElementById("coin_created_confirmation")

// DOM
document.addEventListener("DOMContentLoaded", () => {
    watchlistForm.addCreateForm()
    flatcoinWatchlistAdapter.getWatchlists()
    watchlistForm.listenViewEditDelete()
    displayWatchlistForm()
    displayCoinCollection()
    displayGoBackWatchlists()
    handleGoBackWatchlists()
})

// Display Watchlist NEW and UPDATE form
function displayWatchlistForm() {
    newWatchlistBtn.addEventListener("click", () => {
        addWatchlist = !addWatchlist
        if (addWatchlist) {
            newWatchlistBtn.innerText = "Never mind!"
            watchlistFormContainer.style.display = "block"
            editMode = false
            // watchlistForm.addCreateForm()
        } else {
            watchlistFormContainer.style.display = "none"
            newWatchlistBtn.innerText = "Create a new Watchlist!"
        }
    })
}

// Displaying Coin Collection
function displayCoinCollection() {
    coinCollection.style.display = "none"
}

// Displaying 'Go back to Watchilists!' btn
function displayGoBackWatchlists() {
    backToWatchlistBtn.style.display = "none"
}

// 
function handleGoBackWatchlists() {
    backToWatchlistBtn.addEventListener("click", () => {
        // console.log("Go back baby")
        // Displaying Create New Watchlist
        newWatchlistBtn.style.display = "block"
        // Displaying Watchlist Collection
        watchlistCollection.style.display = "block"
        //Hiding Back to Watchlists btn
        backToWatchlistBtn.style.display = "none"
        // 
        coinContainer.style.display = "none"
        // Displaying Coins
        coinCollection.style.display = "none"
        clearCoinCollectionAndForm()

    })
}

// Testing area
// confirmationContainer.hide()
// setTimeout(function(){confirmationContainer.style.display = "none"}, 1000)

function clearCoinCollectionAndForm() {
    while (coinCollection.firstChild) {
        coinCollection.removeChild(coinCollection.firstChild)
    }
    while (coinFormContainer.firstChild) {
        coinFormContainer.removeChild(coinFormContainer.firstChild)
    }
}

Then I created an Adapter class for Watchlists, this handles all fetch requests.

class FlatcoinWatchlistAdapter {

    constructor(baseURL) {
        this.baseURL = baseURL
    }

    // Fetch Watchlist Function
    getWatchlists() {
        fetch(this.baseURL + `watchlists`)
        .then(res => res.json())
        .then(watchlists => {
            watchlists.forEach(watchlist => {
                // console.log(watchlist)
                const w = new Watchlist(watchlist)
                //console.log(w)
                w.addToDom()
            })
        })    
    }
    // Create new Watchlist
    createWatchlist(nameInput, descriptionInput) {
        fetch(this.baseURL + `watchlists`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                name: nameInput.value,
                description: descriptionInput.value
            }) 
        })
        .then(resp => {
            console.log(resp)
            return resp.json()
        })
        .then(data => {
            console.log(data.message)
            if (data.status === 201) {
                const s = new Watchlist(data.watchlist)
                s.addToDom()
                // alert(data.message)
            } else {
                alert(data.errors)
            }
            nameInput.value = ""
            descriptionInput.value = ""
            newWatchlistBtn.click()
            confirmationContainer.style.display = "block"           
            setTimeout(function(){confirmationContainer.style.display = "none"}, 1500)
        })
        .catch(err => console.error(err)) 
    }
}

Then a Watchlist Class.

class Watchlist {
    static all = []

    constructor({id, name, description, created_at}) {
        this.id = id
        this.name = name
        this.description = description
        this.created_at = created_at
        Watchlist.all.push(this)    
    }

    render() {
        return(`<div class="box" id="watchlist-${this.id}" data-id=${this.id}>
                <h2>${this.name}</h2>
                <p>${this.description}</p>
                <p>${this.created_at}</p>
                <button data-action='view'>View</button>
                <button data-action='edit'>Edit</button> 
                <button data-action='delete'>Delete</button>
            </div>`
        )
    }

    addToDom() {
        divWatchlistCollection.innerHTML += this.render()
    }


}

And finally a WatchlistForm Class.

class WatchlistForm {
    constructor(){
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleViewEditDelete = this.handleViewEditDelete.bind(this)
    }

    addCreateForm() {
        const watchlistFormContainer = document.getElementById("watchlist_form_container")
        const form = document.createElement('form')
        form.innerHTML = `<input id="name_input" placeholder='Name' type='text'/><br>
        <input id="description_input" placeholder='Description' type='text'/><br>
        <input id="watchlist_submit" value="Create Watchlist!" type="submit"/>`
        watchlistFormContainer.append(form)

        form.addEventListener("submit", this.handleSubmit)
    }

    handleSubmit(event) {
        event.preventDefault()
        const nameInput = event.target[0]
        const descriptionInput = event.target[1]
        if (editMode){
            flatcoinWatchlistAdapter.editWatchlist(editMode, nameInput, descriptionInput)
        } else {
            flatcoinWatchlistAdapter.createWatchlist(nameInput, descriptionInput)
        }    
    }

    listenViewEditDelete() {
        const watchlistCollection = document.getElementById("watchlist_collection")
        watchlistCollection.addEventListener("click", this.handleViewEditDelete)
    }

    handleViewEditDelete(event) {
        const div = event.target.parentElement
        console.log(div)
        const action = event.target.dataset.action
        console.log(action)
        switch (action) {
            case "delete":
                flatcoinWatchlistAdapter.deleteWatchlist(div)
                break
            case "edit":
                editMode = div
                watchlistFormContainer.style.display = "block"
                newWatchlistBtn.style.display = "none"
                // const watchiListSubmitBtn = document.getElementById("watchlist_submit")
                // watchiListSubmitBtn.value = "Update"
                document.getElementById("watchlist_submit").value = "Update"
                // Populate input
                document.getElementById('name_input').value = div.children[0].innerText
                document.getElementById('description_input').value = div.children[1].innerText
                break
            case "view":
                // Hidding Create New Watchlist
                newWatchlistBtn.style.display = "none"
                // Hidding Watchlist Collection
                watchlistCollection.style.display = "none"
                //Displaying Back to Watchlists btn
                backToWatchlistBtn.style.display = "block"
                // Displaying Coin Form
                // const coinlistForm = new CoinForm
                coinlistForm.addCreateForm(div.children[0].innerText, div.dataset.id)
                // const coinContainer = document.getElementById("coin_form_container")
                coinContainer.style.display = "block"
                // Displaying Coins
                coinCollection.style.display = "block"
                console.log(div)
                // const flatcoinCoinAdapter = new FlatcoinCoinAdapter(`http://127.0.0.1:3000/`)
                flatcoinCoinAdapter.getCoinlist(div)
                // Adding an event listener for delete
                coinlistForm.listenDelete()
            default:
                break
        }
    }
}

The logic for Coin object is the same as the watchlist, you may check out my front end repository here on GitHub for the full code.
Check out a quick YouTube video of my application.

FlatCoin on Rails

Danny Rivera — Fri, 30 Apr 2021 15:05:50 +0000

This App was develop as a Flatiron School Rails project. I developed this app to help users practice building cryptocurrency portfolios and react to the markets in real time safely using fake money.

Note: This is a continuation of my previous Sinatra project, click the following link to find useful information about the API I'm using and more details FlatCoin.

Rails New App Setup:

rails new Project_name

Then, type:

rails s

And go to http://127.0.0.1:3000 OMG! Yes, that's it. you're on Rails!
Next thing you want to start creating the resources needed:

rails g resource User name:string password:password_digest email:string uid:string provider:string --no-test-framework

rails g resource Portfolio name:string description:text current_balance:integer initial_balance:integer user_id:integer --no-test-framework

rails g resource Comment user_id:integer portfolio_id:integer content:text --no-test-framework

rails g resource Trade coin_name:string coin_id:string price:decimal quantity:integer user_id:integer portfolio_id:integer --no-test-framework

By running the above, Rails will generate the migrations, models, controllers, routes an even the views folders for you. Thanks Rails!
Now it's the time to run a migration:

rails db:migrate

Next step associations and validations:

class User < ApplicationRecord
  has_secure_password

  # Remane relationship to group another name
  has_many :created_portfolios, foreign_key: "user_id", class_name: "Portfolio"
  has_many :trades, through: :created_portfolios

  has_many :comments
  has_many :portfolios, through: :comments

  validates :name, presence: true
  validates :email, presence: true, format: { with: URI::MailTo::EMAIL_REGEXP }, uniqueness: true
end

class Portfolio < ApplicationRecord
    belongs_to :user

    has_many :comments
    has_many :users, through: :comments

    has_many :trades

    validates :name, presence: true
    validates :description, presence: true
    validates :initial_balance, presence: true, numericality: { only_integer: true }

    # You must include at least one class level ActiveRecord scope method
    scope :search, -> (query) { self.where("name LIKE ?", "%#{query}%") }

    # def self.most_recent
    #     self.order(created_at: :asc)
    # end
    scope :most_recent, -> { self.order(created_at: :desc) }

    def max_coins(price)
        (self.current_balance / price).to_i
    end
end

class Trade < ApplicationRecord
    belongs_to :user
    belongs_to :portfolio

    validates :quantity, presence: true, numericality: { only_integer: true }
end

class Comment < ApplicationRecord
    belongs_to :user
    belongs_to :portfolio

    validates :content, presence: true
end

Routes:

Rails.application.routes.draw do

  root 'static#home'
  match '/auth/:provider/callback', to: 'sessions#github_omniauth', via: [:get, :post]
  #resources :users
  get '/signup', to: 'users#new'
  post '/signup', to: 'users#create'

  get '/login', to: 'sessions#new'
  post '/login', to: 'sessions#create'

  get '/search', to: 'portfolios#search', as: 'search'

  delete '/logout', to: "sessions#logout"

  get '/my_portfolios', to: 'portfolios#my_portfolios', as: 'my_portfolios'

  resources :portfolios do
    resources :comments, only: [:create]
    resources :trades, only: [:create, :show, :destroy]
    get '/trades/new', to: 'portfolios#my_portfolios'
    post '/trades/new', to: 'trades#create_portfolio_trade', as: 'create_portfolio_trade'
  end
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

From here on the logic is very similar to my previous Sinatra project FlatCoin, rails give us an easy way to create forms, such as the following:

<%= form_with(model: [@portfolio, @trade]) do |f| %>
    <%= f.hidden_field :user_id, value: current_user.id %>
    <%= f.hidden_field :portfolio_id, value: @portfolio.id %>
    <%= f.hidden_field :coin_name, value: @coin.name %>
    <%= f.hidden_field :coin_id, value: @coin_id %>
    <%= f.hidden_field :price, value: @coin.current_price %>
    <%= f.label :quantity %>
    <%= f.text_field :quantity %>
    <%= f.submit :trade, value: 'Buy NOW!' %>
<% end %>

Setting up the GitHub authentication:

Visit https://github.com/settings/developers
Click "New OAuth App"
Give it a name, Homepage URL: http://127.0.0.1:3000 (Or any other path that Rails is listening on), Description, Authorization call back URL: http://127.0.0.1:3000/auth/github/callback
Click "Register application"
Create a .env file in main directory and add your GitHub keys.

GITHUB_KEY=33...
GITHUB_SECRET=519...

If you run into issues, check the following documentation OmniAuth: Standardized Multi-Provider Authentication

Struggling with Sinatra gave me the knowledge and appreciation to Rails.

Check out a quick YouTube video of my project.
Check out the project here on GitHub!

FlatCoin

Danny Rivera — Thu, 25 Mar 2021 01:24:38 +0000

This App was develop as a Flatiron School Sinatra project. I developed this app to help users practice building a cryptocurrency portfolio and react to the markets in real time using fake money (10000 free FlatCoins), they can also compete against their friends or coworkers to earn their spot at the top of the leaderboards.
This app constantly gets coin prices via API. I'm reusing code from my previous project Crypto CLI.

Note: Before even sketching an app you should first research the right API, play around and see what data can you get from it. In my case I used CoinGecko.

Sinatra Activerecord Setup: Make sure to add the three most important gems: activerecord, sinatra-activerecord and rake.
Gemfile

source 'http://rubygems.org'
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem 'sinatra'
gem 'activerecord', '~> 6.0.0', :require => 'active_record'
gem 'sinatra-activerecord', :require => 'sinatra/activerecord'
gem 'rake'
gem 'require_all'
gem 'sqlite3'
gem 'thin'
gem 'shotgun'
gem 'pry'
gem 'bcrypt'
gem "tux"
gem 'net-http'
gem 'open-uri'
gem 'json'
gem 'tty-prompt'

group :test do
  gem 'capybara'
  gem 'rack-test'
  gem 'database_cleaner'
end

Setting up the connection to our database:
environment.rb

ENV['SINATRA_ENV'] ||= "development"

require 'net/http'
require 'open-uri'
require 'json'
require 'tty-prompt'
require 'bundler/setup'
Bundler.require(:default, ENV['SINATRA_ENV'])

ActiveRecord::Base.establish_connection(ENV['SINATRA_ENV'].to_sym)

require_all 'app'

database.yml

default: &default
  adapter: 'sqlite3'
  database: 'db/development.sqlite'

development:
  <<: *default

test:
  <<: *default
  database: 'db/test.sqlite'

config.ru

require './config/environment'

if ActiveRecord::Base.connection.migration_context.needs_migration?
  raise 'Migrations are pending. Run `rake db:migrate` to resolve the issue.'
end

use Rack::MethodOverride
run ApplicationController
use UsersController
use TradesController

Rake gives us the ability to quickly make files and set up automated tasks.
Rakefile

ENV["SINATRA_ENV"] ||= "development"

require_relative './config/environment'
require 'sinatra/activerecord/rake'

I had to create two tables: one for users and another one for trades. After running a migration my schema looks like this:
schema.rb

ActiveRecord::Schema.define(version: 2021_03_22_162004) do

  create_table "trades", force: :cascade do |t|
    t.text "coin_name"
    t.decimal "current_price"
    t.integer "quantity"
    t.integer "user_id"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "users", force: :cascade do |t|
    t.string "first_name"
    t.string "last_name"
    t.text "email"
    t.string "password_digest"
    t.decimal "balance"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

end

Models:
My main difficulty was defining the right models, how can I track user's FlatCoin balance, trades and portfolio value? I knew, I need it to definitely save users and its trades in the database, but what about cryptocurrency value? Cryptocurrency value fluctuates every millisecond, so I doesn't make sense to save and keep on updating its price every single time in the database, instead I can just make an API call every time I need its current price.

api.rb and cryptocurrency.rb are just copies of my previous project Crypto CLI.
user.rb

class User < ActiveRecord::Base
  has_many :trades

  validates_uniqueness_of :email
  validates_presence_of :first_name, :last_name, :email
  has_secure_password

end

trade.rb

class Trade < ActiveRecord::Base
    belongs_to :user 
end

Views:
layout.erb generates the basic layout for the app, index.erb is the landing page.
Users subfolder handles balance.erb, login.erb, logout.erb and signup.erb.
Trades subfolder handles all.erb, confirmation.erb, edit.erb, leaderboard.erb, new.erb, pick.erb, rejected.erb and sell.erb.
You may check the code on GitHub!

Controllers:
Building up controllers was a lot of fun, once you define your helpers in application_controller.rb you can use logged_in? to work the logic in you app. The good thing about working in this project was that I can use tux to test my database and by running shotgun I can test my app in real time.

application_controller.rb

require './config/environment'

class ApplicationController < Sinatra::Base

  configure do
    set :public_folder, 'public'
    set :views, 'app/views'
    enable :sessions
    set :session_secret, "aYxiNrafm3ScE4xfa91z2azkuUGJ720y"
  end

  get '/' do
    erb :index
  end

  helpers do

    def logged_in?
      !!current_user
    end

    def current_user
      @current_user ||= User.find_by(id: session[:user_id]) if session[:user_id]
    end

  end

end

trades_controller.rb

class TradesController < ApplicationController

    get '/trade' do
        if logged_in?
          erb :'trades/pick'
        else
          redirect to '/'
        end
    end

    post '/trade/new_trade' do
        @coin_id = params[:coin_id] 
        redirect to "/trade/#{@coin_id}"
    end

    get '/trade/:id' do
        if logged_in?
          Api.new.get_top_20_cryptocurrencies 
          @coin = Cryptocurrency.find_by_id(params[:id])
          if @coin != nil
            erb :'trades/new'
          else
            redirect to '/'
          end
        else
          redirect to '/'
        end
    end

    post '/trade/status' do
        if params[:quantity].to_i > 0
            @trade = current_user.trades.build(coin_name: params[:coin_name], current_price: params[:current_price], quantity: params[:quantity])
            @new_balance = current_user.balance - (params[:quantity].to_i*params[:current_price].to_f)
            if @new_balance > 0
                current_user.update(balance: @new_balance)
                @trade.save
                erb :'trades/confirmation'
            else
                erb :'trades/rejected'
            end
        else
            redirect to '/'
        end
    end

    get '/trades' do
        if logged_in?
          @trades = Trade.all
          erb :'trades/all'
        else
          redirect to '/'
        end
    end

    get '/trades/edit/:id' do
        if logged_in?
            @trade = Trade.find_by_id(params[:id])
            if @trade && @trade.user == current_user
                erb :'trades/edit'
            else
                redirect to '/users/balance'
            end
        else
            redirect to '/'
        end
    end

    patch '/trades/edit/:id' do
        if logged_in?
            @trade = Trade.find_by_id(params[:id])
            if @trade && @trade.user == current_user
                @trade.update(coin_name: params[:coin_name], current_price: params[:current_price], quantity: params[:quantity])
                redirect to '/users/balance'
            else
                redirect to '/users/balance'
            end
        else
            redirect to '/'
        end
    end

    get '/trades/sell/:id' do
        if logged_in?
            @trade = Trade.find_by_id(params[:id])
            if @trade && @trade.user == current_user
                Api.new.get_top_20_cryptocurrencies
                coin_name = @trade.coin_name
                @updated_coin = Cryptocurrency.find_by_name(coin_name)
                @new_balance = current_user.balance + (@trade.quantity.to_i * @updated_coin.current_price.to_f)
                erb :'trades/sell'
            else
                redirect to '/users/balance'
            end
        else
            redirect to '/'
        end
    end

    delete '/trades/sell/:id/delete' do
        puts params
        if logged_in?
          @trade = Trade.find_by_id(params[:id])
          if @trade && @trade.user == current_user
            current_user.update(balance: params[:new_balance])
            @trade.delete
          end
          redirect to '/users/balance'
        else
          redirect to '/'
        end
    end

    get '/leaderboard' do
        if logged_in?
          @users = User.all
          erb :'trades/leaderboard'
        else
          redirect to '/'
        end
    end

end

users_controller.rb

class UsersController < ApplicationController
    get '/users/balance' do
      if logged_in?
        @trades = current_user.trades.all
        erb :'users/balance'
      else
        redirect to '/'
      end
    end

    get '/signup' do
      if !logged_in?
        erb :'users/signup', locals: {message: "Please sign up before you sign in"}
      else
        redirect to '/'
      end
    end

    post '/signup' do
      if params[:first_name] == "" || params[:last_name] == "" || params[:email] == "" || params[:password] == ""
        redirect to '/signup'
      else
        @user = User.new(:first_name => params[:first_name], :last_name => params[:last_name], :email => params[:email], :password => params[:password])
        @user.balance = 10000 # Free '$10000' for signing up!
        @user.save
        session[:user_id] = @user.id
        redirect to '/'
      end
    end

    get '/login' do
      if !logged_in?
        erb :'users/login'
      else
        redirect to '/'
      end
    end

    post '/login' do
      user = User.find_by(:email => params[:email])
      if user && user.authenticate(params[:password])
        session[:user_id] = user.id
        redirect to '/'
      else
        redirect to '/signup'
      end
    end

    get '/logout' do
      if logged_in?
        session.destroy
        redirect to '/'
      else
        redirect to '/'
      end
    end
end

This project was very intense, but I'm really glad I managed to put it together. Getting a clear understanding of APIs, html and databases it's crucial for building interactive apps.

Check out a quick YouTube video of my project.
Check out the project here on GitHub!

What is Metaprogramming?

Danny Rivera — Wed, 03 Mar 2021 14:41:13 +0000

Concept: Metaprogramming is writing programs that write programs! Sounds awesome right? Let's understand why metaprogramming is important. Take a look at the following code:

class Cryptocurrency
  attr_accessor :name, :symbol, :current_price, :last_updated, :price_change_24h  

  def initialize(name:, symbol:, current_price:, last_updated:, price_change_24h:)
    @name = name
    @symbol = symbol
    @current_price = current_price
    @last_updated = last_updated
    @price_change_24h = price_change_24h
  end
end

In this situation I have a Cryptocurrency class that initializes with a hash of attributes from CoinGecko's API and it works just fine. But what if they decide to change its API, we wouldn't be able to even create Cryptocurrency objects and our app will crash.
Luckily there's a solution for this problem, but first let's take a look at the send method. We can use it and simplify our code above with less code.

class Cryptocurrency
  attr_accessor :name, :symbol, :current_price, :last_updated, :price_change_24h  

  def initialize(crypto_hash)
    crypto_hash.each do |key, value|
      self.send("#{key}=", value)
    end
  end
end

What is going on here?

self.send("#{key}=", value)

As we loop through each key value pair in our hash we use “message passing” to “send” a method to “self”.
How send method would look a like:

self.name = value
self.name = "Bitcoin"

Now that we understand send, we can get into dynamically setting getters and setters. Let's first remember that attr_accessor is a class method just like attr_reader and attr_writer. So we can dynamically add getters or setters:

class Cryptocurrency
  def initialize(hash)
    crypto_hash.each do |key, value|
      self.class.attr_accessor(key)
      self.send("#{key}=", value)
    end
  end
end

By using Metaprogramming we can now get and set every attribute on an object instantiated from the Cryptocurrency class.

Reference:
Mass Assignment and Class Initialization

Crypto CLI

Danny Rivera — Sat, 27 Feb 2021 19:58:55 +0000

I've always been amazed about cryptocurrencies, so I decided to build a CLI app that gets prices and more detailed information about any cryptocurrency out there.

To make my app I used Open URI, Net/http and JSON to gather and parse data from an API, I used PRY for testing and I also used TTY-Prompt, Launchy and Colorize to add style.

Note: Before even sketching your app you should first research the right API for your app, play around and see what data can you get from it. In my case I used CoinGecko.

I created an API class with methods to handle gathering and parsing full information from the top 20 cryptocurrencies and from an individual cryptocurrency. Another method handles gathering and parsing partial information (Names and IDs) from ALL coins out there.

class FINDCRYPTO::API

    def initialize
        @url_top_20 = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20binancecoin%2C%20tether%2C%20polkadot%2C%20cardano%2C%20ripple%2C%20litecoin%2C%20chainlink%2C%20bitcoin-cash%2C%20stellar%2C%20usd-coin%2C%20uniswap%2C%20dogecoin%2C%20wrapped-bitcoin%2C%20okb%2C%20aave%2C%20cosmos%2C%20nem%2C%20solana%20%20&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h"
    end

    def get_top_20_cryptocurrencies
        request = URI.parse(@url_top_20)
        response = Net::HTTP.get_response(request)
        crypto_hash = JSON.parse(response.body)
        #binding.pry
        self.create_cryptocurrency_objects(crypto_hash)
    end 

    def create_cryptocurrency_objects(crypto_hash)
        crypto_hash.each do |crypto_object|
            FINDCRYPTO::Cryptocurrency.new(crypto_object)
        end
    end

    def get_data_from_new_crypto(crypto_id)
        url = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=#{crypto_id}&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h"
        request = URI.parse(url)
        response = Net::HTTP.get_response(request)
        crypto_hash = JSON.parse(response.body)
        self.create_cryptocurrency_objects(crypto_hash)
    end

    def get_all_cryptocurrencies_names_and_ids
        url = "https://api.coingecko.com/api/v3/coins/list?include_platform=false"
        request = URI.parse(url)
        response = Net::HTTP.get_response(request)
        crypto_hash = JSON.parse(response.body)
        self.create_cryptocurrency_names_and_ids_objects(crypto_hash)
    end

    def create_cryptocurrency_names_and_ids_objects(crypto_hash)
        crypto_hash.each do |crypto_object|
            FINDCRYPTO::Cryptocurrency_lookup.new(crypto_object)
        end
    end
end

The Cryptocurrency class takes a hash from the API class and handles the creation of individual cryptocurrency objects with full information, it also keeps on track of objects created.

class FINDCRYPTO::Cryptocurrency
    @@all = []

    def initialize(crypto_hash)
        crypto_hash.each do |key, value|
            self.class.attr_accessor(key)
            self.send("#{key}=", value)
        end
        @@all << self
    end

    def self.all
        @@all
    end
end

The Cryptocurrency_lookup class takes a hash from the API class and handles the creation of individual cryptocurrency objects with partial information (Names and IDs only), it also keeps on track of objects created. What's the point of this class? Well, first of all my app counts all available crypto coins, then we'll need a full list of coins along with its id in order to request full information of a specific coin from the API later.

class FINDCRYPTO::Cryptocurrency_lookup
    @@all = []

    def initialize(crypto_hash)
        crypto_hash.each do |key, value|
            self.class.attr_accessor(key)
            self.send("#{key}=", value)
        end
        @@all << self
    end

    def self.all
        @@all
    end
end

At this point you may be wondering what's that FINDCRYPTO:: right before a class name. Well, it's called module FINDCRYPTO and it's just a wrapper for our code.

module FINDCRYPTO
end

The CLI class keeps track of the user's menu choices. It initialize by displaying a welcome message along with the top 20 cryptocurrencies of the day and also gets a list of all crypto coins. The run method greets the user and displays the menu. In menu the user have the ability to select one of the 20 coins displayed, user can search for any cryptocurrency, user can also get updated data, see its logo in a browser or just display a list of 6000+ cryptocurrencies. The following code is easy to follow.

class FINDCRYPTO::CLI
    def initialize
        puts "\n"
        puts "--------------------------------$--------------------------------"
        crypt_is_everywhere = "Crypto Is Everywhere, But Should You Invest?"
        puts "           #{crypt_is_everywhere.colorize(:green)}          "
        puts "--------------------------------$--------------------------------"
        puts "\n"
        FINDCRYPTO::API.new.get_top_20_cryptocurrencies 
        FINDCRYPTO::API.new.get_all_cryptocurrencies_names_and_ids
        @prompt = TTY::Prompt.new(help_color: :cyan)
    end

    def run
        greeting
        menu
    end

    def greeting
        puts "There are exactly #{FINDCRYPTO::Cryptocurrency_lookup.all.count} cryptocurrencies at the time of this writing."
        puts "Some experts have suggested that Bitcoin could be worth as much as $100,000 one day!"
        puts "But, not everyone thinks investing in cryptocurrency is a good idea."
        puts "Check the following valuable data and make your own conclusions:"
        puts "\n"
    end

    def menu
        puts "--------------------------------$--------------------------------"
        top_20_crypt_prices = "Top 20 Cryptocurrency Prices by Market Cap:"
        puts "            #{top_20_crypt_prices.colorize(:green)}          "
        puts "--------------------------------$--------------------------------"
        display_top_20_cryptocurrencies
        puts "--------------------------------$--------------------------------"
        input = @prompt.select("Would you like more information?") do |menu|
            menu.choice "Yes, let me choose a cryptocurrency from the list above"
            menu.choice "Yes, but let me search for a different cryptocurrency"
            menu.choice "Nope! Please exit now."
        end

        if input == 'Yes, let me choose a cryptocurrency from the list above'
            input_number = @prompt.ask("Type its number please:", default: "e.g. 1 for Bitcoin")
        # if input.to_i > 0 && input.to_i <= FINDCRYPTO::Cryptocurrency.all.count
            number = input_number.to_i
            if number > FINDCRYPTO::Cryptocurrency.all.count || number == 0
                invalid_input_try_again
            else
                display_crypto(number)
                display_cryto_footer_menu
            end

        elsif input == 'Yes, but let me search for a different cryptocurrency'
            puts "-----------------------$------------------------"
            puts "Can't find your favorite crypto?"
            display_search_input = @prompt.select("Choose an option:") do |menu|
                menu.choice "Search a cryptocurrency"
                menu.choice "Show full list of cryptocurrencies"
                menu.choice "Go back"
                menu.choice "Exit"
            end
            if display_search_input == 'Show full list of cryptocurrencies'
                display_all_cryptocurrencies_names_and_ids
                display_cryto_footer_menu
            elsif display_search_input == 'Go back'
                menu
            elsif display_search_input == 'Search a cryptocurrency'
                display_new_crypto
            elsif display_search_input == 'Exit'
                exit_cli
            end

        elsif input == 'Nope! Please exit now.'
            exit_cli
        end 
    end



    def invalid_input_try_again
        puts "Invalid input. Please try again"
        sleep(1.5)
        menu
    end

    def exit_cli
        puts "If you don’t believe it or don’t get it, I don’t have the time to try to convince you, sorry."
        puts "– Satoshi Nakamoto"
        exit
    end

    def display_cryto_footer_menu
        puts "\n"
        puts "Very interesting, right?"
        back_to_menu_input = @prompt.select("Would you like to see data of another cryptocurrency?", %w(Yes Exit))
        if back_to_menu_input == "Yes"
            menu
        elsif back_to_menu_input == "Exit"
            exit_cli
        end
    end

    def display_new_crypto    
        input = @prompt.ask("Please type a Cryptocurrency name:", default: "e.g. Terra")

        FINDCRYPTO::Cryptocurrency.all.each.with_index(1) do |cryptocurrency, index| 
            if cryptocurrency.name.downcase == input.downcase
                crypto_id = cryptocurrency.id
                puts "Oops! #{cryptocurrency.name}'s price is already displayed in main menu."
                upadated_data_menu_input = @prompt.select("Do you want to see updated data?") do |menu|
                    menu.choice "Yes"
                    menu.choice "No. I love old news! Show me old data!"
                end
                #upadated_data_menu_input = gets.strip.downcase
                if upadated_data_menu_input == "Yes"
                    FINDCRYPTO::API.new.get_data_from_new_crypto(crypto_id)
                    number = FINDCRYPTO::Cryptocurrency.all.count
                    display_crypto(number)
                    display_cryto_footer_menu
                else upadated_data_menu_input == "No. I love old news! Show me old data!"
                    display_crypto(index)
                    display_cryto_footer_menu
                end
            end
        end
        ### Iterate over all 6000+ cryptos to confirm name
        FINDCRYPTO::Cryptocurrency_lookup.all.each do |cryptocurrency|
            if cryptocurrency.name.downcase == input.downcase
                crypto_id = cryptocurrency.id
                FINDCRYPTO::API.new.get_data_from_new_crypto(crypto_id)
                number = FINDCRYPTO::Cryptocurrency.all.count
                display_crypto(number)
                display_cryto_footer_menu
           end
        end

        puts "Oops!"
        puts "Sorry! I just iterated over #{FINDCRYPTO::Cryptocurrency_lookup.all.count} cryptocurrencies and I couldn't find '#{input}'"
        puts "Double check its name and try again!"
        sleep(1)
        display_new_crypto
    end

    def display_crypto(number)
        dollar_sign = '$'
        index_number = number -1
        crypto = FINDCRYPTO::Cryptocurrency.all[index_number]
        bar_left = "--------------------$"
        bar_right = "$--------------------"
        puts "#{bar_left.ljust(24)} #{crypto.name.upcase.ljust(10).colorize(:green)} #{bar_right}"
        puts "#{crypto.name}(#{crypto.symbol.upcase}) can be purchased on peer-to-peer networks"
        puts "and cryptocurrency exchanges, just like buying stocks."
        puts "-----------------------$ DATA $-----------------------"
        puts "*** This data is valid as #{convert_to_local_time(crypto.last_updated)} ***"
        coin_symbol_and_price = crypto.symbol.upcase + " price:"                  
        puts "#{coin_symbol_and_price.ljust(25)} #{dollar_sign.colorize(:green)}#{crypto.current_price.to_s.colorize(:green)}"
        pc24h = "Price Change 24 Hours:"
        puts "#{pc24h.ljust(25)} #{dollar_sign.colorize(:green)}#{crypto.price_change_24h.to_s.colorize(:green)} or #{sprintf('%+.2f', crypto.price_change_percentage_24h)}%"
        pc1h = "Price Change  1 Hour:"
        puts "#{pc1h.ljust(25)} #{dollar_sign.colorize(:green)}#{sprintf('%.2f', ((crypto.price_change_percentage_1h_in_currency * crypto.current_price)/100)).to_s.colorize(:green)} or #{sprintf('%+.2f', crypto.price_change_percentage_1h_in_currency)}%"
        hh24 = "24 Hour High:"
        puts "#{hh24.ljust(25)} #{dollar_sign.colorize(:green)}#{crypto.high_24h.to_s.colorize(:green)}"
        hl24 = "24 Hour Low:"
        puts "#{hl24.ljust(25)} #{dollar_sign.colorize(:green)}#{crypto.low_24h.to_s.colorize(:green)}"
        tv24 = "Trading Volume 24 Hours:"
        puts "#{tv24.ljust(25)} #{dollar_sign.colorize(:green)}#{crypto.total_volume.to_s.colorize(:green)}"
        mc = "Market Cap:"
        puts "#{mc.ljust(25)} #{dollar_sign.colorize(:green)}#{crypto.market_cap.to_s.colorize(:green)}"       
        mcr = "Market Cap Rank:"
        hash_sign = '#'
        puts "#{mcr.ljust(25)} #{hash_sign.colorize(:green)}#{crypto.market_cap_rank.to_s.colorize(:green)}"
        cs = "Circulating Supply:"
        puts "#{cs.ljust(25)} #{dollar_sign.colorize(:green)}#{crypto.circulating_supply.to_s.colorize(:green)}"
        #puts "Logo link: #{crypto.image}"
        puts "--------------------------$---------------------------"
        puts "Showing you #{crypto.name}'s logo in your browser!"
        sleep(1)
        Launchy.open(crypto.image)
    end

    def display_top_20_cryptocurrencies
        dollar_sign = '$'
        dot = '.'
        price_string = 'PRICE:'
        puts "#   COIN:                #{price_string.colorize(:green)}              DATE:"
        FINDCRYPTO::Cryptocurrency.all.each.with_index(1) do |cryptocurrency, index|
            puts "#{index.to_s.ljust(3)} #{cryptocurrency.name.ljust(20)} #{dollar_sign.colorize(:green)}#{cryptocurrency.current_price.to_s.ljust(18).colorize(:green)} #{convert_to_local_time(cryptocurrency.last_updated)}"
        end
    end

    def display_all_cryptocurrencies_names_and_ids
        puts "***This is a LOOOOOOOOOONG list! I'm warning you!***"
        sleep(1)
        puts "#  COIN:"
        FINDCRYPTO::Cryptocurrency_lookup.all.each.with_index(1) do |cryptocurrency, index|
            puts "#{index}. #{cryptocurrency.name}(#{cryptocurrency.symbol.upcase})"
        end
    end

    private
    def convert_to_local_time(utc_time) 
        utc_parsed = Time.parse(utc_time)
        utc_parsed.localtime
    end
end

In order to RUN this app you'll need to set up your environment:

require 'pry'
require 'net/http'
require 'open-uri'
require 'json'
require 'tty-prompt'
require 'launchy'
require 'colorize'

require_relative '../lib/modules/findcrypto.rb'
require_relative '../lib/api'
require_relative '../lib/cli'
require_relative '../lib/cryptocurrency'
require_relative '../lib/cryptocurrency_lookup'

And make sure to create a run file:

#!/usr/bin/env ruby

require_relative '../config/environment'

FINDCRYPTO::CLI.new.run

Final product:

Check out a quick YouTube video of my project.
Check out the project here on GitHub!

Why did you decide to study Software Engineering?

Danny Rivera — Sat, 13 Feb 2021 14:52:54 +0000

Ever since I was a little kid back in Ecuador I always thought I was destined for success, daydreaming about rockets and technology. My elementary school teacher used to tell me I was brilliant in Mathematics, my high school teacher was very impressed because I was the very first student to ever graduate high school with a perfect score in Mathematics and Physics. They both told me "I can't wait to see where do you ended up".

I studied civil engineering in college but unfortunately I had to drop out and move here to the USA because my girlfriend got pregnant and I wanted to be a responsible man.

Here in the USA I got so much energy and inspiration from NYC and technology entrepreneurs especially Elon Musk. I wanted to be the next "dropout self-made millionaire" so bad that I started educating myself in Economics, Programing, Stock Trading, Marketing, Graphic design and yes even English by just watching South Park ("Goddamnit") and reading books.

In the following years I partnered up with a friend and set up a delivery service for small businesses in NYC, I launched a website and app for printing photos from social media accounts, I launched a website that helps small businesses grow their exposure in social media, I launched an online clothing store, I opened a Star Wars themed pizzeria in Ecuador, I opened one of the best SkateShops in Ecuador and some other projects. I thought I was doing great, drunk in this "take risk mindset" but then my delivery service lost our main client and everything collapsed from there. I realized I was just subsidizing my side projects, I tried to save them so bad but I lost everything and ended up with over $100k in debt in my mid twenties.

"Fear incentives my creativity"
I went though dark times, I had to promise my wife I would give up on my entrepreneurial dreams and start fresh, I ended up working in Bloomberg LP and soon after I was creating automation solutions for my team and my goal now is to work in the Engineering department but I don't even have a college degree. My mentor advised me to enroll this Software Engineering program here in Flatiron School so I can get the right skills. He again just like my school teacher told me: "I can't wait to see where do you ended up".

I always thought I was destined for success, then I lost almost a decade on my journey. I always wanted to be an inventor, an entrepreneur, create something from scratch, I know I promised my wife I would give up on my dreams, but deep inside I still have that flame eager to conquer the world. This is why I decided to study Software Engineering.