AutoSwift — My Mod 4 Javascript Project

Samara G
3 min readApr 23, 2021

This purpose of this project was to create a Single Page Application using Javascript and HTML for the frontend, and a Rails API backend, demonstrating a client server communication.

My Car.

AutoSwift is an app created for users who are looking to sell their car online, or to browse the latest cars for sale. A user is able to post a listing by entering an image url, the car information, and also selecting their name in a dropdown selection menu.

The object model relationship is a Car belongs to a User, and a User has many Cars. The client server communication is handled asynchronously using Fetch, fetching the Object data from the Rails API and using JSON as the communication format. I’ve incorporated 3 different fetch requests, 2 of which are GET requests for Cars and Users. And 1 POST request for creating a Car.

I’ve done this inside of the JS class files using static class functions and regular class functions. The difference between static class methods and regular methods are the following:

Static Methods:
-
Also called a class method
-
Used to implement functions that belong to the entire class and not just a single object. They have no relation to the data stored in specific objects like instance methods or variables.
- You can call static methods by calling it on the class’ name itself.
ex. Car.method()
- You do not need to create a “new” instance of the object to use it.
- “This” inside of a static method refers to the class.
ex. this.method() would be interpreted as Car.method()

For example, I’ve used a static method for Car.createCarHandler(event). I took the user input from the form by grabbing the DOM element value, stored them as variables, and passed them into the CarApi.postCarReq() to send back to the backend API. This remains general and unrelated to any specific Object. This can be used by any Object.

Instance Methods:
- Used for an individual Object/instance of the class.
- You have to create a “new” instance of a class in order to utilize an instance method. ex. const newCar = new Car(“BMW”, “M3”)
- Can be called on as method on the object ex. newCar.method()
- “This” inside of an instance method refers to the specific single Object.
ex. this.method() would be interpreted as newCar.method()

For example, I’ve used an instance method in the Car class, called renderCar( ). This was used to take the individual Object’s data and format in the HTML, to later append inside the DOM. This remains exclusive only to a specific Object.

This project was a learning experience for me. I believe having the ability to fully understand and identify with Ruby has made learning a new programming language a bit easier for me. Since this is now my 4th project I’ve made with Flatiron, I have a better grasp of project planning and understanding how imperative it is to have each step all laid out before just diving right into it. This made me feel like I had a more solid approach going into it this project because I was able to get it done in a shorter amount of time versus how long it would usually took me to complete in the past. In the previous projects I underestimated the importance of being organized.

All in all, this project by far has to be my favorite application that I’ve built with Flatiron and it makes me even more excited for the road ahead. I’m happy that I made an app on something I am passionate about, and I actually threw in a picture of my own car as the homepage image for aesthetics.

--

--