Preschool Song Library-Backend
Preschool Library Prase 2 and 3: The Server and connection to the front-end
Date: July 22, 2021 - December 6, 2023
Link to server: https://preschool-library.onrender.com/
Link to the front-end: https://preschoolsongbook.netlify.app/
Background
This project is the back-end or server for another project, the Preschool Library(click here to read more about it). The server stores the themes or categories, the songs, and the users in an SQL database. The server has an ARC authentication route to create, update, or delete themes or songs. At the same time, the songs call on the Youtube API to fetch data and store it in the database.
Block and Unblocked
YouTube API
This project took longer than I originally planned, and it came down to using the YouTube API and understanding how to incorporate it into my project. While researching the documentation and other sites on how to implement the API to the
server, there weren’t many code examples with Node.js; if there were, it was confusing. In other words, it felt like I had some blocks to make a wall, but some of the blocks were missing. I decided to try ChatGTP, which helped me find those missing blocks. On a side note of ChatGTP, I agree it is an excellent tool to help understand a concept by explaining it differently but having a solid foundation first is good. For example, a person needs to be able to stand before they can walk.
I only use YouTube API to create, or POST, the route of ‘songs’. The user puts a ‘category’ and the YouTube ‘url’ in JSON format. The server will find the video ID, which is the random letters and numbers after the ‘v=’ in the URL. Once it has the video ID, it sends a request to the YouTube database for specific information about that video(title, creator, image). Then, it will send the information back to the server, which then saves the data to the database.
Authentication
After creating REST routes for themes and songs, I need authentication routes so that only certain people can create new themes and songs, edit them, and delete them. The block was deciding whether to use Google OAuth or create role-based access control (ARC). At first, I was going to use Google OAuth because then it is just the user email, and I can be specific which email, but I was running into issues on the connection between my server and Google, so I decided to put it as a"moving forward" to add that option and create an ARC in stead.
Connecting to the Front-end
Once over the blocks, I was able to deploy using Render. I was then able to connect to the front end. Luckily at this point, I didn't have to make major changes to the layout. I used Axios to call my server to fatch my data.
example of the a song page
An example of the video page when selected from the song page
Moving Forward
In term of the back-end, is to add the Google OAuth, and used another deployment method like AWS or Azure. For the front end the next in this project is adding the login so users with authorization can add a theme or songs, edit them, or delete them.
Based on the design I've coded out the student view which can be viewed here, which has the right spelling of library and an interactive search bar. In the next step I will be building out the teacher/para view.
Thank you for your time and reviewing my work on The Preschool Song Library! If you’d like to see more or would like to get in touch, you can go to my contact form