jacolam/js-final-project-guidelines

JS SPA Project Mode

You're going to be building a SPA or Single Page Application. Your frontend will be built with HTML, CSS, and JavaScript. You will also be tasked with constructing your own backend API built with Ruby on Rails. The frontend application will communicate with the backend by making requests and receiving responses. This is a really exciting moment, the whole course up until this point is coming together!

Building out each feature you want for your application will be challenging, but you all are awesome and can do it. Remember to build iteratively and begin with a clear picture of an MVP.

Requirements

1. Must be a HTML/CSS/JS frontend with a Rails API backend. These should live in two separate repositories. All interactions between the client and the server should be handled asynchronously (AJAX).

2. Must render out a resource with at least one has-many relationship (that's two resources total) in the JSON.For example, if we were building Instagram, we might display a list of photos with associated comments. Both resources should be editable.

3. Must use your Rails API and a form generated by the client to create a resource and render the response without a page refresh. For example, if you create a new Photo post, and form data would be serialized, and submitted via an AJAX POST request, with the response being the new object in JSON and then appending that new photo to the DOM using JavaScript (ES6 Template Literals, can help out a lot with this).

4. No user authentication with passwords. When the page refreshes the current user will effectively be signed out. The way you learned this in the previous module relied on the fact that Rails was sending small pieces of data (cookies/sessions) back and forth along with every request and response. Now, we have two separate applications and need to use a slightly different pattern. We'll look at patterns for dealing with client-side auth later in the semester, so you'll have plenty of time to deal with this case.

   If your application requires a user model you can have users "sign in" or "sign up" by providing a username and/or email, but hold off on passwords for now.

5. jQuery is often helpful to use for DOM traversal and DOM manipulation and you are welcome, though not required, to use it. Remember that what you can do with jQuery you can do with vanilla JavaScript ( You Might Not Need jQuery ) if often a little less elegantly.

   Having said that we require that you use fetch and not $.ajax, $.get etc. Fetch is built into JavaScript now and you should get used to using it and dealing with some of its quirks! Going forward, we don't want you to get the wrong idea that you need to import the entire jQuery library to make a single AJAX request.

Example Project Setup

This repository goes through the first few steps of setting up an example project for both the frontend and backend applications. Please spend some time looking through this before getting started. If your question (ex: "How do i set up the rack-cors gem?") can be answered by reading this repository, you will be directed there.