Single Page Application — Online Makeup Shop

I came up with an online shopping platform for my fourth project in Flatiron School. First, you’ll get an interface for logging in. After you have logged in, a collection of product will be seen in the page where you can add them to the cart and checkout. And this is all within a single page(by loading index.html file).The page is not refreshed at all. This is what a Single Page Application is called. This project is implemented using Vanilla JavaScript, HTML and CSS for the frontend and Ruby on Rails as an API for the backend.

I used a public API, seeded them and my json data was rendered in this way:

In my project, I have made use of Serializers. So, what is a serializer? It’s like re-creating our data in a way we want them to be. Here, data refer to JSON(JavaScript Object Notation). Because I used a public API, the serializer was very handy for organizing my data. In order to get started with this feature, we need to add a gem to our Gemfile. There are many gems for this, I have used the following gem in my project:

gem 'fast_jsonapi'

After this, we need to run bundle install. Going further, we will use a line of code to generate a serializer of a model. In my case, I have used:

rails g serializer product

This will create a class named ProductSerializer. Thanks to serializer, I am able to include only the attributes I want them to be displayed by adding them to the attributes section.

This would give us:

Awesome, isn’t it? We can display which ever attribute we want and in a specific order too. Using the Serializer, we are able to organize our data in a much cleaner way.

The DOM manipulation, rendering data, updating, handling of form submissions is all done asynchronously through JavaScript.

Here is my project demo:

More about fast_jsonapi serializer: https://github.com/Netflix/fast_jsonapi