Rythme
React, Redux, Node.js, Mongo DB
Sales application project for music events created with the React framework implementing Redux, and also using Node.js and MongoDB for the back
Check the project on Github
React, Redux, Node.js, Mongo DB
Sales application project for music events created with the React framework implementing Redux, and also using Node.js and MongoDB for the back
Check the project on Github
Rythme is a sales application project for music events. The objective of the application is to facilitate the synchronization of the user's music, of their favorite artists, to filter a long list of concerts to show those in which the user might be interested. The application uses three different technologies. MongoDB allows the creation of the database with the artists, users and events, Node.js collects the information from that database to create endpoints, and react creates the components and application pages, in which the information collected by the endpoints is rendered. The project is mobile-first and is created from a previous third-party design.
Most of the project is built with the React JavaScript library. The project consists of multiple functionalities, components and data, so it requires a well structured organization. Therefore within this project we find different folders. First of all, we find a folder with the different pages of the application and another with the reusable components that can be used in more than one page, and all of them contain different folders, one for each component, as well as an index.js file to which all the components are imported so that they can be used later from everywhere in the application. We also have a public folder, where the files and images that will be used in the application, the style files, and some extra JavaScript functionality are located. Finally we have two folders that are responsible for managing the data from the back. First of all, the API folder has several JavaScript files, one for each type of data collected from the information returned by the functions of the different Node endpoints. Finally, the redux folder, where this library is implemented, collects the data from our API files and includes them in a global state, which can be accessed from everywhere and at any time in the application.
For the project we use the most up-to-date version of react technology, leaving aside class components to use ES6 arrow function components. This allows us a more fluid programming. Within these functional components we can use all kinds of tools. The useState allows us to create rendered variables on the page that will change their visual appearance by changing the value, without the need to refresh the page. UseEffect allows us to specify when or based on what certain functions of a component should be executed. Finally, we have the same functionalities that the class components already gave us, such as loops or JavaScript conditionals.
To create the application routes we will use the react-router-dom package from react. This package gives us the tools to create routes within our application. Some of these tools are the router, within which will be creted the different routes with the routes tool that specify the url and the component that will be rendered. Those parts of the application that are dynamic, that are not present all the time, such as pages, will have their routes integrated into the switch tool. Apart from these main tools, this package provides us for example several forms of redirection, either through the Link tool, through the Redirect tool that executes its functionality when rendering, or through the props. The router props, independent of the personal props used by us, are integrated into each route, and give us information about the history, allowing us to go backwards or forwards, or go to a specific route, and information about the url allowing us access, for example, the params of the application's dynamic routes.
To structure the information of the Node.js application, it offers us different functionalities and extra packages. Through the Mongoose package we will create the models of the different types of data, which in this case will be the artists, the concert halls, the users and the events. These models will be the basis for building the MongoDB database collections. Before the application is working it is necessary to introduce test elements through the seeds. Once the database is ready, we will build the server through the Express.js library of Node, which will also allow us to create the different routes of the endpoints with the information that will be collected later from React. Among these endpoints we will find the GET routes that provide information to render each of the pages and components, using static URLs or dynamic URLs if they are based on some param, and the POST routes that will allow the user to add information to the database from the application. Among these post routes we find functions to buy tickets, to add events to set favorites or to add friends.
Through the asynchronous functions of our API folder we collect the information from the back. To make this information accessible from the entire application at any time, we implement the React-Redux library in our app, as well as the tools from the redux-toolkit package. Through the createAsyncThunk tool we can create asynchronous functions that collect the information from the API functions and assign them to different properties created within a global object, the application state, which will contain all the data that the application may need. These functions will be imported into the store.js to be executed through the useDispatch tool where necessary but mainly in the main App component, which is rendered when the application starts. Once the functions are called, the data is incorporated into the global state and we can access it from everywhere in the application through useSelector.
One of the main parts of this application is authentication, since all the functionality of the app is linked to the existence of a logged in user. First, in the back, the user model and its corresponding collection are created in the database, and then the different login, register and logout strategies, in addition to the extra check session function to ensure the existence of a user in each rendering, all through the passport library for express. All this information is also collected from the react API functions and incorporated into the global state of redux, so that the application will always have access to user information. Authentication is required for the correct behaviour of the application and therefore the different routes are protected by PrivateRoutes, which prevent access to parts of the application if there is no user session created and active. This is done through a PrivateRoutes component that will act as an intermediary in the rendering of the page components. In addition, the application at its start has a landing page whose content is loaded when it is started and disappears after a timeout to leave the home page visible, in case there is an active user session, or the login page otherwise.
The application has two core components, always visible, the navigation bar and the header. But despite being static components, their behavior is dynamic. In the case of the header through a JavaScript function we can control the page title that it shows, linking it to the different routes of the application. The navigation bar on the other hand has a particular style that makes it move in a horizontal scroll to select the part of the application in which we are. The application also has additional JavaScript functions that allow us, for example, to format the dates that we bring from the back in the data model we want.
© Pablo Pacheco
