{"id":48476425,"url":"https://github.com/rishabyd/echoline","last_synced_at":"2026-04-08T16:01:29.077Z","repository":{"id":300086092,"uuid":"996083553","full_name":"rishabyd/echoline","owner":"rishabyd","description":"Real-time messaging app with modern full-stack implementation.","archived":false,"fork":false,"pushed_at":"2025-07-02T12:43:45.000Z","size":11788,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-07T07:52:50.352Z","etag":null,"topics":["chat","cloudinary","communication","file-upload","fullstack","modern-ui","nextauth","nextjs","nodejs","postgresql","prisma","react","realtime","socketio","tailwindcss","typescript","websocket","zustand"],"latest_commit_sha":null,"homepage":"","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/rishabyd.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":"2025-06-04T12:37:24.000Z","updated_at":"2026-01-01T15:22:42.000Z","dependencies_parsed_at":"2025-10-12T02:43:56.333Z","dependency_job_id":"2b84bfdf-456a-492d-b9d8-3591e2dba4cd","html_url":"https://github.com/rishabyd/echoline","commit_stats":null,"previous_names":["elitebot47/chat-app","elitebot47/echoline","rishabyadav-dev/echoline","rishabyd/echoline"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rishabyd/echoline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabyd%2Fecholine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabyd%2Fecholine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabyd%2Fecholine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabyd%2Fecholine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rishabyd","download_url":"https://codeload.github.com/rishabyd/echoline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabyd%2Fecholine/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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","communication","file-upload","fullstack","modern-ui","nextauth","nextjs","nodejs","postgresql","prisma","react","realtime","socketio","tailwindcss","typescript","websocket","zustand"],"created_at":"2026-04-07T07:50:58.871Z","updated_at":"2026-04-08T16:01:29.072Z","avatar_url":"https://github.com/rishabyd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EchoLine\n\nA full-stack real-time messaging platform with WebSocket communication, file uploads, and a sleek UI.\n\n![](assets/3.png)\n![](assets/4.png)\n\n## Live Demo\n\n[https://chat-app-roan-psi.vercel.app](https://chat-app-roan-psi.vercel.app)\n\n## ✨ Features\n\n- ⚡ Real-time messaging with Socket.io\n- 🔔 In-app notifications system\n- 📁 File uploads and sharing via Cloudinary\n- 🔒 Secure authentication with NextAuth.js\n- 👤 User presence indicators and typing status\n- 🎨 Modern UI with Tailwind CSS and Shadcn UI\n- 📱 Responsive design for mobile and desktop\n- 🔍 Message search and history\n\n## 🏗️ Project Architecture\n\n### Client-Server Architecture\n\nEchoLine uses a separated architecture with:\n\n- **Next.js Frontend**: Handles UI, authentication, and API routes\n- **Express Socket.io Server**: Manages real-time communication\n\nThis separation allows for independent scaling and deployment of each component.\n\n## 🔄 Real-time Communication Flow\n\n```mermaid\nsequenceDiagram\n    participant Client1 as User 1\n    participant NextJS as Next.js App\n    participant Socket as Socket.io Server\n    participant Client2 as User 2\n\n    Client1-\u003e\u003eNextJS: Send message\n    NextJS-\u003e\u003eNextJS: Store in PostgreSQL\n    NextJS-\u003e\u003eSocket: Emit message event\n    Socket-\u003e\u003eClient2: Broadcast message\n    Socket-\u003e\u003eClient2: Send typing notification\n    Client2-\u003e\u003eSocket: Acknowledge receipt\n    Socket-\u003e\u003eClient1: Deliver receipt status\n```\n\n## 🛡️ Authentication Flow\n\nEchoLine uses NextAuth.js for secure authentication with:\n\n- Email/password authentication\n- Google OAuth (optional)\n- Session-based authentication\n- Secure password hashing with Argon2\n\n## 💾 Database Schema\n\n### Core Entities\n\n- **User**: User profiles and authentication\n- **Room**: Chat rooms (private or group)\n- **Message**: Individual messages with content and metadata\n- **Notification**: System and user notifications\n\n### Key Relationships\n\n- Users participate in multiple Rooms\n- Rooms contain multiple Messages\n- Messages generate Notifications\n\n## 🛠️ Tech Stack\n\n### Frontend\n\n- Next.js 15 (App Router)\n- React 19\n- TypeScript\n- Tailwind CSS\n- Zustand (State Management)\n- React Query / TanStack Query\n- Socket.io Client\n- Framer Motion (Animations)\n- Cloudinary (File Storage)\n\n### Backend\n\n- Node.js\n- Express\n- Socket.io\n- PostgreSQL\n- Prisma ORM\n- NextAuth.js\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ and npm\n- PostgreSQL database\n- Cloudinary account (for file uploads)\n\n### Installation\n\n#### 1. Clone the repository\n\n```bash\ngit clone https://github.com/elitebot47/EchoLine.git\ncd EchoLine\n```\n\n#### 2. Set up the client\n\n```bash\ncd client\nnpm install\n\n# Create .env.local file with:\ncp .env.example .env.local\n# Edit .env.local with your credentials\n```\n\n#### 3. Set up the database\n\n```bash\n# In the client directory\nnpx prisma migrate dev\nnpx prisma generate\n```\n\n#### 4. Set up the server\n\n```bash\ncd ../server\nnpm install\n```\n\n#### 5. Start the development servers\n\nIn one terminal (client):\n\n```bash\ncd client\nnpm run dev\n```\n\nIn another terminal (server):\n\n```bash\ncd server\nnpm run dev\n```\n\n## 🔐 Environment Variables\n\n### Client Environment Setup (.env.local)\n\nCreate a `.env.local` file in the `client` directory with the following variables:\n\n```env\n# Database Connection\nDATABASE_URL=\"postgresql://username:password@localhost:5432/echoline\"\n\n# NextAuth Authentication\nAUTH_SECRET=\"your-nextauth-secret-key\"\nNEXTAUTH_URL=\"http://localhost:3000\"\n\n# Google OAuth (Optional - for Google Sign-in)\nAUTH_GOOGLE_ID=\"your-google-client-id\"\nAUTH_GOOGLE_SECRET=\"your-google-client-secret\"\n\n# Cloudinary Configuration (File Storage)\nNEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"your-cloud-name\"\nCLOUDINARY_API_KEY=\"your-api-key\"\nCLOUDINARY_API_SECRET=\"your-api-secret\"\n\n# Cloudinary Upload Presets\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_ROOM_IMAGE=\"preset-for-room-images\"\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_ROOM_DOCUMENT=\"preset-for-documents\"\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_USER_AVATAR=\"preset-for-avatars\"\n\n# Socket.io Server URL\nNEXT_PUBLIC_SOCKET_URL=\"http://localhost:3001\"\n```\n\n### Server Environment Setup (.env)\n\nCreate a `.env` file in the `server` directory with:\n\n```env\n# Server Configuration\nPORT=3001\n\n# CORS Origins (comma-separated)\nALLOWED_ORIGINS=\"http://localhost:3000,https://your-production-domain.com\"\n```\n\n### Environment Variable Details\n\n| Variable                                 | Description                                | Required         |\n| ---------------------------------------- | ------------------------------------------ | ---------------- |\n| `DATABASE_URL`                           | PostgreSQL connection string               | Yes              |\n| `AUTH_SECRET`                            | Secret key for NextAuth session encryption | Yes              |\n| `NEXTAUTH_URL`                           | Full URL of your Next.js application       | Yes              |\n| `AUTH_GOOGLE_ID`                         | Google OAuth client ID                     | For Google login |\n| `AUTH_GOOGLE_SECRET`                     | Google OAuth client secret                 | For Google login |\n| `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME`      | Your Cloudinary cloud name                 | Yes              |\n| `CLOUDINARY_API_KEY`                     | Cloudinary API key                         | Yes              |\n| `CLOUDINARY_API_SECRET`                  | Cloudinary API secret                      | Yes              |\n| `NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET_*` | Upload presets for different file types    | Yes              |\n| `NEXT_PUBLIC_SOCKET_URL`                 | URL for Socket.io server                   | Yes              |\n| `PORT`                                   | Server port (server only)                  | Yes              |\n| `ALLOWED_ORIGINS`                        | CORS allowed origins (server only)         | Yes              |\n\n### Setting Up Cloudinary Upload Presets\n\n1. Log in to your [Cloudinary Console](https://cloudinary.com/console)\n2. Navigate to Settings \u003e Upload\n3. Scroll down to \"Upload presets\" and click \"Add upload preset\"\n4. Create three presets with appropriate settings:\n   - One for room images\n   - One for documents\n   - One for user avatars\n5. Copy the preset names to your environment variables\n\n## 🔧 Code Quality \u0026 Linting\n\nEchoLine maintains high code quality standards with:\n\n```bash\n# Run ESLint\nnpm run lint\n\n# Fix ESLint issues\nnpm run lint:fix\n\n# Format code with Prettier\nnpm run format\n```\n\n### ESLint Configuration\n\nThe project uses ESLint with custom rules for React, TypeScript, and Next.js to ensure code quality and consistency.\n\n### Prettier Configuration\n\nCode formatting is standardized using Prettier with the following settings:\n\n```json\n{\n  \"singleQuote\": true,\n  \"jsxSingleQuote\": true,\n  \"tabWidth\": 2,\n  \"semi\": true\n}\n```\n\n---\n\n### REST API Endpoints\n\nThe application provides the following API endpoints:\n\n```\nGET /api/users - Get all users\nGET /api/users/:id - Get user by ID\nPOST /api/rooms - Create a new chat room\nGET /api/rooms/:id/messages - Get messages for a room\nPOST /api/messages - Send a new message\n```\n\n### Open the App\n\nGo to [http://localhost:3000](http://localhost:3000) in your browser to use the application.\n\n---\n\n### (Optional) Seed the Database\n\nIf you have a seed script, you can run it to populate your database with initial data:\n\n```bash\nnpx prisma db seed\n```\n\n---\n\n## 🚀 Deployment\n\n### Frontend Deployment (Next.js)\n\n1. **Vercel** (Recommended)\n\n   ```bash\n   vercel\n   ```\n\n2. **Netlify**\n   ```bash\n   netlify deploy\n   ```\n\n### Backend Deployment (Socket.io Server)\n\n1. **Render**\n\n   - Connect your GitHub repository\n   - Set build command: `npm install \u0026\u0026 npm run build`\n   - Set start command: `npm start`\n\n2. **Railway**\n\n   ```bash\n   railway up\n   ```\n\n3. **Fly.io**\n   ```bash\n   fly launch\n   fly deploy\n   ```\n\n## 🔮 Future Roadmap\n\n- [ ] End-to-end encryption\n- [ ] Protected socket.io backend with JWT\n- [ ] Message reactions and emoji support\n- [ ] Message search and filtering\n\n## License\n\nThis project is licensed under the MIT License - see the `LICENSE` file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishabyd%2Fecholine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frishabyd%2Fecholine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishabyd%2Fecholine/lists"}