Music App
Angular, MongoDB, Docker
Music application that makes complete CRUD requests to API from Docker container and MongoDB database, allowing to add, edit and delete artists or albums.
Check the project on Github
Angular, MongoDB, Docker
Music application that makes complete CRUD requests to API from Docker container and MongoDB database, allowing to add, edit and delete artists or albums.
Check the project on Github
Music application that connected to an API from a Docker container performs a complete crud of a database created with MongoDB, allowing to view all the artists / albums, or the detail of one of them, as well as allowing to add, edit or delete any artist or album from our database.
The application is created with the JavaScript framework Angular, which allows the creation of scalable and reusable components that are inserted in different places of the application. The components are organized in three folders, depending on whether they are part of the Core of the application, which is rendered all the time, or they are shared elements that will be used in several places of the application, or they are page components, pages, that render their own content as well as other shared components. In the main file of the application the core components are inserted, in this case the navigation bar, and also the router-outlet that renders one or another page component depending on the current url. The application has static routes whose rendered content doesn’t change, or dynamic routes whose rendered content varies depending on the url's param. The router-links allow us a correct flow between the different routes of the application, considering concepts of User Experience and User Interface (UX / UI). The application is based on the content of a database created with MongoDB with two data models, the artist model and the album model. Both have an id property that serves as a param for the routes, and also the album model has a property with the id of the corresponding artist, which connect the different parts of our database.
The application allows a complete crud to the database with get, post, put and delete requests, which allow us to access the data, add, edit and delete elements respectively from the database. All these requests are made in the Angular services through HttpModule functions, and we place these services in a services folder within shared, in which we create two folders, one for artist requests and the other for albums. The get requests allow us to bring the information from the database and sometimes the elements can be too numerous, so the application has a paging function that only shows twelve elements per page, and by click-event functions we can move from one page to another, and this function is not accessible if we want to go to pages that do not exist, such as the one before the first or the one after the last. This paging could be done through different endpoints on the back, but the back had already been built in a Docker container that did not contemplate this option.
The application has two shared components with forms, one based on the artist model and the other based on the album model. These forms carry out both the post requests to add elements and the put requests to edit them, and they execute one or another function of the service based on the information from the page component that renders them. These reusable forms are created with the form builder of Angular's Reactive Forms module and have data validation through by-default functions and others created specifically to check, for example, that the date of the artist's death is not prior to the date of his birth, or that the url of the image is valid according to a regular expression (RegEx). In case of invalid data, the application does not complete the request and sends the corresponding messages to the user. The data must also match the interfaces created for artist and album. The application also allows delete requests, with their corresponding alert message for the user to ensure that they want to perform the action. If any request is successful, once it is finished an automatic redirect to the album / artist pages (for post or delete) or album-detail / artist-detail (for put requests) is executed. The redirection is done by the navigateByUrl function of the Angular Router, also sending a message to the global state that is collected in the new page and displayed to the user.
The application has styles in SCSS format applied globally and specifically. The styles folder of the application collects all the global styles in different files regarding colors, fonts, global settings, and even styles for an element structure. This is the case of the application galleries, for example, which despite having similar styles, their functionality is not the same, so it was easier to treat the block as a style block instead of a reusable Angular component. These classes created globally are then applied to the different galleries of the application. The same system is used for the artist and album detail view page and for the forms. All these SCSS files are imported into a styles.scss index file, which is the one that is imported in the application. In addition, for specific styles of certain components or pages, particular styles are included in the SCSS files of each component. All styles are made following BEM methodology and class concatenation.
© Pablo Pacheco
