🔗 DevLink

Your Personal Developer Productivity Hub

Manage links, save notes, track GitHub stats — all in one beautiful dashboard.

Report Bug · Request Feature

---

Overview

DevLink is a modern, full-stack developer productivity web application designed to streamline your daily workflow. Whether you're juggling multiple projects, managing developer resources, or tracking your GitHub contributions — DevLink brings everything together in one elegant, mobile-responsive dashboard.

Who Is This For?

• Developers who want a centralized hub for their resources
• Students learning to code and organizing their learning materials
• Teams looking for a clean way to share and manage links
• Anyone who wants to boost their productivity with a beautiful dashboard

Problems It Solves

Challenge	DevLink Solution
Scattered bookmarks across browsers	Centralized link management with categories
Lost notes and snippets	Organized notes with search functionality
No visibility into GitHub activity	Integrated GitHub stats on your dashboard
Clunky, outdated productivity tools	Modern, responsive UI with smooth animations

---

Features

Feature	Description
Link Manager	Save, organize, and access your important links instantly
Notes System	Create, edit, and search through your notes effortlessly
Personal Dashboard	At-a-glance view of your links, notes, and activity
GitHub Integration	Connect your GitHub profile and display your stats
Mobile Responsive	Beautiful app-like experience on any device
JWT Authentication	Secure signup/signin with token-based auth
Modern UI/UX	Clean design with shadcn/ui components
Sleek Design System	Professional slate-based color palette
Fast Performance	Built with Vite for lightning-fast load times
Search Functionality	Quickly find notes with powerful search

---

Tech Stack

Frontend

Technology	Purpose
	UI Library
	Type Safety
	Build Tool
	Styling
	UI Components

Backend

Technology	Purpose
	Runtime
	Web Framework
	Database
	Authentication
	ODM

---

Folder Structure

DevLink/
├── frontend/
│   ├── src/
│   │   ├── assets/             # Static assets
│   │   ├── components/         # Reusable components
│   │   │   ├── common/         # Shared components (Card, etc.)
│   │   │   ├── layout/         # Layout components
│   │   │   ├── layouts/        # Page layouts
│   │   │   ├── mobile/         # Mobile-specific components
│   │   │   └── ui/             # shadcn/ui components
│   │   ├── config/             # App configuration
│   │   ├── hooks/              # Custom React hooks
│   │   ├── lib/                # Utility functions
│   │   ├── pages/              # Page components
│   │   │   ├── Dashboard.tsx
│   │   │   ├── Links.tsx
│   │   │   ├── Notes.tsx
│   │   │   ├── Profile.tsx
│   │   │   ├── Signin.tsx
│   │   │   └── Signup.tsx
│   │   ├── services/           # API service layer
│   │   ├── types/              # TypeScript types
│   │   ├── App.tsx             # Root component
│   │   ├── main.tsx            # Entry point
│   │   └── index.css           # Global styles
│   ├── .env                    # Environment variables
│   ├── package.json
│   └── vite.config.ts
│
├── backend/
│   ├── config/                     # Database & app config
│   ├── controller/                 # Route controllers
│   │   ├── auth.controller.js
│   │   ├── github.controller.js
│   │   ├── link.controller.js
│   │   ├── note.controller.js
│   │   └── profile.controller.js
│   ├── middleware/                 # Express middlewares
│   │   ├── authMiddleware.js
│   │   └── validate.middleware.js
│   ├── models/                     # Mongoose models
│   ├── routes/                     # API routes
│   │   ├── auth.route.js
│   │   ├── github.route.js
│   │   ├── link.route.js
│   │   ├── notes.route.js
│   │   └── profile.route.js
│   ├── services/                   # Business logic
│   ├── validator/                  # Request validation
│   ├── server.js                   # App entry point
│   ├── .env.example
│   └── package.json
│
├── LICENSE
└── README.md

---

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v18.x or higher) — Download
• npm (v9.x or higher) or yarn
• MongoDB (Atlas or local) — Get Started
• Git — Download

Installation

1. Clone the repository

   git clone https://github.com/RishiBuilds/DevLink.git
   cd DevLink

2. Install backend dependencies

   cd backend
   npm install

3. Install frontend dependencies

   cd ../frontend
   npm install

4. Configure environment variables

   # Backend
   cd ../backend
   cp .env.example .env
   # Edit .env with your values
   
   # Frontend
   cd ../frontend
   cp .env.example .env
   # Edit .env with your values

5. Start the development servers

   # Terminal 1 - Backend (from /backend)
   npm run dev
   
   # Terminal 2 - Frontend (from /frontend)
   npm run dev

6. Open your browser

   Navigate to http://localhost:5173

Build for Production

# Frontend
cd frontend
npm run build

# Backend
cd backend
npm start

---

Environment Variables

Backend (/backend/.env)

# Server Configuration
PORT=3000
NODE_ENV=development
FRONTEND_URL=http://localhost:5173

# MongoDB Connection
MONGODB_URL=mongodb+srv://<username>:<password>@cluster0.mongodb.net/devlink?retryWrites=true&w=majority

# JWT Configuration
JWT_SECRET=your-super-secret-jwt-key-minimum-32-characters
JWT_EXPIRES_IN=7d

# GitHub API (optional - for higher rate limits)
GITHUB_TOKEN=your-github-personal-access-token

Frontend (/frontend/.env)

VITE_API_URL=http://localhost:3000/api

---

API Routes

Authentication

Method	Endpoint	Description	Auth Required
POST	/api/auth/signup	Register new user	no
POST	/api/auth/signin	Login user	no

Links

Method	Endpoint	Description	Auth Required
POST	/api/link/add-link	Create a new link	yes
GET	/api/link/get-links	Get all user links	yes
GET	/api/link/get-link/:id	Get single link	yes
PUT	/api/link/update-link	Update a link	yes
DELETE	/api/link/delete-link/:id	Delete a link	yes

Notes

Method	Endpoint	Description	Auth Required
POST	/api/notes/create-note	Create a new note	yes
GET	/api/notes/read-note	Get all user notes	yes
PUT	/api/notes/update-note/:noteId	Update a note	yes
POST	/api/notes/search-note	Search notes	yes
DELETE	/api/notes/delete-note	Delete a note	yes

GitHub

Method	Endpoint	Description	Auth Required
POST	/api/github/connect	Connect GitHub account	yes
GET	/api/github/me	Get connected GitHub	yes
DELETE	/api/github/disconnect	Disconnect GitHub	yes
GET	/api/github/:username/repos	Fetch user repos	no
GET	/api/github/:username/profile	Fetch user profile	no
GET	/api/github/:username/total-commits	Fetch commit count	no

Profile

Method	Endpoint	Description	Auth Required
GET	/api/profile/get-profile	Get own profile	yes
PUT	/api/profile/update-profile	Update profile	yes
GET	/api/profile/get-other-profile/:id	Get other user's profile	no

---

Usage Guide

Adding Links

1. Navigate to the Links page from the sidebar
2. Click the "+ Add Link" button
3. Enter the URL, title, and optional description
4. Click Save — your link is now stored!

Creating Notes

1. Go to the Notes section
2. Click "+ New Note"
3. Write your content with the editor
4. Notes auto-save or click Save when done

Connecting GitHub

1. Visit your Profile page
2. Enter your GitHub username in the GitHub section
3. Click Connect to fetch your stats
4. Your repos, commits, and profile info will display on your dashboard

Mobile Usage

DevLink is fully responsive with a native app-like experience:

• Bottom navigation for easy thumb access
• Swipe gestures for quick actions
• Pull-to-refresh on lists
• Floating action buttons for quick adds

---

Responsive Layout

Breakpoint	Behavior
Mobile (<768px)	Bottom nav, stacked cards, FAB
Tablet (768-1024px)	Sidebar toggle, 2-column grid
Desktop (>1024px)	Fixed sidebar, multi-column layouts

Animations

• Smooth page transitions
• Micro-interactions on buttons and cards
• Loading skeletons for async content
• Toast notifications for feedback

---

Performance & Security

Security Measures

Feature	Implementation
Authentication	JWT with secure httpOnly considerations
Validation	Zod schemas for all inputs (frontend + backend)
Password Hashing	bcrypt with salt rounds
CORS	Configured for frontend origin only

Performance Optimizations

Optimization	Benefit
Vite Build	Sub-second HMR, optimized production bundles
Lazy Loading	Route-based code splitting
Tree Shaking	Minimal bundle size
MongoDB Indexing	Fast queries on frequent lookups

---

Deployment

Frontend (Vercel)

1. Push your code to GitHub
2. Go to Vercel and import your repo
3. Set the Root Directory to frontend
4. Add environment variables:

   VITE_API_URL=https://your-backend-url.com/api
   

5. Deploy!

Backend (Render / Railway)

Render

1. Create a new Web Service on Render
2. Connect your GitHub repo
3. Set Root Directory to backend
4. Add environment variables from .env.example
5. Set Build Command: npm install
6. Set Start Command: npm start

Railway

1. Create a new project on Railway
2. Add your GitHub repo
3. Configure the backend directory
4. Add environment variables
5. Deploy automatically on push

Database (MongoDB Atlas)

1. Create a free cluster at MongoDB Atlas
2. Whitelist your deployment IPs (or allow all: 0.0.0.0/0)
3. Create a database user
4. Copy the connection string to your backend .env

---

Contributing

Contributions make the open-source community amazing! Any contributions are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch

   git checkout -b feature/AmazingFeature

3. Commit your Changes

   git commit -m 'Add some AmazingFeature'

4. Push to the Branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

---

License

This project is licensed under the MIT License — see the LICENSE file for details.

MIT License © 2026 Rishi Chaurasia

---

Author

Rishi Chaurasia

Built with ❤️ by Rishi and lots of ☕

---

Star this repo if you find it useful!