StoreFront is my final portfolio project featuring a Ruby on Rails API and React frontend. I’m also using Redux for state management. I’ve also included a healthy mix of React-Bootstrap and Styled Components for styling.
I am currently working on my final portfolio project for the Flatiron School online curriculum(Yay!). I’m building a small e-commerce site geared toward fashion designers, vintage clothing re-sellers, or basically anyone wanting to sell some one-of-a-kind items. Given all the associations and data that make up an individual item and a seller account, I decided to use fast_jsonapi to serialize the data before sending it to my frontend. This allows the programmer to control what makes it to the frontend to display to the user. Enough backstory. If you clicked here after reading that atrocious title, then you know what a serializer does. So let’s get on with dealing with this error in fast_jsonapi.
With adding some JavaScript functionality to the front end of my Rails project, I was able to use AJAX get and post requests to render an index and show page as well as submit a form all without redirecting! This not only makes the web app behave faster since we don’t have to wait for a new request, but gives a more dynamic, interactive experience for the user. One extremely useful thing about AJAX is how visual the language is. If you can see the property in the browser JS viewier, you can access it with an AJAX query. For example, to use the post request, I needed to acces the route that the Rails form helper was sending the form to. In the Elements tab of the JS viewer, that route was stored in the ‘action’ part of the form.
$(document).ready( () => {
$('form#new_movie').on('submit',function (e){
e.preventDefault();
let postUrl = $(this).attr('action');
let values = $(this).serialize();
$.post(postUrl, values)
So we can see that inside the click event of the form with an ID of ‘new_movie,’ the this keyword refers to the actual Rails generated form object. By wrapping this in an AJAX query, we can use the attr method to return the value of ‘action,’ which is the route the form is submitted to. Then we send the route and the serialized form to the AJAX post request. We now have access to that data and can clear the DOM and paint it anyway we wish with the data we have. AJAX makes a complex Rails post and redirect simple through serialization and the ability to paint the DOM in a format of our choosing.
For my Rails portfolio project, I created Film Journal, a personalized list of films a user has seen. Users can sign up through Facebook thanks to OmniAuth or create a new account on the sign in page. Once signed in, the user may add a movie via a Rails form with fields for title, stars, director, year released, synopsis, and an image html as well as the users own review and rating(1-5). For the views, I chose to learn how to incorporate Bootstrap HTML and CSS themes into the layout.
Now that we have the form submitting via a post method to the correct route (/users/:user_id/movies), let’s take a look at how Rails can associate an instance of @user and @movie in a join table. We know we have a users_table and a movies_table with the specific attributes we’ve assigned, and we want to create an association between the two using a join table of user_movies. Here we will have the foreign keys of :user_id and :movie_id. In addition, we have the :review and :rating attributes, so that a user may submit a review and a rating(1-5) via the join table.