Recreating my Full-stack application in Next.js

Throughout the last three weeks, I embarked on a journey to re-create my Full-stack web application, which generates digital IDs through a custom web API.

Previously, I used Vanilla React as a frontend and a basic Express API for everything else. Authentication was minimal but present, using a username/password setup, and saving to MongoDB. The original frontend was created relatively quickly, and little design thought was put into it.

I decided to use the knowledge I know now to rewrite every aspect of this project. I set out to re-write the frontend using Next.js, with the base UI I used for my portfolio page. I set up authentication using the next-auth package and connected it to the database. For the database, I chose PostgreSQL, using Prisma as an ORM. This allows for a much more seamless user experience when registering for user accounts and logging into them. next-auth allowed me to integrate with Google, therefore the only login information required by users is their student Google account.

For the back-end, I maintained most of the codebase from the previous rendition for pass generation. I organized the code and refactored it to use the new authentication system. The back-end is connected to the database, which manages all users and active sessions. When a user logs in using the frontend, an active session is created. This session information is passed in, along with the user, when requesting API endpoints. The server then validates that the session is not expired, that the passed user matches the one associated with the session, and that the user has the appropriate permissions.

Of course, a new version as significant as this should include new features on top of the stability improvements. I implemented support for Android devices using Google Wallet. This allows the entire school community to take advantage of the service. Additionally, I plan to integrate with Blackbaud’s SKY API, allowing students to view classes more straightforwardly than currently, incorporating data directly from the SIS.

If this post caught your eye and you have further interest, feel free to Visit the website!