Women Composers App
Overview
I created the women composers app in two versions: React and Angular frontend, with my women composers API as a backend. The app allows users to discover and learn about female composers of western classical music. After registering or logging in, users are able to click on a composer to read about them, and add or remove them from a list of favourites which can be viewed in the user profile.
Objective
The objective for this project was to create a “MyFlix” movie app for an assignment in the CareerFoundry full stack development course. I wanted to challenge myself by personalizing the project, while still meeting the requirements. I’m passionate about furthering knowledge of women in western music history, and spent time studying music and gender during my musicology degree. I decided to meet with my mentor and pitch my idea of a women composers app, and set to work putting together research on different composers for the API!
Technologies
React App Frontend:
- React
- React Bootstrap
- Parcel
- React Router
Angular App Frontend:
- Angular Material
- Angular CLI
Composers API:
- MongoDB
- MongoDB Atlas
- PostgreSQL (practice database)
- Postman
- Render
- CORS
- npm modules
Process
Composers API
I started the project by creating my own API. I had used APIs before in other projects, so I found it very interesting to get behind-the-scenes knowledge about how they actually work. I gained experience with both relational and non-relational databases, through my practice database with PostgreSQL and project database with MongoDB. It was fun researching the composers, and figuring out how different aspects of a composer’s life would be best structured in a database.
I learned how to route HTTP requests using Express, define endpoints and test them with Postman, and implement authentication and authorization using HTTP and JWT authentication. Since this was my first time learning about backend, it was challenging in the beginning. However, as my understanding of the concepts grew, so did my understanding of how other people’s APIs worked in my previous projects.
React App
The first version of the app I created was with React. Since I had previously worked with React, it went fairly smoothly. However, form validation and app routing were new to me, but were a rewarding challenge.
I styled the app in a simple design with React Bootstrap, focusing mainly on understanding concepts that were required for functionality.
Angular App
I’m glad I approached the Angular version of the app with an understanding of how the final product should work and look, as well as excitement to learn a new framework, because understanding how to use Angular was challenging. I made some user flows that I used for both the React and Angular versions of the app, and planned the various tasks with a Kanban board:
Throughout the project, I encountered a few particularly challenging problems I needed to solve. The main problem was that the guidance provided in the project instructions wasn’t working for me, and I was not getting the desired results from them. After researching Angular and looking at several previous student examples, I determined the version used in the exercises’ example code was too outdated. I started the app over from scratch with a newer version, and everything worked. Although it was frustrating, in retrospect I’m glad I had the chance to redo my work as it gave me another opportunity to practice and for the concepts to further sink in, and I think I have a much better understanding of Angular as a result.
Result
Review
Looking back on the project, I’m pleased with the results. I am especially happy that I decided to centre the assignment around composers, as it kept me engaged throughout the development process and excited about the final product. However there are a few things I would like to change and add as I continue my development, which I believe will improve the app overall:
- I would like to revisit and polish the design of the app, especially the React version, to make it stand out. Although I think it was important to learn how to use React Bootstrap during the assignment, I enjoy the creativity of customizing the designs of my apps.
- I plan to add a loading screen for the signup and login features in the app.
- I would like to change the date format for the birth date in the profile, so it is more readable.
- I would like to add era information (Baroque, Classical, Modern etc.) to the composer cards, as well as a filter by era feature.
- The app should automatically navigate to the login page after a new user signs up.
- I am excited to research and add more composers to the database!
Thanks for checking out my project! If you have any suggestions you think would improve it, feel free to reach out. I hope you learned something about women composers!