{"id":49991415,"url":"https://github.com/tiwaridivya25/devconnect","last_synced_at":"2026-05-19T05:01:17.359Z","repository":{"id":324090313,"uuid":"1093909282","full_name":"TiwariDivya25/DevConnect","owner":"TiwariDivya25","description":"Share your ideas. Build communities. Connect with developers. DevConnect is the modern social platform built by developers, for developers.","archived":false,"fork":false,"pushed_at":"2026-04-06T16:04:34.000Z","size":1496,"stargazers_count":10,"open_issues_count":44,"forks_count":37,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-06T17:23:27.010Z","etag":null,"topics":["developer-experience","ecwoc26","fullstack","postgresql","react","social-media","supabase","tailwindcss","typescript","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://devconnect-delta.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/TiwariDivya25.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","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-11-11T02:12:35.000Z","updated_at":"2026-04-06T16:04:42.000Z","dependencies_parsed_at":"2026-05-19T05:00:46.104Z","dependency_job_id":null,"html_url":"https://github.com/TiwariDivya25/DevConnect","commit_stats":null,"previous_names":["tiwaridivya25/devconnect"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TiwariDivya25/DevConnect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiwariDivya25%2FDevConnect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiwariDivya25%2FDevConnect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiwariDivya25%2FDevConnect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiwariDivya25%2FDevConnect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TiwariDivya25","download_url":"https://codeload.github.com/TiwariDivya25/DevConnect/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiwariDivya25%2FDevConnect/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33203112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"online","status_checked_at":"2026-05-19T02:00:06.763Z","response_time":58,"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":["developer-experience","ecwoc26","fullstack","postgresql","react","social-media","supabase","tailwindcss","typescript","vercel-deployment"],"created_at":"2026-05-19T05:00:35.590Z","updated_at":"2026-05-19T05:01:17.347Z","avatar_url":"https://github.com/TiwariDivya25.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DevConnect\n\n\n\u003cimg width=\"1363\" height=\"676\" alt=\"image\" src=\"./src/assets/1.png\" /\u003e\n\n\n\u003cimg width=\"1365\" height=\"672\" alt=\"image\" src=\"./src/assets/2.png\" /\u003e\n\n\nA modern social platform for developers to share ideas, build communities, and connect with like-minded developers worldwide.\n\n## 📋 Table of Contents\n\n- [Overview](#overview)\n- [Tech Stack](#tech-stack)\n- [Features](#features)\n- [Project Structure](#project-structure)\n- [Getting Started](#getting-started)\n- [Installation](#installation)\n- [Environment Setup](#environment-setup)\n- [Running the Project](#running-the-project)\n- [Contributing](#contributing)\n- [Code Style](#code-style)\n- [Git Workflow](#git-workflow)\n- [Key Components](#key-components)\n- [Database Schema](#database-schema)\n- [Common Tasks](#common-tasks)\n- [Troubleshooting](#troubleshooting)\n\n## 🎯 Overview\n\nDevConnect is a full-stack web application that enables developers to:\n- Create and share posts with the community\n- Form and manage communities around shared interests\n- Engage through nested comments and replies\n- Like and interact with posts\n- Discover other developers and their work\n\n## 🛠 Tech Stack\n\n### Frontend\n- **React 18** - UI library\n- **TypeScript** - Type safety\n- **Tailwind CSS** - Styling\n- **React Router** - Navigation\n- **TanStack Query** - Data fetching \u0026 caching\n- **Supabase Client** - Real-time database client\n- **Lucide React** - Icon library\n\n### Backend\n- **Supabase** - PostgreSQL database \u0026 authentication\n- **GitHub OAuth** - Social authentication\n\n### Tools \u0026 Libraries\n- **Vite** - Build tool\n- **ESLint** - Code linting\n- **Prettier** - Code formatting\n\n## ✨ Features\n\n- 🔐 **GitHub Authentication** - Sign in with GitHub account ,Gmail based authentication\n- 📝 **Create Posts** - Share posts with images and content\n- 👤 **Profile Dashboard** - View user details, email, account info, and manage sessions\n- ✏️ **Profile Editing** - Update profile information including bio, location, website, and social links (GitHub, Twitter)\n- 🖼️ **Avatar Upload** - Upload custom profile pictures with real-time preview\n- 📊 **Real-time Dashboard** - Monitor your activity with live-updating dashboard and recent activity feed\n- 💬 **Nested Comments** - Multi-level comment threads with collapse/expand\n- 👥 **Communities** - Create and manage developer communities\n- ❤️ **Likes System** - Vote on posts and comments\n- 💬 **Real-Time Messaging** - Direct messages and group chats with live updates\n- 📁 **File Sharing** - Share images and files in conversations\n- 🔔 **Live Notifications** - Real-time typing indicators and message notifications\n- 👤 **User Presence** - See who's online and their status\n- 📅 **Event Management** - Create, manage, and attend developer events and meetups\n- 🎟️ **Event Registration** - RSVP system with attendance tracking\n- 🌐 **Virtual Events** - Support for online events with meeting links\n- 📸 **Event Detail Pages** - Beautiful, comprehensive event pages with banner images and rich details\n- 📊 **Real-time Event Stats** - Live updating event statistics and attendee information\n- 🎨 **Modern UI** - Dark theme with cyan accents, professional design\n- 📱 **Responsive Design** - Works on desktop and mobile\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/\n│   ├── Navbar.tsx                 # Navigation bar\n│   ├── PostItem.tsx               # Individual post card\n│   ├── PostList.tsx               # List of all posts\n│   ├── PostDetail.tsx             # Full post view\n│   ├── CommentItem.tsx            # Individual comment\n│   ├── CommentSection.tsx         # Comments container\n│   ├── LikeButton.tsx             # Like/vote button\n│   ├── CommunityList.tsx          # List of communities\n│   ├── CommunityDisplay.tsx       # Posts in a community\n│   ├── CreatePost.tsx             # Post creation form\n│   ├── CreateCommunity.tsx        # Community creation form\n│   ├── MessagingInterface.tsx     # Main messaging layout\n│   ├── ConversationList.tsx       # Conversation sidebar\n│   ├── MessageList.tsx            # Message display area\n│   ├── MessageInput.tsx           # Message composition\n│   ├── ConversationHeader.tsx     # Chat header with actions\n│   ├── CreateConversationModal.tsx # New chat creation\n│   ├── MessageNotificationBadge.tsx # Unread message indicator\n│   ├── EventCard.tsx              # Individual event card\n│   ├── EventList.tsx              # List of events\n│   ├── EventDetail.tsx            # Full event view\n│   ├── CreateEventForm.tsx        # Event creation form\n│   ├── EventFilters.tsx           # Event filtering controls\n│   ├── AttendeeList.tsx           # Event attendees display\n│   └── EventActions.tsx           # Event interaction buttons\n├── pages/\n│   ├── Home.tsx                   # Home page\n│   ├── PostPage.tsx               # Post detail page\n│   ├── CommunitiesPage.tsx        # Communities listing page\n│   ├── CommunityPage.tsx          # Single community page\n│   ├── CreatePostPage.tsx         # Post creation page\n│   ├── CreateCommunityPage.tsx    # Community creation page\n│   ├── MessagesPage.tsx           # Messaging interface page\n│   ├── EventsPage.tsx             # Events listing page\n│   ├── CreateEventPage.tsx        # Event creation page\n│   └── EventDetailPage.tsx        # Single event page\n├── context/\n│   ├── AuthContext.tsx            # Authentication context\n|   └── ThemeContext.tsx           # Dark/light theme context \n├── hooks/\n│   └── useMessaging.ts            # Messaging-related hooks\n├── types/\n│   ├── messaging.ts               # TypeScript interfaces for messaging\n│   └── events.ts                  # TypeScript interfaces for events\n├── supabase-client.ts             # Supabase configuration\n├── theme.css                      # Theme-related global styles\n├── App.tsx                        # Main app component\n└── index.css                      # Global styles\n\n```\n\n## 🚀 Getting Started\n\n### 📌 Prerequisites\n- Node.js (v16+)\n- npm or yarn\n- Supabase account\n- GitHub OAuth App\n\n### Installation\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/yourusername/devconnect.git\ncd devconnect\n```\n\n2. **Install dependencies**\n\n```bash\nnpm install\n```\n\n3. **Create a `.env` file** in the root directory:\n\n```env\nVITE_SUPABASE_URL=your_supabase_url\nVITE_SUPABASE_ANON_KEY=your_supabase_anon_key\n```\n\n4. **Set up GitHub OAuth**\n   - Go to GitHub Settings → Developer settings → OAuth Apps\n   - Create a new OAuth App\n   - Set Authorization callback URL to http://localhost:5173/auth/callback\n   - Add credentials to Supabase Authentication\n\n### Environment Setup\n\n#### Supabase Setup\n\n1. Create a new Supabase project\n2. Create tables with the following schema:\n\n**Posts Table**\n\n```sql\nCREATE TABLE Posts (\n  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n  title TEXT NOT NULL,\n  content TEXT NOT NULL,\n  image_url TEXT,\n  avatar_url TEXT,\n  community_id BIGINT REFERENCES Communities(id),\n  user_id UUID NOT NULL,\n  created_at TIMESTAMP DEFAULT NOW(),\n  updated_at TIMESTAMP DEFAULT NOW()\n);\n```\n\n**Comments Table**\n\n```sql\nCREATE TABLE Comments (\n  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n  post_id BIGINT NOT NULL REFERENCES Posts(id),\n  content TEXT NOT NULL,\n  author TEXT NOT NULL,\n  avatar_url TEXT,\n  user_id UUID NOT NULL,\n  parent_comment_id BIGINT REFERENCES Comments(id),\n  created_at TIMESTAMP DEFAULT NOW()\n);\n```\n\n**Communities Table**\n\n```sql\nCREATE TABLE Communities (\n  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n  name TEXT NOT NULL,\n  description TEXT,\n  created_at TIMESTAMP DEFAULT NOW()\n);\n```\n\n**Votes Table**\n\n```sql\nCREATE TABLE Votes (\n  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n  post_id BIGINT NOT NULL REFERENCES Posts(id),\n  user_id UUID NOT NULL,\n  vote INT DEFAULT 1,\n  created_at TIMESTAMP DEFAULT NOW(),\n  UNIQUE(post_id, user_id)\n);\n```\n\n**Events Table**\n\n```sql\nCREATE TABLE Events (\n  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n  title TEXT NOT NULL,\n  description TEXT NOT NULL,\n  event_date TIMESTAMP NOT NULL,\n  location TEXT,\n  is_virtual BOOLEAN DEFAULT FALSE,\n  meeting_link TEXT,\n  max_attendees INTEGER,\n  image_url TEXT,\n  tags TEXT[],\n  organizer_id UUID NOT NULL REFERENCES auth.users(id),\n  community_id BIGINT REFERENCES Communities(id),\n  created_at TIMESTAMP DEFAULT NOW(),\n  updated_at TIMESTAMP DEFAULT NOW()\n);\n```\n\n**Event Attendees Table**\n\n```sql\nCREATE TABLE EventAttendees (\n  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n  event_id BIGINT NOT NULL REFERENCES Events(id) ON DELETE CASCADE,\n  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,\n  status TEXT DEFAULT 'attending' CHECK (status IN ('attending', 'maybe', 'not_attending')),\n  registered_at TIMESTAMP DEFAULT NOW(),\n  UNIQUE(event_id, user_id)\n);\n```\n\n**Messaging Tables**\n\nFor the complete messaging schema including conversations, messages, reactions, and real-time features, see `database-schema-messaging.sql`.\n\n**Storage Setup**\n- Create a bucket named `post-images` in Supabase Storage\n- Create a bucket named `message-files` in Supabase Storage (private)\n- Create a bucket named `event-images` in Supabase Storage (public)\n- Set `post-images` bucket to public\n- Set `message-files` bucket to private\n- Set `event-images` bucket to public\n\n### Running the Project\n\n```bash\n# Development\nnpm run dev\n\n# Build\nnpm run build\n\n# Preview build\nnpm run preview\n\n# Lint\nnpm run lint\n```\n\nThe app will be available at http://localhost:5173\n\n## 💬 Setting Up Messaging\n\nFor detailed instructions on setting up the real-time messaging system, see [MESSAGING_SETUP.md](MESSAGING_SETUP.md).\n\nQuick setup:\n1. Run the SQL schema from `database-schema-messaging.sql`\n2. Create the `message-files` storage bucket (private)\n3. Enable real-time for messaging tables\n4. Navigate to `/messages` to start chatting!\n\n## 📅 Setting Up Event Management\n\nFor detailed instructions on setting up the event management system, see the documentation in `/docs/`:\n\n- [EVENT_SCHEMA.md](docs/EVENT_SCHEMA.md) - Database schema and relationships\n- [EVENT_API.md](docs/EVENT_API.md) - API endpoints and usage\n- [EVENT_TYPES.md](docs/EVENT_TYPES.md) - TypeScript type definitions\n- [EVENT_INTEGRATION.md](docs/EVENT_INTEGRATION.md) - Integration patterns and hooks\n\nQuick setup:\n1. Run the SQL schema from `docs/EVENT_SCHEMA.md`\n2. Create the `event-images` storage bucket (public)\n3. Navigate to `/events` to start creating events!\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how to get started:\n\n1. **Fork the repository**\n2. **Create a feature branch**\n\n```bash\ngit checkout -b feature/your-feature-name\n```\n\n3. **Make your changes**\n4. **Test your changes**\n5. **Commit with clear messages**\n\n```bash\ngit commit -m \"feat: add new feature description\"\n```\n\n6. **Push to your fork**\n\n```bash\ngit push origin feature/your-feature-name\n```\n\n7. **Open a Pull Request**\n\n### Areas for Contribution\n\n- ✅ Bug fixes\n- ✅ Feature enhancements\n- ✅ UI/UX improvements\n- ✅ Performance optimizations\n- ✅ Documentation improvements\n- ✅ Accessibility improvements\n\n## 📝 Code Style\n\n### TypeScript Guidelines\n- Use explicit type annotations\n- Avoid `any` type\n- Create interfaces for data structures\n- Use strict mode\n\n### React Guidelines\n- Use functional components with hooks\n- Keep components focused and reusable\n- Use proper TypeScript types for props\n- Avoid inline styles (use Tailwind)\n\n### Naming Conventions\n- Components: PascalCase (e.g., PostItem.tsx)\n- Functions: camelCase (e.g., fetchPosts)\n- Constants: UPPER_SNAKE_CASE (e.g., MAX_ITEMS)\n- Files: Match component/function name or use kebab-case\n\n### Formatting\n\n```bash\n# Format code\nnpm run format\n\n# Lint and fix\nnpm run lint -- --fix\n```\n\n## 🔄 Git Workflow\n\n### Commit Message Format\n\n```\n\u003ctype\u003e: \u003csubject\u003e\n\n\u003cbody\u003e\n\n\u003cfooter\u003e\n```\n\n**Types:**\n- `feat`: A new feature\n- `fix`: A bug fix\n- `docs`: Documentation changes\n- `style`: Code style changes (formatting)\n- `refactor`: Code refactoring\n- `perf`: Performance improvements\n- `test`: Adding tests\n- `chore`: Build, dependency updates\n\n**Example:**\n\n```\nfeat: add nested comments support\n\nImplemented multi-level comment threads with collapse/expand functionality.\nAdded CommentItem component to handle recursive rendering.\n\nCloses #123\n```\n\n## 🔧 Key Components\n\n### Authentication (AuthContext.tsx)\nManages user authentication state including email/password login, GitHub OAuth, logout, password reset, and profile session handling.\n\n```typescript\nconst { signInWithGithub, signOut, user, isLoading } = useAuth();\n```\n\n### Posts (PostItem.tsx, PostList.tsx)\nDisplays individual posts and collections of posts with lazy loading.\n\n### Comments (CommentItem.tsx, CommentSection.tsx)\nHandles nested comment threads with real-time updates using TanStack Query.\n\n### Like System (LikeButton.tsx)\nManages post votes with optimistic updates and cache invalidation.\n\n### Communities (CommunityList.tsx, CommunityDisplay.tsx)\nShows community listings and posts within communities.\n\n### User Account Pages\n- `/signin` – Email \u0026 GitHub login\n- `/signup` – Create account\n- `/reset-password` – Password recovery\n- `/profile` – User profile dashboard\n\n\n## 📊 Database Schema\n\n### Key Relationships\n\n- **Users** → **Posts** (1:N)\n- **Posts** → **Comments** (1:N)\n- **Comments** → **Comments** (1:N, self-referencing for nested replies)\n- **Posts** → **Communities** (N:1)\n- **Posts** → **Votes** (1:N)\n- **Events** → **Users** (organizer_id): Many-to-One\n- **Events** → **Communities** (community_id): Many-to-One (optional)\n- **Events** → **EventAttendees**: One-to-Many\n- **EventAttendees** → **Users**: Many-to-One\n\n### Query Patterns\n\nGet posts with community info:\n```sql\nSELECT *, Communities(name) FROM Posts\n```\n\nGet comments with nested structure:\n```sql\nSELECT * FROM Comments WHERE post_id = ? ORDER BY created_at\n```\n\nGet likes for a post:\n```sql\nSELECT COUNT(*) FROM Votes WHERE post_id = ? AND vote = 1\n```\n\n## 🛠 Common Tasks\n\n### Adding a New Feature\n\n1. **Create components** in `src/components/`\n2. **Create page** (if needed) in `src/pages/`\n3. **Update routing** in `App.tsx`\n4. **Add data fetching** using TanStack Query\n5. **Style with Tailwind CSS**\n6. **Test thoroughly**\n7. **Update documentation**\n\n### Making an API Call\n\n```typescript\nimport { useQuery } from '@tanstack/react-query';\nimport { supabase } from '../supabase-client';\n\nconst { data, isLoading, error } = useQuery({\n  queryKey: ['posts'],\n  queryFn: async () =\u003e {\n    const { data, error } = await supabase\n      .from('Posts')\n      .select('*')\n      .order('created_at', { ascending: false });\n    \n    if (error) throw new Error(error.message);\n    return data;\n  }\n});\n```\n\n### Adding Styling\n\nUse Tailwind CSS classes:\n\n```tsx\n\u003cdiv className=\"bg-slate-900/50 border border-slate-800 rounded-lg p-4\"\u003e\n  \u003ch2 className=\"text-xl font-semibold text-white\"\u003eTitle\u003c/h2\u003e\n\u003c/div\u003e\n```\n\n## 🐛 Troubleshooting\n\n### Issue: \"Could not find the table in schema cache\"\n**Solution:** Table names are case-sensitive. Ensure you're using the correct casing (e.g., Comments, not comments).\n\n### Issue: Images not uploading\n**Solution:** Check that the `post-images` bucket exists in Supabase Storage and is set to public.\n\n### Issue: Authentication not working\n**Solution:** Verify GitHub OAuth credentials are correctly set in Supabase and the callback URL matches your app URL.\n\n### Issue: Comments not loading\n**Solution:** Check database permissions in Supabase. Ensure RLS policies allow reading comments.\n\n### Issue: Build errors\n**Solution:**\n\n```bash\n# Clear node modules and reinstall\nrm -rf node_modules package-lock.json\nnpm install\nnpm run build\n```\n\n## 📚 Additional Resources\n\n- [Supabase Docs](https://supabase.com/docs)\n- [React Documentation](https://react.dev)\n- [TypeScript Handbook](https://www.typescriptlang.org/docs/)\n- [Tailwind CSS](https://tailwindcss.com/docs)\n- [TanStack Query](https://tanstack.com/query/latest)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 💬 Support\n\nHave questions? \n- Open an issue on GitHub\n- Check existing issues for solutions\n- Join our discussions\n\n## 🌟 Acknowledgments\n\nThanks to all contributors who have helped improve DevConnect!\n\n---\n\n**Happy coding!** 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiwaridivya25%2Fdevconnect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiwaridivya25%2Fdevconnect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiwaridivya25%2Fdevconnect/lists"}