Frontend Explained

Structure

In the src folder, we have two separate folders:

1. pages - this will hold the the React components that make entire pages in our app.
   
   In the screenshot above, you can see that each page has its own folder with 3 files:

• the .tsx module corresponding to that page;
• the .css module corresponding to that page;
• folders for each smaller React component that makes up the specific page;

2. services - this will keep the functions necessary for different components to make calls to our API.

Routing

In the root of the frontend src folder there is the index.tsx file which handles all of the routing for the frontend app.

I won't go into the details of how React router works as I think this screenshot is quite explanatory by itself on how everything is structured. Basically each path will render one of the pages we defined as React components.
At the moment every route is wrapped within the App component which in the future will probably hold a more important role, but for now acts as a general layout for the app.
Another point of interest is the PrivateRoutes element that wraps /test (need to delete this one) /neighborhoods and /neighborhoods/:id. PrivateRoutes acts as a guard. It checks the browser's local storage for a logged user and if it finds one, it allows access to its children routes, otherwise it redirects the user to the login page.