The Bug Book

The Bug Book is a fullstack NextJS social media application. I built this project while practicing NextJS, Prisma, backend and more. This application is for people who want to meet new people and share their life.

  • Type
  • Practice
  • TypeScript
  • Stack
  • React
  • NextJS
  • Prisma
  • Zod
  • React Hook Form
  • React Query
  • TailWindCSS
  • RadixUi
  • Vercel
Screenshot of the TheBugBook page

Project Purpose and Goal

This project included the following 6 phases and iterations of the site. Phase 1 is simply enabling the user to create an account and log in. Phase 2 was to create a main page where user can create posts and see other users posts. Phase 3 was to create a profile page where user can see his posts and edit his profile. Phase 4 was to enable users to like, comment posting, bookmark posts and follow other users. Phase 5 was to enable users to see their notifications, bookmarks and search for other users and content. Phase 6 is to enable users so they can use messages and chat with other users.

The most effective approach I found to implement these 6 phases is to create a backend with Prisma and NextJS API routes so I can enable login features that are crucial, after that develop a main page where users access everything that they need. Then generate a profile page where the user can manage his following, followers and edit his profile; Afterwards, build a functional messaging system where users can chat. And when all of that is done to create a notification system that will trigger on likes, comments and follows while messages have their own notifications.

  • React
  • NextJS 15
  • TailWindCSS
  • React Query
  • React Hook Form
  • Prisma
  • Zod
  • RadixUi
  • Vercel

Web Stack and Explanation

I wanted to use NextJS 15 so I can practice my backend skills with new technologies that I learned, and I think that NextJS is perfect for social media application. I chose Prisma because I wanted to use a postgres database from vercel and how easy is to connect to it.

For the whole auth logic I used lucia and for creating users I worked with Prisma. For validation of inputs I used Zod. For data mutation and fetching, I chose ReactQuery and ky. For uploading images I used uploadthing, and for editing images I chose react cropper and reacts image file resizer. For styling the application I used TailWindCSS with radix-ui, and tip tap. Radix ui provides high quality components that are easy to use and tiptap provides a good editor for creating a post. For the whole messaging logic i was using stream chat who provides hosted chat component that is so customizable and saves a lot of time implementing it . For linkifying # links and profile I used to react linkify it. Vercel is also an obvious choice for deployment because of its speed and reliability for NextJS projects.

Image of cabins on page the TheWildOasisImage of cabins on page the WildOasisImage by creating the user on the WildOasisImage of settings where you can adjust them on the WildOasisImage of settings where you can adjust them on the WildOasis

Problems and Thought Process

Like most projects, there is always some problem on your journey. I was stuck in different places, but the most difficult area was in the making everything work together. Optimistic data mutations with ReactQuery, were a lot difficult area, but I managed to make it work smoothly.

Making chat work was also a difficult area and something completely new for me. I had to read a lot of docs because it was my first time using it. As well for the application to be the fast as possible I was making components as reusable as they could be and with help of a tailwind with redix-ui, I managed to do that.

Image when you are checking in or checking out a booking

Lessons Learned

I could spend all day describing the lessons that I learned while working on this project, but the most important ones involved in my newfound understanding of NextJS, Stream Chat, Lucia, Prisma, backend logic and so much more. As this is the largest project I have ever worked on, I learned a lot of new technologies and how to implement them in a real project, and with this project i think i have a good understanding of a fullstack application.

Other Projects

Image of dashboard on the WorkoutNothing

WorkoutNothing

WorkoutNothing is a web application that helps people track their workouts, discover new exercises, and track their body measurements.

View Project
Image of landing page on the WildOasisWeb

The Wild Oasis Web

The Wild Oasis Web is a user friendly fullstack application. The purpose of this is to enable users to book cabins that WildOasis company offers.

View Project

Want to get in touch?

Send me a message!

If you're searching for a developer, need help with something, or just want to connect, don't hesitate to get in touch.