App Walkthrough - User Experience

In this first video we take a walk-through of the front end to the application that we will be building. We visit the numerous screens available in the application, including:

• home page
• about page
• profile page - when not logged in
• login page
• registration page
• profile page - when logged in
• logout

The concepts used in each of these screens can be used as the basis for almost every other page in your application.

We will see how the information returned from a successful log in is stored in your browsers localStorage - though as we will see later in this course, you could write a different implementation of the storage functions (get, save, and cleanUp) if you so desire.

Information gained from successful login will be saved off to the application state, allowing us to display the user's username on the top nav bar in the form of welcome back {username}.

We will also see how this information is cleared on log out.

To get access to the commonly needed information - such as the username, and id - we must process the response from a successful request to /login on our API, and then decode the received JWT / JSON Web Token.

We will handle this client side by running the token through a decoding function, allowing us to then use the id field when accessing the /profile route on our front end, ensuring the request to the API contains the correct ID.

All of this 'stuff' seems like it should be available for us. I know in my case I often forget about all this 'boilerplate' code when planning new projects. And yet creating these various screens takes quite a lot of time.

There is another big benefit to implementing each of these screens ourselves - we learn how they work. In the past, I have found that when login / registration / etc is provided for me, I use it with understanding how the heck any of it actually works. This is great, until things inevitably go wrong. Or a custom feature is requested.

One important point to note here. If you are following along, be sure to update your parameters.yml file in your Symfony project to allow access from http://localhost:3000:

# /app/config/parameters.yml

parameters:
    # nelmio cors
    cors_allow_origin: 'http://localhost:3000'

This is because, by default, our React app will boot on localhost:3000, and our Symfony project is not configured to allow cross origin requests from this address unless we explicitly tell it so.