Full Stack Next.js 13 App using TypeScript, Tailwind, React Query and Zustand

This article documents a full-stack blog application which allows users to create an account, make posts, like posts, comment on posts, like comments and edit their profile. You can view the demo of the application here and you can find the GitHub repo of the application here.

Functional Requirements

The application has the following functional requirements:

• It allows users to log in using their Google accounts.
• It allows users to edit their profile, specifically, their name, profile picture and bio.
• It allows users to delete their accounts.
• It allows users to create, edit, like and delete posts.
• Users can only edit and delete their posts.
• It allows users to comment on posts. Users can also edit, like and delete comments.
• Users can only edit and delete their comments.

Technologies Used

Next.js 13

I chose this to get a feel of React’s new Server Components. I enjoyed the DX provided by Next.js 13.

Postgres and Prisma

Used Postgres for the application’s database and Prisma as the ORM.

Next Auth

Used Next Auth for the application’s authentication and authorisation needs.

React Query

Used React Query to manage state related to the server and to eliminate the need for Redux.

Zustand

Used Zustand to manage state related to the client.

Tailwind

Used Tailwind as a CSS framework. I like it because I find it close to native CSS and has a tiny footprint.

Cloudinary

Used Cloudinary to host and process the application’s images.

Folder Structure

The following are the main folders/sections of the application.

App

Most of the application is within this folder. In this folder, there are React components, pages, hooks, Zustand stores and an api folder. In this application, I did not use the api folder for my REST endpoints but used the pages folder as we did in Next 12. It’s recommended we use the api folder within the app directory for our endpoints.

Pages

The pages folder has an api folder which contains the API endpoints. It’s now recommended we use the api folder within the app folder for our endpoints. We should note that the signature of the API endpoints is different in the app and page folders.

Prisma

The Prisma folder contains the database schema and the migration files.

Similar Projects

The following are similar projects for your perusal.

Next.js 13 Demo App

This is an aesthetic blog application built by Yaseen Mustapha. You can find the demo of this application here.

Taxonomy

This is a superb application owned by shadcn. You can find the demo of this application here.

Until next time, peace, love and blessings!