WUPHF HeaderView Live Site

WUPHF

Wuphf is a social media platform. It was designed to be like Twitter, but with a fun 'animal avatar' twist. This project required a heavy back-end infrastructure to support the features you would expect from a modern social media application.

Technologies used

This project uses React and NextJS for the frontend, and for the backend API, we used the built-in NextJS API server with Postgresql as the database and Prisma as the ORM. For authentication, we used Google login (Oauth) via the NextAuth package. It was my understanding that this React framework was becoming widely adopted, and was very popular for its flexibility and ease of use. For this reason I felt it was essential that I become familiar with it, and I’m glad that I did. It would become my go-to framework for web development in future projects!

Purpose and goal

Wuphf was the final project for my undergraduate degree, and going into it I knew that I would have the whole semester to work on it with a team. For this reason I wanted to tackle something that was both manageable but ambitious with the time given. I felt that a social media application was in-depth enough that we would all learn a lot.

Technical hurdles (and how they were solved)

A few factors made this project particularly challenging. One of the main hurdles was the sheer number of libraries we were using, many of which were new to me. Through this project, I gained valuable experience working with Next.js, NextAuth, and Prisma. It significantly expanded my understanding of backend development, especially when it came to structuring and organizing a RESTful API.

For this project, we had to design schemas for user profiles, posts, likes, replies, and the relationships between them. Mapping out these connections and ensuring that everything functioned smoothly was one of the most challenging aspects of the project.

Lessons learned

Although not strictly a “technical” challenge, working with a team was another key difficulty. This was my first major experience collaborating in a team setting. While some team members contributed more than others, I had the chance to work closely with an ambitious classmate who used TypeScript and Tailwind CSS. Initially, I had reservations about using these technologies due to the complexity of learning them, but as I started to use them, I quickly realized their power and how helpful they were in streamlining development. We did have some disagreements along the way, but in the end, I learned a great deal from him and the overall experience.