My First JavaScript+Rails Project
Published: 2021-07-16 03:35:31

This post showcases my first JavaScript project created as part of the Flatiron School curriculum for Software Engineering. I built a Single Page Application (SPA) using HTML, CSS, and JavaScript frontend to communicate with a Ruby on Rails backend API. The Rails backend needed to have a resource with an has-many relationship, have at least 3 AJAX calls, and a minimum of two of these four: Create, Read, Update, and Delete.

I began the project mapping out my concept and drawing a mock up of how I expected my website to look. Creating a strong and well organized foundation will set the tone for the entire project. I chose to create my project on a passion of mine which is mentorship. The app Hidden Gems Mentorship allows users to sign up to become a mentor in their work environment. The attributes that a mentor will have is their name, title, about me section, a department name and the ability to upload a photo. My goal is to eventually expand the app so that users can be paired with a mentor.

## ASSOCIATIONS
After organizing a concept, I began coding! I started with my backend by creating an API and then adding my associations. One important strategy that I used is to VERTICALLY build my application. This means to build out one model/feature at a time to prevent from getting lost.

> I began building out my ‘Department model’ by inputting ‘rails g scaffold department name’ into my terminal. I then created some sample seed data in my db-migrate-seed.rb file. Finally, I created my has_many :mentors association in my ‘Department model’ file. I repeated these same steps with my ‘Mentor model’ then tested my data by going into the rails console to make sure my data was present.

![Seed Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx01r132r25rakv7obuc.png)

![Department Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwpml42fqxtx1w4720l4.png)

## ROUTES
To complete my backend I had to implement my routes, controllers and serializers. Eventually, I would like to create different versions of this application, in effort in doing so I decided to namespace my routes to indicate that they are routes associated with the API and this is Version 1 of the application. I then moved on to creating my Controller and Serializer data. I again tested my application by this time opening the rails server and the JSON Viewer (downloaded with Chrome).

## FRONTEND
Once my backend included my Minimum Value Product (MVP) I began coding my frontend starting with creating an html/css file, javascript events, manipulating the DOM, and creating fetch requests.

> The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed so that we can fetch the list of mentors and render a form.

![Event Listener](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvaomvd8o3jqkm93ywah.png)

## FINAL THOUGHTS
After this process, I immediately began to get impressed with the outcome of my application. The frontend was a lot of fun and the immediate gratification of seeing the changes take place was satisfying.

### Source Code:
[Link](https://github.com/thedanielleellis/HiddenGemsMentorship)