{"id":29224809,"url":"https://github.com/amithbv0606/ping","last_synced_at":"2026-04-08T22:31:15.795Z","repository":{"id":304087511,"uuid":"1016575268","full_name":"AmithBV0606/Ping","owner":"AmithBV0606","description":"A full-stack, scalable chat application built using NextJs, TypeScript, Shadcn-UI, Socket.io ,Kafka ,Redis and Postgres.","archived":false,"fork":false,"pushed_at":"2025-07-25T15:50:33.000Z","size":1261,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-25T22:24:04.666Z","etag":null,"topics":["aceternity-ui","kafka","magicui","nextauth","nextjs","postgresql-database","redis-pubsub","shacnui","socket-io","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AmithBV0606.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2025-07-09T08:03:37.000Z","updated_at":"2025-07-25T15:50:36.000Z","dependencies_parsed_at":"2025-07-11T07:12:05.321Z","dependency_job_id":"1ecbf069-9c3d-40c6-a063-da91904b09fd","html_url":"https://github.com/AmithBV0606/Ping","commit_stats":null,"previous_names":["amithbv0606/ping"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AmithBV0606/Ping","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmithBV0606%2FPing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmithBV0606%2FPing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmithBV0606%2FPing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmithBV0606%2FPing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AmithBV0606","download_url":"https://codeload.github.com/AmithBV0606/Ping/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmithBV0606%2FPing/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269448830,"owners_count":24418962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["aceternity-ui","kafka","magicui","nextauth","nextjs","postgresql-database","redis-pubsub","shacnui","socket-io","tailwindcss","typescript"],"created_at":"2025-07-03T07:00:25.787Z","updated_at":"2026-04-08T22:31:15.753Z","avatar_url":"https://github.com/AmithBV0606.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e \n    \u003ch1 style=\"display: flex; justify-content: center; align-items: flex-end;\"\u003e\n    Ping \n    \u003c/h1\u003e\n\u003c/div\u003e\n\nhttps://github.com/user-attachments/assets/5b47edbb-742d-4621-9285-fdeb37b41980\n\nPing is a scalable real-time chat application built with a modern full-stack tech stack. It supports efficient communication between users using WebSockets and a Redis-backed message queue system.\n\n##\n\n### 🧩 Tech Stack\n\n#### Frontend \n\n- **Framework:** [Next.js](https://nextjs.org/) + **TypeScript**\n- **Authentication:** [Next-Auth](https://next-auth.js.org/)\n- **Forms \u0026 Validation:** [React Hook Form](https://react-hook-form.com/), [Zod](https://zod.dev/)\n- **Styling:** [Tailwind CSS](https://tailwindcss.com/), [Shadcn UI](https://ui.shadcn.com/), [Aceternity UI](https://aceternity-ui.vercel.app/), [Magic UI](https://magicui.design/)\n- **Animation:** [Framer Motion](https://www.framer.com/motion/)\n- **Realtime Client:** [Socket.io-client](https://socket.io/)\n\n#### Backend\n\n- **Server:** Node.js + Express + TypeScript\n- **ORM:** [Prisma](https://www.prisma.io/)\n- **Database:** PostgreSQL (hosted on [Supabase](https://supabase.com/))\n- **WebSocket Server:** [Socket.io](https://socket.io/)\n- **Messaging Queue:** [QStash](https://upstash.com/qstash) from Upstash\n- **Redis:** [ioredis](https://github.com/luin/ioredis) + Upstash Redis with `@socket.io/redis-streams-adapter`\n- **Auth:** JSON Web Tokens (JWT)\n\n##\n\n### 🛠 Features\n\n- 🔐 Secure user authentication with NextAuth\n- 💬 Real-time messaging via Socket.io\n- 📬 Messaging queue powered by QStash for scalable message delivery\n- 🧠 Form validation with Zod \u0026 React Hook Form\n- 🌈 Beautiful UI powered by TailwindCSS and popular UI kits\n- 🧩 Scalable architecture using Redis pub/sub and streams\n- ⚡ Optimistic UI and smooth transitions with Framer Motion\n\n##\n\n### 🧪 Project Structure\n\n```\n/backend # Backend (Express + Socket.io)\n/frontend # Frontend (Next.js)\nREADME.md\n```\n\n##\n\n### ⚙️ Project Setup\n\n1. **Clone the repository** :\n\n```bash\ngit clone https://github.com/AmithBV0606/Ping.git\ncd Ping\n```\n\n2. **Open the project in the code editor of your choice.**\n   \n3. **Start with setting up the backend** :\n\n```bash\ncd backend\nnpm install\n```\n\n4. **Create an `.env` file.**\n\n5. **Copy the environment variables from `.env.sample` to `.env`**\n\n```bash\nNODE_ENV=\"development\"\n\n# Supabase DB Credentials :\nDATABASE_URL=\"YOUR_DB_URL\"\nJWT_SECRET=\"YOUR_JWT_SECRET\" # Name the secret whatever you want\n\n# QStash Credentials :\nQSTASH_TOKEN=\"YOUR_QSTASH_TOKEN\"\nQSTASH_CURRENT_SIGNING_KEY=\"YOUR_QSTASH_CURRENT_SIGNING_KEY\"\nQSTASH_NEXT_SIGNING_KEY=\"YOUR_QSTASH_NEXT_SIGNING_KEY\"\n\n# Redis Credentials : \nUPSTASH_REDIS_REST_URL=\"YOUR_UPSTASH_REDIS_REST_URL\"\nUPSTASH_REDIS_REST_TOKEN=\"YOUR_UPSTASH_REDIS_REST_TOKEN\"\n```\n\n6. **Database Url** :\n\n- Create an account on [Supabase](https://supabase.com/). \n  \n- Then create a project.\n\u003cimg src=\"./public/Supabase-1.png\" /\u003e\n\n- Copy the url from \"Transaction pooler\" and past it in `.env` :\n\u003cimg src=\"./public/Supabase-2.png\" /\u003e\n\n7. **QStash setup** :\n\n- Create an account on [Upstash](https://upstash.com/).\n\n- Navigate to the \"QStash\" tab. Then copy the credentials and past it in `.env`.\n\u003cimg src=\"./public/Upstash-1.png\" /\u003e\n\n8. **Redis setup** :\n\nNOTE : For local developemnt you don't need hosted redis instance from Upstash, instead we can use \"redis/redis-stack\" image from [docker hub](https://hub.docker.com/r/redis/redis-stack).\n\nBefore running the following command make sure you have [docker-desktop](https://www.docker.com/products/docker-desktop/) installed on your PC.\n\n```bash\ndocker run -d --name redis-stack -p 6379:6379 -p 8001:8001 -e REDIS_ARGS=\"--requirepass mypassword\" redis/redis-stack:latest\n```\n\nBut if you want to use the **hosted redis** :\n\n- Navigate to the \"Redis\" tab.\n \n- Create a new Redis database.\n\n- Then copy the credentials and past it in `.env`.\n\n\u003cimg src=\"./public/Upstash-2.png\" /\u003e\n\n- Then change the `NODE_ENV` to production.\n\nNOTE : Copy the \"TCP\" version REDIS URL.\n\n9. **Start the backend server** :\n\n```bash\nnpm run dev\n```\n\n10. **Now start setting up frontend** :\n\n```bash\ncd ..\ncd frontend\nnpm install\n```\n\n11. **Create an `.env` file. Then Copy the environment variables from `.env.sample` to `.env`** :\n\n```bash\nNEXTAUTH_URL=http://localhost:3000\nNEXTAUTH_SECRET=\"ADD_WHATEVER_YOU_WANT\"\n\nGOOGLE_CLIENT_ID=\"YOUR_GOOGLE_CLIENT_ID\"\nGOOGLE_CLIENT_SECRET=\"YOUR_GOOGLE_CLIENT_SECRET\"\n\nNEXT_PUBLIC_APP_URL=http://localhost:3000\nNEXT_PUBLIC_BACKEND_URL=http://localhost:4000\n```\n\n12. **Get Client-Id and Client-Secret from Google**:\n\n- Follow this tutorial to get Google Client-id an secret. \n  \n  https://youtu.be/D8DMj2lQMwo?si=rUwjkuJBo2cXA8bc\n\n\u003cimg src=\"./public/Google-1.png\" /\u003e\n\nNOTE : For Authorized JavaScript origins and Authorized redirect URIs use the links in the above image.\n\n##\n\n### 📦 Deployment\n\n- Frontend is deployed on Vercel.\n- Backend is hosted on Render.\n- Supabase handles the Postgres database.\n- Redis and QStash are hosted on Upstash.\n\n##\n\n### 🧠 Future Improvements :\n\n- Add the profile page for the user.\n- Users will be able to send Images and Videos.\n\n##\n\n### 🧑‍💻 Author :\nMade with 💚 by Amith B V\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famithbv0606%2Fping","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famithbv0606%2Fping","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famithbv0606%2Fping/lists"}