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.
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.
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.
Top comments (0)