🚀 Simplifying Open Source Contribution for Absolute Beginners
A secure full-stack web app that makes your first open source contribution accessible and rewarding
DevLinkr is a full-stack web platform designed to bridge the gap between eager new contributors and open source projects that need help. We've built a secure, feature-rich application that transforms the intimidating world of open source into an engaging, achievement-filled journey.
- GitHub OAuth integration for seamless login
- JWT-based authentication with secure session management
- Streamlined user experience with familiar GitHub credentials
- Comprehensive stat tracking for user contributions
- Achievement system to gamify the contribution experience
- Supabase Realtime integration for live issue updates
- GitHub webhook processing with ~2.8s average end-to-end time
- Semantic search powered by vector embeddings
- @xenova/transformers for embedding generation
- pgvector integration for efficient similarity matching
- Tag-based filtering for precise issue discovery
- AWS API Gateway + AWS Lambda for webhook processing
- Render hosting with UptimeRobot cron jobs for reliability
- Vercel deployment for optimal frontend performance
🏠 Landing Page
Clean, welcoming interface that immediately communicates the platform's value
📊 Dashboard
Comprehensive overview of user stats, achievements, and contribution tracking
🔍 Issue Discovery
List of all the issues of that repo
🌱 The Yard
Lists all the projects that need contributions integrated with search and filtering capabilities for finding the perfect issues/repos
🆘 Help Request System
Streamlined process for submitting projects
| Metric | Value | Description |
|---|---|---|
| Webhook Processing | ~2.8s | End-to-end GitHub event to database update |
flowchart TD
%% Frontend Group
A[Next.js App]:::frontend
B[React Components]:::frontend
C[TailwindCSS]:::frontend
D[NextAuth]:::frontend
%% Backend Group
E[Express.js Server]:::backend
F[GitHub API]:::backend
G[xenova/transformers]:::backend
%% Database Group
H[Supabase PostgreSQL]:::database
I[pgvector]:::database
J[Realtime]:::database
%% Cloud Group
K[AWS API Gateway]:::cloud
L[AWS Lambda]:::cloud
M[GitHub Webhooks]:::cloud
N[UptimeRobot]:::cloud
O[Render]:::cloud
%% Main Flow
A ==> E
E ==> H
M ==> K
K ==> L
L ==> H
N ==> O
%% Internal connections
A --> B
A --> D
B --> C
E --> F
E --> G
H --> I
H --> J
L --> G
%% Styling
classDef frontend fill:#dbeafe,stroke:#1e40af,stroke-width:2px,color:#1e40af
classDef backend fill:#ede9fe,stroke:#6d28d9,stroke-width:2px,color:#6d28d9
classDef database fill:#d1fae5,stroke:#047857,stroke-width:2px,color:#047857
classDef cloud fill:#fef3c7,stroke:#d97706,stroke-width:2px,color:#d97706
- Next.js 15.3.3 - React framework with SSR capabilities
- React 19.0.0 - Modern UI library with latest features
- TailwindCSS 4 - Utility-first CSS framework
- Lucide React - Consistent icon system
- NextAuth 5.0.0-beta.28 - Comprehensive authentication solution
- GitHub OAuth - Seamless integration with developer workflows
- JWT (jsonwebtoken 9.0.2) - Secure token-based authentication
- Node.js - JavaScript runtime environment
- Express.js 5.1.0 - Web application framework
- TypeScript 5.8.3 - Type-safe development experience
- Supabase - PostgreSQL with real-time capabilities
- pgvector - Vector similarity search
- Supabase Realtime - Live data synchronization
- @xenova/transformers 2.17.2 - Client-side machine learning
- Vector embeddings - Semantic search capabilities
- Vercel - Frontend hosting and deployment
- Render - Backend API hosting
- AWS API Gateway - Webhook endpoint management
- AWS Lambda - Serverless function execution
- UptimeRobot - Service monitoring and uptime management
- TypeScript - Static type checking
- Concurrently - Parallel script execution
- ts-node - TypeScript execution environment
node >= 18.0.0
npm >= 8.0.0# Clone the repository
git clone https://github.com/yourusername/devlinkr.git
cd devlinkr
# Install dependencies
npm install# Be sure to make your server and change the frontend to point to that server
# Start frontend only
npm run dev
# Start backend only
npm run server
# Start both frontend and backend concurrently
npm run dev:fullstack
# Build for production
npm run build
# Start production server
npm run start
# Run linting
npm run lintCreate a .env.local file with your configuration:
# GitHub OAuth
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret
# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
# AWS (for webhooks)
AWS_ACCESS_KEY_ID=your_aws_access_key
AWS_SECRET_ACCESS_KEY=your_aws_secret_key
# Add the other environment variables as required - @supabase/supabase-js - Supabase client library
- @xenova/transformers - Machine learning transformations
- next-auth - Authentication for Next.js
- react-markdown - Markdown rendering
- cors - Cross-origin resource sharing
- dotenv - Environment variable management
- @types/* - TypeScript type definitions
- concurrently - Run multiple commands simultaneously
- ts-node - TypeScript execution
- @tailwindcss/typography - Typography plugin for Tailwind
devlinkr/
├── src/ # Frontend source code
├── server/ # Backend API server - This is just a mock server
├── screenshots/ # Application screenshots
├── package.json # Project dependencies and scripts
├── next.config.js # Next.js configuration
├── tailwind.config.js # TailwindCSS configuration
└── tsconfig.json # TypeScript configuration
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ for the open source community
DevLinkr - Making open source contribution accessible to everyone