DEV Community: RJasonClarke

Creating A React App

RJasonClarke — Wed, 19 Jan 2022 16:19:06 +0000

For my final project I decided to challenge myself a little more by branching off into a project that was not just a bland data management app like previous projects. I decided to go with an app that would allow users to create their own custom flash cards and use those same cards to study for whatever they desire. As I stated before it was out of the ordinary so I knew the journey ahead was going to be a tough one for sure.

I started out by making my Rails API which had become significantly easier thanks to the great material and support from Flatiron staff during the Rails module. Once the API was complete I moved on to create a React app where I imported all of the required extensions and dependencies I would need for the project such as React itself, ReactDOM, Redux, thunk and etc. From that point I immediately started learning how to make asynchronous requests with fetch inside of my components since this was going to be a major focus on the project plus any project involving an API for that matter.

After struggling with the React learning curve for about a week I started understanding asynchronous requests and how to display the data inside of my React components. My project wasn't full CRUD but all I really needed was a Read operation to display information and an Update operation to allow users to create their own cards. Once I felt comfortable I moved on to shaping out the rest of the app with routing, component placement, and eventually styling with CSS.

After a few more weeks plus struggling to study during the holidays I managed to finish my app named "Flash-Study" that met all project requirements, met MVP(Minimum Viable Product) goals, and worked as intended. It was a major learning opportunity for not only React but for all other technologies I learned along the way. This may be the last project for Flatiron but I still have so many more ahead of me that I cannot wait to start!

Flatiron project 4

RJasonClarke — Fri, 15 Oct 2021 03:30:35 +0000

Here we are at number four with just one more project to go! This particular module really made me feel like I made the right decision in choosing a web development career path. Although my project is a bit rough it has still allowed me to prove to myself than I can overcome whatever challenge may come my way by using the strong foundation of knowledge that Flatiron has provided. With that said I will continue to discuss the project and the multiple steps that were followed along the way.

For this project I was required to make a Rails API backend with a JS frontend to make a single page application. The backend seemed simple enough considering that I had spent an entire two months of banging my head against a desk to learn Rails associations and the other multiple moving parts. To my surprise the backend was a very simple has_many association. The first thing that came to mind was creating an app that let users create game reviews that would be stored within descriptive lists such as genres or a custom list title. After creating my models, migrations, and seed data I got to learn a bit about CORS which was basically a security measure used in Rails to only deal with requests from your specified origin. This had to be uncommented and configured before I cold do anything with my frontend.

For my frontend I spent a lot of time studying the 3 pillars of JS how to manipulate the DOM, make fetch requests(POST, PATCH, DELETE), and the fun part EVENT LISTENERS. It was pretty intimidating to know that I would be taking on a second language and would be expected to know enough to demonstrate the 3 pillars over such a short period of time (I gave myself two months). It was quite a journey with multiple frustrations but in the end I rose above and completed the project with a much deeper understanding of not only JS but of Rails also. I look forward to learning React in the next module so I can really bring everything together and feel prepared to take on bigger projects.

Flatiron Rails Project

RJasonClarke — Sun, 22 Aug 2021 23:31:01 +0000

Finally, Rails has been a section I've really been looking forward to since the start of the program and I can't believe I'm finally here. Sinatra was a great intro to CRUD but now I feel like I'm prepping to compete with the real deal web developers out there.

First day of learning Rails was filled with a lot of familiar concepts that were presented with Sinatra but simplified. Lots of things in Rails were generated with all of their required directories such as Controllers generating with views and even the database files became very simple to work with. Instant fan.

After learning how to generate a Rails project and my files I started working on my models and giving them the appropriate associations I would need for my project. The project I chose to work on was a simple data management project that I could relate to a past job. In this past job there was a lot of miscommunication or sometimes a lack of communication in general so I figured that a job board listing jobs and their details would be a great way for employees to get an idea of what their given task would entail.

For this app I would need a model for users, jobs, and tools. Users would need the ability to make a profile, post a job, and list tools needed for that particular job. To even start doing that I would have to make the User table within the database take in an email and a password. After that I would need to go to the model and require each user to has those specific attributes via validations before they could make a profile. Once everything was set for the user model I was able to move on to the job model and require each job to have a title and the option of a description. The way to do this would be to go into the job model and list the description as "optional: true" or simply put no limitation on adding a description. Lastly I had the tool model that simply needed a title since only the names were going to be listed under job as an index.

Next came the process of working on my controllers where all of my apps logic will be stored. It didn't take too long to adjust to writing the controllers simply because previous lessons had prepared me for any sort of ruby conundrum that I may encounter. It was all just a matter of learning rails conventions.

The last and least stressful part of the project had to be the views. The views were a majority html with embedded ruby. Very simple with lots of room to play around with different designs and make things a bit more organized with the frontend.

Flatiron Sinatra Project

RJasonClarke — Mon, 28 Jun 2021 18:12:02 +0000

Here we are at project #2 and I can hardly contain my excitement for finally learning how to build a website! For my project I made a web app that will allow users to create lists where they can store movie titles. The app will allow them to create, read, update, and delete (C.R.U.D.) items they add to their user profile within the app. At first this project was hard to comprehend but in the end it all started making sense. Shoutout to the former Flatiron student that made the Corneal gem. You saved me a headache.

After running the Corneal gem and setting the structure for my app I started on my migration folder by creating my tables for users, lists, and movies.

Next would be the models. Each user would have their lists and each list would have it's movies. This would require me to give the users and lists models a has_many relation. Movies and lists would go on to have a belongs_to relation. While adding the realtions I also added validations that would check to see if user input is valid.

When I finished the models I moved on to the controllers. There is the application controller that inherits from Sinatra and a users and lists controller that inherit from the application controller. The user and lists controller are made for the purpose of creating CRUD actions while the application controller is used for giving access to all of the methods like GET and POST.

Once the controllers were finished I started on the routes for each page.

Create: Done through a GET route and stores the information with a POST route.

Read: Done by adding another GET route which I could use to list all movie lists that belong to a specific user. This is possible because of the activerecord methods has_many and belongs_to that were used in the lit and user models.

Update: Done by using a GET route and adding logic to find the list by it's ID then using extended ruby to add new changes to the list name.

Delete: Delete is done by simply finding the object that you are searching for and using the destroy method from activerecord.

After my routes were done I started on my views to lay out the pages to communicate what options were available to the user. Sinatra uses ERB (extended ruby) which allows us to write html as if it were an html file. Inside of the erb files is where I wrote the form tags that contain code that would would send information to the databases I created back when I made my tables.

Post method: Allowed me to save info to a table within the database.

Patch method: Allowed me to update information within a table.

Since CSS wasn't listed as a requirement I simply left everything the way it was when I used the Corneal gem. This includes the HTML that was included as well.

My Flatiron CLI Project

RJasonClarke — Wed, 19 May 2021 16:15:12 +0000

First of all I want to say that this project has been a huge learning experience for me. Between seeking out information that was not covered in class and problem solving on my own I can truly say that I have gained a lot of confidence in my programming and it feels AMAZING.

After watching the walkthrough provided on the CLI project page I began to ponder my own idea for a scraper. I knew what it needed to do but I had to make it my own without being to similar to the examples in class. I browsed an article or two and happen to come across a top video game list and thought to myself "PERFECT!". It had each game title listed individually and even provided an explanation of each one and Metacritic rankings right below.

Now that I had my url for the scraper I just had to do a little pseudo-coding to give myself an idea of what steps I need to take to make my idea a reality.

Show user the full list of games
Give user the option to see more details
Loop back until user exits

After following the directions in the walkthrough I followed directions on how to generate a directory for everything I required. I started with my binary or "bin" file since that would be the first part of the app that a user would be interacting with. Upon opening the bin file I had to add a shebang (#!/usr/bin/ruby) that gives the shell the path to the ruby interpreter.

After working on my CLI file for a while I decided to save the progress to my repository. Boy was I not ready for the amount of hoops I had to jump through to get that working properly. It took me quite a while but I figured out how to update my repository and continued with the project.

Next I moved on to the star of the show, the scraper. This too caused me a bit of trouble at the start but after researching how to use open-uri I discovered that Nokogiri::HTML(open(url)) did not work the same as it was shown in the walkthrough from the project page. I simply had to add "URI" before open and it worked properly.

When I finished getting the url with open-uri and parsing it with nokogiri I got to dig around inside of the html and find the exact tags I needed for listing the games. Inside the HTML I found that the titles, ranks, and descriptions were all stored under the class ".slide" so I grabbed it and wrote an each method to store the information I required into an array I had stored in a class named Game.

doc.css(".slide").each do |site|
game = Game.new
game.title = site.css("h2").text
game.critic = site.css("p")[0].text
game.user = site.css("p")[1].text
game.description = site.css("p")[2, 1].text
end

I stored each individual part of the .slide class into a different variable so they could be be returned individually when called on. After getting the results from the array I had to use a reverse method on the array since the games were listed in a descending order on the site.

After that was finished I simply had to add the methods I had created to my CLI so they could return the proper information that the user was requesting. This was by far the easiest part of the project since its pretty much just giving the user options, taking their input, and giving results.

A few days later I was able to polish up my app and update my repository with its last commit! As I said before, this project was a real benefit to my programming and confidence. I look forward to starting the new project and seeing what I can learn from its challenges!

To add to my post, I got to learn the importance of return values and more about the each and map methods after my project review.

Return values held more value than I had previously believed. After using "puts" for nearly everything within my app I had completely forgotten the use of return values. The reason I bring up puts is because it is used only to show output within the terminal for problem solving purposes while return is primarily used to store its output within a variable for further use in an application.

Each and map have always been those two methods that trip me up at every turn so I went back to get a deeper understanding on them as well. The each method will always return the same return value.

For example, when I use this array in the method below it will always return the same values with absolutely no changes after.

array = ["burgers", "fries", "pizza"]

def food(array)
array.each do |arr|
puts "I love #{arr}."
end
end

would give the result

I love burgers.
I love fries.
I love pizza.
=> ["burgers", "fries", "pizza"]

Map on the other hand would return an entirely different return value. If I were to change the above code into a map method and remove puts my return value for the array would be

=> ["I love burgers.", "I love fries.", "I love pizza."]

In conclusion, a return value and the puts method are two entirely different things. Also, each and map serve almost the same purpose when it comes to iteration but have totally different return values. Each returns it's original values while map returns new values.