A modern, full-stack social networking platform designed specifically for software developers, creators, and engineers to share projects, stories, and ideas.
DevConnect is a developer-first social hub combining the visual engagement of modern social media with features built around engineering workflows. Share your daily builds with Developer Stories, publish project updates and code snippets in the Feed, engage through Direct Messaging, and build your developer network.
- 📸 Developer Stories: Share 24-hour disappearing progress updates, snippets, or reshare posts into stories with full view tracking.
- 📰 Interactive Feed: Create posts with text and image attachments. Like, comment on, and save posts to your private collection.
- 🔍 Explore & Search: Discover developers and trending posts with unified instant search.
- 💬 Direct Messaging: 1-on-1 private messaging to chat and collaborate directly with other engineers.
- 🔔 Real-time Notifications: Instant alerts whenever users follow you, like your posts, or drop comments.
- 👤 Customizable Profiles: Personalize your profile with custom bios, profile avatars, cover images, and track your followers and following lists.
- 🌓 Dark & Light Modes: Seamless theme switching with system preference detection and localStorage persistence.
- 🔐 Secure Authentication: Integrated credentials authentication powered by NextAuth.js with password hashing.
| Layer | Technology |
|---|---|
| Frontend | Next.js 16 (App Router), React 19 |
| Language | TypeScript |
| API & Data | GraphQL, Apollo Server, Apollo Client SSR |
| Database & ORM | Prisma ORM with LibSQL / SQLite (Turso cloud compatible) |
| Authentication | NextAuth.js |
| Styling | Custom Vanilla CSS Design System with CSS Variables |
├── prisma/
│ └── schema.prisma # Prisma data models (User, Post, Story, Comment, etc.)
├── public/
│ └── uploads/ # Local storage for media uploads
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ ├── auth/ # NextAuth session & credentials routes
│ │ │ ├── graphql/ # Apollo GraphQL server endpoint
│ │ │ └── upload/ # Multipart file upload handler
│ │ ├── explore/ # Explore feed page
│ │ ├── messages/ # Direct messages & chat interface
│ │ ├── notifications/ # User activity & notifications page
│ │ ├── profile/ # User profile view & edit pages
│ │ ├── layout.tsx # App root layout & theme initialization
│ │ └── page.tsx # Main home feed & stories feed
│ ├── components/ # Reusable UI components (Sidebar, Modals, PostCard, etc.)
│ ├── graphql/
│ │ ├── schema.ts # GraphQL type definitions
│ │ └── resolvers.ts # Query & Mutation business logic
│ ├── lib/
│ │ ├── auth.ts # NextAuth configuration & credentials provider
│ │ └── prisma.ts # Prisma client singleton with LibSQL adapter
│ └── types/ # TypeScript interface definitions
├── docker-compose.yml # Optional Docker container config
├── next.config.ts # Next.js build & transpilation config
└── package.json # Project dependencies & run scripts
The app exposes a unified GraphQL endpoint at /api/graphql. Key operations include:
feed: Fetch the authenticated user's home timeline.explore: Fetch global trending and recent posts.getStories: Fetch active (non-expired) 24h stories.getMessages(userId): Fetch chat history with a specific developer.getNotifications: Fetch all interaction alerts.searchUsers(query)/searchPosts(query): Search platform content.
createPost(content, mediaUrl): Publish a new post.createStory(mediaUrl, sharedPostId): Post a new story.likePost(postId)/unlikePost(postId): Toggle post likes.savePost(postId)/unsavePost(postId): Bookmark posts.createComment(postId, content): Comment on a post.sendMessage(receiverId, content): Send a direct message.followUser(userId)/unfollowUser(userId): Follow or unfollow a user.updateProfile(...): Update bio, username, and avatars.
Copyright © 2026. All rights reserved. Unauthorized copying, distribution, or hosting of this project is strictly prohibited.