Forem: Roshaan Singh

Finally finished with the Flatiron School self-paced software engineering program!

Roshaan Singh — Fri, 01 Jul 2022 19:59:52 +0000

After hundreds of hours, countless labs, and 5 big portfolio projects, I am finally done with the Flatiron School's self-paced software engineering program, and can call myself a bootcamp graduate.

My journey throughout this course was full of some ups, and lots of downs, but I pushed through the labs and readings to get where I am now. Overall, I think this 'career change' was 100% worth it, and I would definitely recommend to anyone that is interested or on the fence.

When I started the program, I had zero knowledge of coding/programming, but I have always been very tech savvy, so I was confident I could learn. Never could I have imagined that I would be capable of developing entire web applications from scratch in such a short time, yet here I am.

My original life plan was to become a doctor, but after shadowing a doctor and seeing how the lifestyle is, as well as hearing from countless family friends about what they deal with on a daily basis, I decided to switch to dentistry. I figured that as a dentist, I would basically be working a typical 8 hour job, setting my own hours with my own practice, making good money, and having a sustainable work/life balance.

However, after weighing my options on going to dental school for 4 years and going another $250k+ into student debt, or enrolling in the Flatiron School for a fraction of that, I decided to take the leap and switch to software engineering. I am so glad that a family friend told me about Flatiron and that I pushed myself out of my comfort zone and went for a career in software, especially since my friends in medical/dental school are constantly complaining to me about how miserable they are! A huge motivating factor for my career change was that I want to start making money as soon as possible so that my parents can retire sooner and enjoy life, since they risked everything by coming to the US with nothing, and built such a blessed and privileged life for me and my sister. The Flatiron School has streamlined the path to my goals, and I could not be more grateful for that.

I have a bunch of regrets in my life on career decisions I made during high school and college, but the Flatiron School is one the few decisions that I am genuinely happy about and it has definitely restored my hope for the future and what my software career will bring me. If anyone reading this is considering a career change into software, I highly recommend you do it ASAP, especially if you choose the Flatiron School!

React / Rails project

Roshaan Singh — Mon, 27 Jun 2022 04:12:48 +0000

Project Github link

For this final project, I decided to expand on my phase 2 project, which was a Pokemon team creator, by making it more robust and aesthetically pleasing. Aside from a couple bumps in the road that slowed down my progress, this project felt like it was the easiest of all, thanks to my solid foundation of Ruby/Rails, as well as how easy and intuitive React is to work with.

Basically my application allows for users to signup/login and create teams of 6 Pokemon which are saved to the app's database. Users are allowed to pick from any of the 898 Pokemon pulled from PokeAPI. Users can view the teams they themselves have created, or look at all teams in the database, regardless of the user that created them. Users can also look at a "Pokedex" in case they just want to look through all the Pokemon. The Pokedex also renders below the 'new team' form so that users can match the form selection with the correct Pokemon ID number.

At first, I had some trouble setting up the User authentication feature in the backend since I had not done that for a while, but I found a YouTube channel called edutechional that has an excellent playlist on setting up a Rails API with User authentication. The videos were only helpful in setting up the backend though since they were made for an app that does not use Redux, so I was on my own for that part.

This leads to the most frustrating part of this project - getting the Redux store to actually update and keep the data being dispatched to it. I spent 4 days of work trying to figure out why my action was being dispatched with the proper payload to the reducer, but my Redux store still was not updating. I used Redux DevTools and confirmed that the dispatch was going through properly, and I tried every solution ranging from syntax changes, to installing older versions of dependencies, and even starting my whole project over at one point. Then one day when I was looking through StackOverflow, I saw an answer to my question that fixed everything and relieved a week long headache - I accidentally had my navbar setup so that redirects were refreshing the entire window, causing the Redux store to reset on every click.

After that ~~major~~ minor problem was solved, the rest of the project was a breeze since React is pretty straightforward to work with, and the labs I had worked on throughout phase 5 properly prepared me for what was required.

Surprisingly, just like the phase 4 project, my favorite part of the phase 5 project ended up being the CSS styling portion. Exploring the different methods that can be used to manipulate text and divs was fun to mess around with, and I utilized the use of image url backgrounds to make the app look a lot more visually appealing compared to my previous projects.

Overall, this project is the one I am most proud of even though it was arguably the easiest since a year ago, I never could have imagined that I would be able to create something like this from almost nothing. This project was a great first-step towards making a strong portfolio that will hopefully land me a job as soon as possible.

Almost finished with the Flatiron School program

Roshaan Singh — Fri, 01 Apr 2022 05:03:38 +0000

As I begin the last phase of the Flatiron School self-paced software engineering program, I wanted to write a blogpost recapping my code journey thus far. Even though 2021 was one of the worst years in my life, as well as for my family, the Flatiron bootcamp was a bright spot among the negatives since I knew I would have a great career to look forward to once I completed the course.

I enrolled in the Flatiron School back in late February of 2021, and started off strong in the lessons since I had been doing the free JavaScript intro lessons, so I was pretty familiar with how labs and lecture material worked. After a month or so of being fairly consistent in my lessons/labs, I felt I was on pace to finish the course within 6 months, but then bad luck kept striking. For the next few months, my family and I dealt with a death in our extended family at least once a month, taking my focus away from my studies. While I was helping my family through this tough time, my dad ended up getting laid-off, so I decided to pick up a part-time job to keep the money coming in. These 2 things really made it difficult to stay consistent with my lessons, until my dad ended up getting a new job and I could put my focus back towards the Flatiron program. Around October/November, I jumped back into my labs/lessons and chugged through the material so that I could finish as fast as possible without compromising my learning. Fast forward a few months and I am now entering the last phase of the program, more confident than ever in my coding abilities and eagerly anticipating my future career in software.

Back in early 2021, I never could have dreamed that I would be able to code and create apps/websites from scratch within the span of a year, yet here I am with a skillset that has nothing to do with the things I spent 4 years in college learning about. Without the Flatiron School, I was on the path to become a dentist, and hearing stories from my friends that are currently in dental school about how miserable they are makes me extremely grateful for this program. Not to mention I saved about $250k in student debt and 3 years of additional schooling by shifting careers.

JS-Rails project

Roshaan Singh — Tue, 29 Mar 2022 05:27:10 +0000

(https://github.com/RoUchiha/flatiron-phase-4-portfolio-project)

This project felt like an extension of the previous Phase 3 project, and showed how everything I have been learning is building up my foundation. Overall, I think this project was the best implementation of my current coding knowledge since it mimics how a real website would work and interact with a user.

For this Phase 4 portfolio project, I decided to create a Workout Planner that allowed users to create exercises and add them to a workout. The "workouts" were actually the 7 days of the week, so the user would add the exercises to the days they plan to do them on. Each exercise had a name, a category (resistance, cardio, or calisthenics), sets (if it was resistance or calisthenics), and distance (if it was cardio). Each time a new exercise was created, it would be added to the appropriate day without reloading the page. Once an exercise was added to a workout, there would be a button for the user to delete the exercise if they wanted.

Setting up the backend for this project was the easiest part since I have a good amount of familiarity with Rails, and using Rails as an API also means less coding since there are no views to write up. I originally had a more complicated project in mind before I was humbled by how much I still have to learn when it comes to robust sites like the ones we are used to visiting everyday.
After creating the models and controllers, I made the serializers and then checked localhost for the seed data I created, and everything ended up being how I wanted it to be, so I finally switched over to working on the frontend.

class ExerciseSerializer < ActiveModel::Serializer

    attributes :id, :name, :category, :sets, :distance, :workout_id

end

class WorkoutSerializer < ActiveModel::Serializer

    attributes :date, :name, :id, :exercises
    has_many :exercises

end

My main struggles with this project came from setting up the frontend, not necessarily because the coding was difficult, but because I am so used to thinking in Rails and JavaScript is still a new language to me. I would have ideas on how to proceed with the project, and then realize the method or function I wanted to use doesn't exist in JS and had to be written manually. Because of this, I spent a lot of time thinking about my code in Rails, then googling what that Rails code would look like as JavaScript and testing it out. The resource links at the bottom of Canvas lessons was very helpful for this task, and I highly recommend all students visit them. Things like fetch requests were easier than I expected since they follow a standard pattern, and most of my methods were identical between the two classes I implemented. There were also a few JS concepts that were similar to concepts I learned in Ruby/Rails, such as 'constructor' reminding me of the 'initialize' method from way back. Finding the similarities between the two languages really helped me grasp what I needed to do and how to go about doing it. After setting up my JS classes and methods, I coded up some HTML to setup my website and had the basic structure for what I wanted, as well as all functions properly working.

class WorkoutServices {
    constructor(baseURL) {
        this.baseURL = baseURL; 
    };

    getWorkouts() {
        fetch(this.baseURL) 
        .then(resp => resp.json()) 
        .then (json => {
            json.forEach(workout => {
                const workouts = new Workout(workout);
                workouts.renderWorkout();
            });
        });
    }

class Workout {
    constructor({name, date, exercises, id}) {
        this.name = name;
        this.date = date;
        this.exercises = exercises;
        this.id = id;
    };

    renderWorkout() {
        const workoutAll = document.getElementById("workouts-container");
        workoutAll.classList.add("workout");

        const workoutName = document.createElement("h2");
        workoutName.innerHTML = this.name + "'s workout";
        workoutName.name = this.name;
        workoutName.classList.add(`workout-data`);

        workoutName.id = `workout-${this.id}`;

        workoutAll.appendChild(workoutName);

        const exerciseList = this.renderExercises(); 
        workoutName.appendChild(exerciseList);
    };

    renderExercises() {
        const exercises = this.exercises;
        const list = document.createElement("ul");

        exercises.forEach(exercise => { 
            const newExercise = new Exercise(exercise); 

            console.log(exercise, "exercise");

            const nameList = newExercise.renderExercise();

            list.appendChild(nameList);
        });
        return list;
    };
}

Surprisingly, the most enjoyable part of this project was the CSS styling portion. It was fun seeing what properties I could assign to different elements and then seeing those changes reflected on the website. I kept everything pretty basic since I didn't want to distract from the core functionality of the project, just make it slightly more appealing to look at. I used the dev console (F12) to see which elements were which and how I wanted to style them. I placed borders around each workout and around the exercise form to make all the text appear more organized and less overwhelming to look at.

All in all, this project was a great learning experience for what I assume is expected of a full-stack web developer, and I hope to strengthen my backend & frontend development skills further so that I can make bigger and better websites in the future.

Rails App project

Roshaan Singh — Sat, 12 Feb 2022 05:17:46 +0000

(https://github.com/RoUchiha/Flatiron-Phase-3-Rails-app-portfolio-project)

This project felt a lot like the project for Phase 2, only lengthier. Most of what was required of me was fairly simple, but the amount of coding that had to be done is what made this a challenge. More code means more chances for mistakes, and I ended up catching quite a few of my own.

The Rails app I made is a TV Show Tracker that allows users to sign up, create shows, and then leave ratings/reviews for other users to see once they have finished watching that show. The most challenging part of this app was getting the routes figured out and preventing access to pages if a user was not signed in. After that was done, the next challenge was creating the Rating and Comment objects via nested resources. Thanks to some Google searching, I eventually solved the errors that kept popping up and the rest of the app was easily completed. Utilizing OmniAuth to allow users to signup/login via GitHub was easy since I followed the conventions from a previous lesson.

def create 
        user = User.find_by(username: params[:session][:username].downcase)
        if user && user.authenticate(params[:session][:password])
            session[:user_id] = user.id 
            redirect_to user_path(user)
        else
            flash[:alert] = "Incorrect username and/or password. Please try again."
            render :new 
        end
    end

def github_login
        @user = User.find_by(username: auth[:info][:nickname])

        if @user.nil?
            @user = User.new(
                username: auth[:info][:nickname],
                full_name: auth[:info][:name],
                password: SecureRandom.uuid
            )
        end
        if @user.save 
            session[:user_id] = @user.id 
            redirect_to user_path(session[:user_id])
        else
            render :new 
        end
    end

This app utilizes a lot of has_many and has_many_through relationships that made the functionality of the app a lot smoother, and made it easy to create associations between parent and child objects. I also took advantage of Flash alerts to display errors and let users know why they cannot access a certain page.

An area I still need to improve on is making my app look nice via CSS/HTML styling. I kept everything a basic black and white barebones look so that I could finish the project as fast as possible and move on to the next Phase, but I plan on working towards getting better at styling for the next couple of projects.

This project felt like more of what would be expected of me in a "real world" situation where I need to make a website/app, and I feel like I have a strong grasp on these basics now.

Sinatra CMS project

Roshaan Singh — Wed, 01 Dec 2021 07:17:46 +0000

(https://github.com/RoUchiha/sinatra-content-management-system-app)

This project was my first experience building something that felt like a real website. Compared to the final project for Phase 1, I found this assignment much easier, most likely because I am much more comfortable with coding now than I was back then.

My web application is a Pokemon Team Creator. A user is given the option to either log in to an existing account, or create a new one. The User Controller validates the presence of all fields in the sign up form and adds the new user to the database, then redirects them to their Trainer homepage. There, they are greeted and shown all Pokemon that they have created and added to their team, and they are also given the option to create a new Pokemon for their team. If a user already has an account, they can login and their credentials are validated before being redirected to the Trainer homepage. If there are incorrect or missing credentials, the user is redirected back to the login page with an error message.

post '/signup' do
        if params[:trainer_name] == "" || params[:gender] == "" || params[:email] == "" || params[:password] == ""
            erb :'trainers/new', locals: {message: "Please fill out all fields!"}

        else
            @trainer = Trainer.new(:trainer_name => params[:trainer_name], :gender => params[:gender], :email => params[:email], :password => params[:password])
            @trainer.save
            session[:user_id] = @trainer.id
            redirect "/trainers/#{@trainer.slug}"
        end
    end

post '/login' do
        @trainer = Trainer.find_by(:email => params[:email])

        if @trainer && @trainer.authenticate(params[:password])
            session[:user_id] = @trainer.id
            redirect "/trainers/#{@trainer.slug}"
        else
            erb :'trainers/login', locals: {message: "Email and/or password is incorrect! Please check credentials and try again."}
        end
    end

From the Trainer homepage, the user can logout, view their Trainer info, view all Pokemon in the database, or create a new Pokemon. When viewing Trainer info, the user is taken to a page that loads the 'trainer/index' view, displaying the user's Trainer Name and email. When a user views all Pokemon in the database, they are shown every Pokemon that has created by every user, with the name of Trainer that owns that Pokemon next to the Pokemon's name. Creating a new Pokemon loads the 'pokemons/new' view which, upon submitting, creates a new Pokemon and links that Pokemon to the user, and then redirects to the 'show' view for that newly created Pokemon.

Editing or deleting a Pokemon first validates if there is a user logged in, and then checks if the current user is actually the owner of the Pokemon that the user is attempting to edit/delete.

patch '/pokemons/:slug' do
        @pokemon = Pokemon.find_by_slug(params[:slug])
        @trainer = Trainer.find(session[:user_id])
        if params[:name] == "" || params[:type1] == ""
            erb :'pokemons/edit', locals: {message: "Please fill out at least the Pokemon's name and primary type!"}
            redirect "/pokemons/#{@pokemon.slug}/edit"
        else
            @pokemon.name = params[:name]
            @pokemon.nickname = params[:nickname]
            @pokemon.type1 = params[:type1]
            @pokemon.type2 = params[:type2]
            @pokemon.save 
            redirect "/pokemons/#{@pokemon.slug}"
        end
    end

    get '/pokemons/:slug/delete' do
        @pokemon = Pokemon.find_by_slug(params[:slug])
        @trainer = Trainer.find(session[:user_id])
        if logged_in? 
            if @pokemon.trainer_id == @trainer.id
                @pokemon.delete
                redirect "/pokemons"
            else
                redirect "/pokemons"
            end
        else
            redirect "/"
        end
    end

Overall, I enjoyed the process of creating this web application much more than the Phase 1 Ruby CLI project. Everything that was required of me for this project made sense and I did not feel the need to plan anything ahead since it was all so straight-forward. I did however get stuck on a few areas where I tried to add additional functionality beyond the scope of what was required for this project, such as allowing the user to edit their credentials/info, and implementing a "best buddy" feature for when the user creates a Pokemon and wants to make it their "best buddy", which would cause that Pokemon to be displayed on the user's Trainer Info page. I could not figure out how to properly implement a true/false checkbox and then update the new Pokemon's "best buddy" property, so I decided to scrap the whole idea.

I think this project gave me a lot of ideas on how I can turn such a simple web application into something much more complex and robust, and I look forward on learning techniques to do just that.

Ruby CLI app project

Roshaan Singh — Thu, 26 Aug 2021 04:29:57 +0000

This project was my first experience coding something from scratch without having a guiding hand help me figure everything out (aka rspec test suites), and I feel like I definitely leveled up my game.

I decided to make a CLI app that scrapes for data on a zip-code's 5 day weather forecast. I got this idea from my dad, who is always asking me what the weather currently is or is going to be throughout the week. I originally tried to scrape from a Google search, but had no luck getting the data for some reason, regardless of what css selectors I used, so switched to Weather.com instead and it was much more straightforward.

I had a general idea of what I wanted the app to do and how many classes there would be interacting with each other, so translating that to a flow diagram was very simple and made the overall functionality even clearer.

I originally had created an app that just scrapes for a location's rain chances, and then realized that it did not go "one level deep" as required by the project guidelines, so my flow diagram is not entirely accurate. The overall interaction between the 3 classes is still the same, however.

I ended up creating a Search class, a Scraper class, and a Weatherclass. The Search class had the responsibility of taking a zip code that the user inputs and finding the Weather.com url for that zip code. The Scraper class took that url in the form of a Search class instance and scraped the page for info on the 5 day forecast and pushed the High temp, low temp, and rain chances into an array in the form of a hash. The Weather class then took an instance of the Scraper class and assigned each hash from the array to a different Day variable. The bin file would take a user's input of a zip code and create an instance of the Weather class with it and ask the user which day's weather data they wanted to see via CLI. After outputting the forecast, the CLI then asks if the user wants to see the forecast for another day. If the user says no, the CLI asks if the user wants to look up the 5 day forecast for a different zip code. If they user says yes, the program runs again; if the user says no, the program exits.

class Search

    attr_accessor :location, :zip_url

    def initialize(location)
        if location < 501 || location > 99950
            raise ArgumentError 
        else
            searcher(location)
        end
    end

    def searcher(zip)
        fixed_zip = zip_convert(zip)
        uri = Addressable::URI.parse('https://weather.com/weather/today/l/' + fixed_zip)        
        @zip_url = uri.to_s
    end

    def zip_convert(code)
        zcode = code.to_s
        while zcode.length < 5 do
            zcode = "0" + zcode
        end
        return zcode
    end
end

class Scraper

    attr_accessor :location, :outlook

    def initialize(location)
        scrape_rain(location)
    end

    def scrape_rain(zip)
        @outlook = []
        link = Search.new(zip).zip_url
        html = URI.open(link)
        weather = Nokogiri::HTML(html)
        weather.css('.DailyWeatherCard--TableWrapper--3mjsg').css('.WeatherTable--columns--OWgEl li.Column--column--1p659').each do |w|
            i = 0
            if w.css('.Column--temp--5hqI_')[i].text == "--"
                @outlook << {
                    :high => weather.css('.CurrentConditions--primary--2SVPh .CurrentConditions--tempValue--3a50n').text,
                    :low => w.css('.Column--tempLo--1GNnT')[i].text,
                    :rain => w.css('.Column--precip--2ck8J .Accessibility--visuallyHidden--2uGW3')[i].text
                    }
            else
                @outlook << {
                    :high => w.css('.Column--temp--5hqI_')[i].text,
                    :low => w.css('.Column--tempLo--1GNnT')[i].text,
                    :rain => w.css('.Column--precip--2ck8J .Accessibility--visuallyHidden--2uGW3')[i].text
                    }
            end
            i += 1
        end       
    end 
end

class Weather

    attr_accessor :location, :day1, :day2, :day3, :day4, :day5

    def initialize(location)
        chances = Scraper.new(location).outlook
        @day1 = chances[0]
        @day2 = chances[1]
        @day3 = chances[2]
        @day4 = chances[3]
        @day5 = chances[4]
    end
end

Overall, the basic structure and relationship of these three classes came easily, but the real issues arose when I tried to put them all together in a bin executable file. After testing the app in irb, I kept getting errors in the output data, and I eventually realized that the user input was being converted from a string to an integer, so any zip code with leading zeros was being altered. After hours of googling, I found out the solution to this was to convert the integer back to a string using integer.to_s(8) which would use a radix base of 8 to convert the integer to its' original value, just without the leading zeros. Converting this string back into an integer did not alter the value, so I added leading zeros as necessary while it was still in string form. This roadblock in the project took the longest to figure out compared to every other issue (most of which were just typos), and I was incredibly relieved to see my code working at the end of the struggle.

This project taught me a lot about the process of coding from scratch and what it takes to build something that works exactly how you want it to. Although this CLI app is not much compared to other projects I will complete in the future, I am very proud of what I have done. Before starting the Flatiron Bootcamp, I never would have believed I could actually make something using code.