DevConnect is a highly polished, professional social portfolio platform designed specifically for software engineers. It enables developers to showcase system architectures, search for peers by technology stacks, build networks, and participate in real-time, secure peer-to-peer discussions.
DevConnect is built using a modern, fast, and secure developer stack:
- React 19 (TypeScript): Utilizing functional components, custom hooks, and safe local states.
- Vite: Providing ultra-fast builds, instant hot reloading, and optimized resource bundling.
- Tailwind CSS v4: Leveraging modular utility classes, deep customization, and dynamic custom properties for a responsive layout.
- Motion (by Motion/React): Powering smooth interface transitions, slide-ins, and micro-interactions.
- Lucide React: Delivering crisp, scalable, high-quality modern vector icons.
- Supabase (PostgreSQL): Serves as the durable database and auth provider.
- Supabase Database: Stores core relational data including profiles, social feeds, projects, professional connections, and messages.
- Supabase Auth: Secure, password-based email registration and authentication.
- Row-Level Security (RLS): Enforces table security rules directly on PostgreSQL to ensure users can only modify their own data.
- Gemini AI API: Configured for server-side AI-assisted capabilities (profile suggestions, code reviews, and feed summarization).
├── src/
│ ├── components/ # Reusable core modules & views
│ │ ├── Connections.tsx # Peer connection request & network manager
│ │ ├── Feed.tsx # Main developer activity stream
│ │ ├── Messages.tsx # Real-time peer discussions
│ │ ├── Onboarding.tsx # Account registration/profile builder wizard
│ │ ├── Profile.tsx # Portfolio and skills grid
│ │ └── Projects.tsx # System architectures & project details
│ ├── types.ts # Shared TypeScript schemas & definitions
│ ├── supabase.ts # Client client wrapper & fallback safety mechanisms
│ ├── main.tsx # Entry point
│ ├── index.css # Custom styling & Tailwind directives
│ └── App.tsx # Routing, central state, and app wrapper
├── supabase_schema.sql # Database initialization DDL schemas
├── package.json # Package declarations and run scripts
└── .env.example # Reference configuration variables
The PostgreSQL tables defined in supabase_schema.sql model a rich social network:
users(Profiles): Tracks developer handles, professional headlines, bios, avatars, and skill keywords.projects: Portrays portfolios complete with technologies used, descriptions, and source links.connections: Tracks friendship states (pending,accepted,declined) between users.messages: Logs secure, chronologically-ordered communication between developers.feed_posts: Handles user posts, architecture snapshots, and code snippets.