SB
Loading Light/Dark Toggle

8

0

Written by:

sarfraz alam

.

4 min read

I have built alternative of Instagram, Pinstagram

after investing two whole years in learning web development,

after investing two whole years in learning web development, i have built 4 big project. in this blog i will share one of the biggest project i have built which is Pinstagram a alternative of instagram, the approaches to built it, tech stack which i used for the project and so many things so without furthur ado, lets gets started first of all let me tell you how many tech stacks i have used for building this Pinstagram project. there are 10 tech stach i have used in the project which i will share step-by-step of all these technologies and how i integrate in my pinstagram project Number 1. Next js : -> for this project i used nextjs14 the latest one. the reason why i use nextjs is to get advantages of client components and server components. to integrate nextjs npx create-next-app@latest if you want to use Typescript with nextjs, then select typescript while installing nextjs. Number 2 Tailwind css: ->I have used tailwind css with nextjs application while installing nextjs select yes for tailwind Number 3 shadcn : -> A component ui library i have used for building the project called shadcn. go to ui.shadcn.com intregration npx shadcn-ui@latest init Number 4. Node js :-> I have used node js for this project, you don’t have to install anything for nodejs, just install nextjs. Number 5 next-auth : -> for fast authentication i have used next-auth in this project to integrate next auth: npm install next-auth Number 6 Typescript : -> Typescript have been used in my project Pinstagram, if you want to integrate Typescript in your nextjs project while installing nextjs, select Typescript that’s it. Number 7 Typescript : -> Number 8 Postregsql : -> I used SQL( structure query languages) for my project to integrate Postgres, I will tell you in prisma selection, you initialize your prismaORM Number 9 PrismaORM: -> Prisma is a database toolkit that simplifies database access for developers to integrate Prisma in nextjs application initialize typescript project npm install typescript ts-node @types/node then, install the prisma CLI npm install prisma finally, set up prisma CLI with database you want to npx prisma init — datasource -provider postgresql as soon as you run above line in your terminal a schema.prisma file is created in prisma folder which is located inside your root folder. Number 10 neon.tech : -> I created my postgresql url from neon.tech go to neon.tech, get Postgres URL set it into schema.prisma file. thank you so much for reading the article if you want to check my Pinstaggram project this is my Github profile: https://github.com/SarfrazAlame this is my Pinstagram project: instagram-chi-seven.vercel.app