DEV Community: Lesly Juarez

CoffeeCoffeeCoffee

Lesly Juarez — Wed, 08 Mar 2023 17:59:36 +0000

For this project I wanted to create a web application that would allow users to keep track of the espresso they brew. A user would be able to add a brewing entry, edit the brewing entry and include information about the equipment used. A user would also be able to add comments to the entry.

Models

User has_secure_password has_many :brews has_many :comments has_many :brew_comments, through: :brews, source: :comments

Brew belongs_to :user belongs_to :equipment has_many :comments has_many :users_commented, through: :comments, source: :user

Comment belongs_to :user belongs_to :brew

Equipment has_many :brews

rails generate resource

I wanted to allow the user to add information about the equipment they used to brew the coffee. I created another migration Equipment that had accepted brand_model as a string.

OmniAuth I used this blog post to setup a social login for my web application. I followed the instructions by creating an app in Google Developers Console and started the rails server to make sure it was working properly so far. I received the following error: No route matches [GET] “/auth/google_oauth2. After checking for spelling errors in the routes and views I checked the authorized redirect URIs I had listed in the credentials section of the Google Developers Console. I was finally able to find a Stack Overflow question with a similar issue. The suggested solution was to add:

Gemfile

gem 'omniauth-rails_csrf_protection'

The next step entailed changing links to POST requests:

link_to "Log In with Google", "/auth/google_oauth2", method: :post
# or
button_to link_to "Log In with Google", "/auth/google_oauth2"

The code above worked! I ran the rails server and I didn’t get the error I kept getting earlier.

Mod 3

Lesly Juarez — Sat, 30 Apr 2022 12:50:30 +0000

The idea for this project came into existence after misplacing a notebook that I used to keep track of the different kinds of coffee and the brewing methods used. Owning a Breville espresso machine has turned making coffee into a science experiment. There are many variables that can affect the taste of coffee such as the the amount of coffee beans (dose) used for a single cup of coffee. The grind size also affects the taste tremendously.BrewCoffee is an application that allows coffee enthusiasts to keep a list of information about the coffee brewing process. A user can create a new account by typing in a username and password or by using their Google account information. Once a user has logged in they can add a new entry by filling out the form that requires the following information: name of coffee, brand of coffee, grind size, dose (grams), extraction time (seconds), extraction value (grams), and equipment type. The user can select from a list of equipment in the database or add a new equipment. To add a new equipment a user will need to fill out the form requiring information about the brand and model. A user can also add a comment to a brew entry by clicking comment after the brew form has been submitted. When a user logs out they are brought back to the homepage to login.

Vinyl17

Lesly Juarez — Mon, 25 Apr 2022 01:54:41 +0000

I was inspired to create an application that would allow a user to keep track of their vinyl record collection. The user is able to add a new vinyl to their collection by providing an artist name, album name, year, and genre. The user can browse the collection by genre. A user can also delete a vinyl record from their collection. The application also has a list of resources about vinyl records.

Here are a few notes that I took while bringing this project to life.

Back-End

I created a new rails application with an API using the following command:

rails new PROJECT_backend --api

I created a github repository for only the backend and added models, seed data, ran migrations, created the controllers, uncommented CORS, and lastly added the fast jsonapi gem.

Front-End

I double checked my routes and moved on to the frontend of the application by creating a new React application using the following command:

npx create-react-app PROJECT

I used the following commands to install react-redux.

npm install react-redux
npm intall redux
npm install redux-thunk

Installed React Router v5

npm install react-router-dom@5

npm start

starts the development server

Mod 4

Lesly Juarez — Mon, 17 Jan 2022 21:50:04 +0000

For this project I wanted to build a Single Page Application that would display a trivia game for my significant other. The backend was built with Rails API and the frontend with HTML, CSS, and JavaScript. A user has three categories to select from to start the game. When a user selects a category they get a "Good Luck!" alert and the questions for that category are rendered. Once the user finishes the questions in a category the user can click another category and answer those questions. After a user has finished all of the questions the user has the option to save their score by typing a username.

Back-End Development

I started by working on the back-end of the project by running:

rails new PROJECT_backend --database=postgresql --api

The line above creates a new rails project with PostgreSQL as the database. To deploy the backend of the application to Heroku the database needs to be PostgreSQL since SQLite is not supported.

I created my models by running:
rails g model Category
rails g model Question
rails g model User

A category has_many questions and a question belongs_to a category. The user model did not have any associations since I won't be authenticating a user.

After creating the models, I ran the migrations, added model classes, and associations. I created the seed data and checked the associations using rails console. After verifying that the associations were correct I proceeded to create an api/v1 folder under controllers to namespace the routes.

I added the gem 'rack-cors' to allow the backend to perform asynchronous requests. I added the gem 'fast_jsonapi' and created the controllers.

rails g controller api/v1/Category
rails g controller api/v1/Question
rails g controller api/v1/User

I namespaced the routes to indicate their association to the first version of an API.

I verified that the routes were correct by running rails routes and then verifying once again by going to http://localhost:3000/rails/info/routes.

Front-End Development

I began working on the front-end by creating a new repository for and adding an index.html file and a src file that would hold the index.js file. I then added a script tag for the index.js file in the index.html. I created an alert in the index.js file to ensure that the files were connected. I created individual files for questions, categories, and users in the src file and added the end points for each class at the top of the index.js file:

A POST request can be made if a user decides to save their score after completing the game.