Shen's Developer Diary

Series

Fullstack Instagram Clone with Next.js

This is a step-by-step series on building a simple Instagram Clone using Next.js. You will get to see Tailwind, Mantine, NextAuth and Prisma in action to build this fullstack Instagram clone.

Articles in this series

Insta-Next: Introduction & Designs

Apr 6, 20237 min read

Let's build a fullstack Instagram clone using Next.js, Prisma and Mantine · Welcome to Building Instagram Clone with Next.js series! In this first part,...

Insta-Next: Introduction & Designs

Insta-Next: Constructing Database with Prisma

Apr 6, 202316 min read

In this part, we will use Prisma to setup our database in PostgreSQL · In part 1, I created a simple class diagram to show the relationships between the...

Insta-Next: Constructing Database with Prisma

Insta-Next: Exploring APIs with React Queries

Apr 6, 20239 min read

Let's start building the backend APIs using Next.js and use React Queries to fetch them! · In this part, we are going to first look into writing our...

Insta-Next: Exploring APIs with React Queries

Insta-Next: Improving UI with Mantine and Tailwind

Apr 6, 202318 min read

It's time to improve the app's UI with Tailwind and Mantine. We will also employ Next.js layout on the application. · If you are looking for guides on...

Insta-Next: Improving UI with Mantine and Tailwind

Insta-Next: More UI with Mantine

Apr 6, 202317 min read

In this part, let's build the Instagram post and story modals with carousels! · In this part, we will try to complete the remaining profile page and the...

Insta-Next: More UI with Mantine

Insta-Next: Authentication with NextAuth

Apr 6, 202316 min read

In this part, let's try to implement authentication for our InstaNext app using NextAuth.js · In this part, we will be building the authentication part...

Insta-Next: Authentication with NextAuth