In the Capstone class, I have achieved quite a few major accomplishments for myself.
First Accomplishment
The first accomplishment is using Vite, Express, and SQL together, something I had not done before. By utilizing and inputting manual SQL queries (due to the complexity of the tables we had, I had initially thought of using Sequelize to simplify the SQL process but I realized it was better to work directly with SQL queries due to the many foreign keys and interconnecting tables), I was able to apply much of what was learned in CS340 and also figure out how to integrate with a React frontend.
My breakthrough with this accomplishment was ultimately implementing complex queries to show, add, and edit animals, which required many complex JOIN’s with foreign tables. This is crucial for our app to send the correct information to the backend and to display correct data in the frontend. Through this experience, I learned a lot about how to generate complex SQL queries (in our databases class I had always felt that we had a very cursory view of SQL databases) and how to change the data retrieved from the queries. Through the integration with React, I also learned more about formatting data correctly to be sent to the frontend. Through working on the middleware for our app with SQL and Express, I learned that backend can be quite fun, since before I had always considered myself more of a frontend person.
Second Accomplishment
The second accomplishment I would like to mention is figuring out how to send an uploaded picture from the frontend to the backend and to save the data onto the local server, as well as displaying the picture. For our project, PetPals-Connect (a dating app for animal adoption) we opted to allow administrators or shelter representatives to upload their own pictures and save it directly on the database. My breakthrough for this was in figuring out the right technology to use for this task and how to send the correct data so it can be uploaded onto a static server. For this task I used multer to upload and store the image file in the backend then send the local route to the database to be saved. In the frontend, I formatted the data as a FormData so it can be properly stored as a file in the backend. The tricky part was definitely in the frontend, since we were already using yup for the schema of the data to send to the backend, but I learned that using FormData would be good to send the file directly.
Through this task, I learned how to work with several new technologies, including Yup and multer (which is a fantastic tool for file uploads and saving to a static directory). This was something I have done before so it was really great to be able to pick up a new technology.
I am a huge advocate of lifelong learning so I was glad that we were able to try so many new things in this project! In addition, it was very rewarding to be able to see our web app coming together with all the elements we all worked on throughout the quarter.
Leave a Reply