{"id":28145105,"url":"https://github.com/tasin5541/nextjs-messenger-clone","last_synced_at":"2026-04-13T17:33:45.257Z","repository":{"id":166755641,"uuid":"642238480","full_name":"Tasin5541/NextJs-Messenger-Clone","owner":"Tasin5541","description":"A messenger clone built with NextJs 13 (app router), MongoDB, Prisma, Tailwind CSS, Pusher and Next-Auth","archived":false,"fork":false,"pushed_at":"2025-10-21T03:13:55.000Z","size":3158,"stargazers_count":45,"open_issues_count":0,"forks_count":27,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-21T05:29:27.987Z","etag":null,"topics":["chat","cloudinary","messenger","messenger-clone","mongodb","mongodb-atlas","next-auth","nextjs13","prisma","pusher","real-time","responsive-design","tailwindcss"],"latest_commit_sha":null,"homepage":"https://nextjs-messenger-clone-tasin5541.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tasin5541.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-05-18T05:58:44.000Z","updated_at":"2025-10-21T03:14:00.000Z","dependencies_parsed_at":"2024-03-22T10:49:26.872Z","dependency_job_id":null,"html_url":"https://github.com/Tasin5541/NextJs-Messenger-Clone","commit_stats":null,"previous_names":["tasin5541/nextjs-messenger-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Tasin5541/NextJs-Messenger-Clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Messenger-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Messenger-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Messenger-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Messenger-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tasin5541","download_url":"https://codeload.github.com/Tasin5541/NextJs-Messenger-Clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Messenger-Clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31762596,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","cloudinary","messenger","messenger-clone","mongodb","mongodb-atlas","next-auth","nextjs13","prisma","pusher","real-time","responsive-design","tailwindcss"],"created_at":"2025-05-14T22:14:01.614Z","updated_at":"2026-04-13T17:33:45.252Z","avatar_url":"https://github.com/Tasin5541.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJs-Messenger-Clone\n\n\u003ca href=\"https://hitscounter.dev/\"\u003e\u003cimg src=\"https://hitscounter.dev/api/hit?url=https%3A%2F%2Fgithub.com%2FTasin5541%2FNextJs-Messenger-Clone\u0026label=visitors\u0026icon=github\u0026color=%23198754\"/\u003e\u003c/a\u003e\n\nA fully responsive real-time chat app made with NextJs 13 (app router), MongoDB, Tailwind CSS, Pusher, Next-Auth and Cloudinary.\n\n\u003cp align=\"center\"\u003e \n    \u003cimg src=\"public/images/guides/messenger.gif\" align=\"center\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n- **[NextJs](https://nextjs.org/)** (13.4.x)\n- **[React](https://facebook.github.io/react/)** (18.x)\n- **[MongoDB](https://www.mongodb.com/atlas/database)** (6.x)\n- **[Tailwind CSS](https://tailwindcss.com/)** (3.x)\n- **[Pusher](https://pusher.com/)** (5.x)\n- **[Next-Auth](https://next-auth.js.org/)** (4.x)\n- **[Typescript](https://www.typescriptlang.org/)** (5.x)\n- Production build script\n\n## Live Demo\n\nSee a [live demo](https://nextjs-messenger-clone-tasin5541.vercel.app/) on Vercel\n\n## Features\n\n\u003cp align=\"center\"\u003e \n    \u003cimg src=\"public/images/guides/messenger-chat.gif\" align=\"center\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n- Real-time chat update with Pusher\n- Group chat\n- Delete chat history\n- Image hosting with Cloudinary\n- Dynamic Theme support (Light and Dark mode)\n- Support for both Desktop and Mobile screens\n\n## Installation\n\n### Setup MongoDB\n\n1. Navigate to https://www.mongodb.com/atlas/database and register\n\n2. Find and Select `Build a Database` \u003cbr\u003e\n   Select the Free tier and press on `Create` at the bottom \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/mongo2.webp\" style=\"width: 800px;\"\u003e\n\n3. Create a user (note down the password) \u003cbr\u003e\n   Scroll down to `Add entries to your IP Access List` \u003cbr\u003e\n   Enter `0.0.0.0/0` and press `Add Entry` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/mongo3.webp\" style=\"width: 800px;\"\u003e\n\n4. Press `Go to Databases` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/mongo4.jpeg\" style=\"width: 800px;\"\u003e\n\n5. Click on `Connect` and select `MongoDB for VSCode` \u003cbr\u003e\n   Copy the connection string and save it in a notepad \u003cbr\u003e\n   Replace `\u003cpassword\u003e` with your password set on step 3 \u003cbr\u003e\n   Add `test` at the end of the connection string (ex. `connectionstring/test`) \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/mongo5.webp\" style=\"width: 800px;\"\u003e\n\n### Setup GitHub Authentication\n\n1. Navigate to https://github.com/ \u003cbr\u003e\n   Click on your profile dropdown on the top right \u003cbr\u003e\n   Click `Settings` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/git1.webp\" style=\"width: 800px;\"\u003e\n\n2. Click `Developer settings` \u003cbr\u003e\n   Click `OAuth Apps` \u003cbr\u003e\n   Click `New OAuth App` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/git2.webp\" style=\"width: 800px;\"\u003e\n\n3. Give a name to your app \u003cbr\u003e\n   Type `http://localhost:3020/` in the `Homepage URL` and `Authorization callback URL` fields. \u003cbr\u003e\n   Click \"Register application\" \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/git3.webp\" style=\"width: 800px;\"\u003e\n\n4. Copy the `Client Id` and note it down \u003cbr\u003e\n   Click on `Generate a new client secret`, copy and note it down \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/git4.webp\" style=\"width: 800px;\"\u003e\n\n### Setup Google Authentication\n\n1. Navigate to https://console.cloud.google.com and create a new project \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/google1.webp\" style=\"width: 800px;\"\u003e\n\n2. Navigate to the newly created project and search for `API \u0026 Services` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/google2.webp\" style=\"width: 800px;\"\u003e\n\n3. Go to `OAuth consent screen` \u003cbr\u003e\n   Click the `External` field \u003cbr\u003e\n   Click `CREATE` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/google3.webp\" style=\"width: 800px;\"\u003e\n\n4. Click the `App name` field and give it a name \u003cbr\u003e\n   On User Mail field, select your email \u003cbr\u003e\n   Scroll down to `Developer contact information` and type your email \u003cbr\u003e\n   Click `SAVE AND CONTINUE` until you're on the `Summary` step \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/google4.webp\" style=\"width: 800px;\"\u003e\n\n5. Go to `Credentials` \u003cbr\u003e\n   Click `CREATE CREDENTIALS` \u003cbr\u003e\n   Select `OAuth client ID` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/google5.webp\" style=\"width: 800px;\"\u003e\n\n6. Select `Web application` as Application Type \u003cbr\u003e\n   Scroll down to `Authorized redirect URIs` and add `http://localhost:3020/api/auth/callback/google` \u003cbr\u003e\n   Click `CREATE` \u003cbr\u003e\n   Copy the `CLient ID` and `Client Secret` and note it down \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/google6.webp\" style=\"width: 800px;\"\u003e\n\n### Setup Cloudinary\n\n1. Navigate to https://console.cloudinary.com and login \u003cbr\u003e\n   Go to `Dashboard` and note down the `Cloud name` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/cloud1.jpeg\" style=\"width: 800px;\"\u003e\n\n2. Go to settings \u003cbr\u003e\n   Then go to `Upload` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/cloud2.webp\" style=\"width: 800px;\"\u003e\n\n3. Click `Add upload preset` \u003cbr\u003e\n   Change `Signing Mode` to `Unsigned` \u003cbr\u003e\n   Click `Save`\n   Copy the newly added preset name and note it down \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/cloud3.webp\" style=\"width: 800px;\"\u003e\n\n### Setup Pusher\n\n1. Navigate to https://dashboard.pusher.com/channels \u003cbr\u003e\n   Click `Create app` (or `Get Started`) \u003cbr\u003e\n   Give the app a name \u003cbr\u003e\n   Select `React` for Frontend and `Node.js` for Backend \u003cbr\u003e\n   Create the app \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/pusher1.webp\" style=\"width: 800px;\"\u003e\n\n2. Go to `App Keys` \u003cbr\u003e\n   Note down values \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/pusher2.webp\" style=\"width: 800px;\"\u003e\n\n### Setup Project\n\n1. Clone/download repo\n2. Create a file called .env.local in the root directory of your project, type the following in cmd/powershell\n   ```\n   cp env.example .env.local\n   ```\n3. Inside the `.env.local` file, add the MongoDB, Pusher, Cloudinary, GitHub and Google keys from the previous steps\n4. `yarn install` to install the dependencies (run `npm install yarn` if you don't have yarn installed)\n5. `yarn prisma db push` to create the DB collections\n6. `prisma generate` to create the prisma client\n\n## Usage\n\n**Development**\n\n`yarn dev`\n\n- Build app continuously (HMR enabled)\n\n**Production**\n\n`yarn build`\n`yarn start`\n\n- Build app once (HMR disabled) to `/.next/`\n\n---\n\n**All commands**\n\n| Command      | Description                                |\n| ------------ | ------------------------------------------ |\n| `yarn dev`   | Build app continuously (HMR enabled)       |\n| `yarn build` | Build app once (HMR disabled) to `/.next/` |\n| `yarn start` | Run production build                       |\n\n## See also\n\n- Some Design ideas were taken from [Facebook Messenger](https://www.facebook.com/messenger/)\n- Some Implementation Ideas for this project are taken from [Josh](https://www.youtube.com/@joshtriedcoding) and [Antonio](https://www.youtube.com/@codewithantonio)\n- Project was bootstrapped with [create-next-app](https://nextjs.org/docs/api-reference/create-next-app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasin5541%2Fnextjs-messenger-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftasin5541%2Fnextjs-messenger-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasin5541%2Fnextjs-messenger-clone/lists"}