Messenger Clone : Build The Real Messenger Clone | Next Js 14, React 18, Tailwind CSS, Next Auth, Prisma,Mongo, Pusher (2024)
This is the only one real messenger clone. use it to master your skills in Next js for free.
This course is right for you if you:
- Build beautiful frontend design ui
- Make high quality code
- [ Learn how to start a next js project from scratch ]
- [ Learn how to set up SEO to next js project ]
- [ Learn how to set up a authentification with next js from scracth ]
- [ Learn how to setup Tailwind Css with Next js ]
- [ Learn how to build react components with tailwind and framer motion ]
- [ Learn how to setup Prisma with Next js ]
- [ Learn how to setup Mongo DB with next Js ]
To spin up this example locally, follow these steps:
Use the git clone
CLI to clone this template directly to your machine:
git clone https://github.com/sylvaincodes/messenger-clone.git
- You will first need to setup Next js Next js
NEXT_PUBLIC_SEVER_URL=
DATABASE_URL=
- You will need to setup pusher Pusher
PUHSER_KEY=
GITHUB_ID=
GITHUB_SECRET=
- You will need to setup Google App Github
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
npm run dev
-
Environment Setup
- Install Nextjs project
- Install Radix - shadcn
-
Project Folder Structure
-
Landing Page
- SEO
- SMO
- Container - Colors - Fonts
- UI template ( Header - Hero - Main - Footer )
-
Setup Auth UI
npm i next-auth@latest npm i next-auth@prisma-adapter npm i -D @types/bcrypt npm i bcrypt npx auth secret ```
-
Setup Prisma and Mongo DB
npm i -D prisma && npx prisma init npm install mongodb npx prisma db push npm @prisma/client
-
Setup Next Auth API
npm i next-auth@latest @next-auth/prisma-adapter bcrypt npm i -D @types/bcrypt
- Register an Github app for GITHUB ID https://github.com/settings/applications/new
- Test Register API
- Test Login API
-
Setup Home Layout ( Navigation - Navbar )
-
Setup User conversations UI
-
Create User Post ( Message - Image )
-
Create Profil Drawer
-
Settings Messages
-
Setting Group chat
-
Real time message with Pusher
If you have any issues or questions Send a comment on youtube or reach out to me on Discord