📚 The Dev Pocket

Curated resources, interactive tools, and step-by-step roadmaps for learners, students, and developers.

┌─────────────────────────────────────────────────────────┐
│  🎯 Learn → 🛠️ Build → 🚀 Deploy → 🤝 Contribute       │
└─────────────────────────────────────────────────────────┘

📑 Table of Contents

• 🌟 Features
• 🛠️ Tech Stack
• System Architecture
• 🚀 Getting Started
• 🤝 Contributing
• 🎯 Open Source Programs
• 👥 Contributors
• 👨‍💻 Project Maintainer
• 📄 License
• ⭐ Show Your Support

---

🌟 Features That Set Us Apart

📖 Rich Learning Resources Carefully curated content for Web Development, DSA, AI/ML, and cutting-edge technologies	🛠️ Interactive Tools Boost productivity with hands-on coding practice tools and utilities
🎯 Guided Roadmaps Crystal-clear paths for developers at every stage of their journey	🌍 Community-Powered Built by developers, for developers with open source spirit

graph LR
    A[🌱 Beginner] --> B[💪 Intermediate]
    B --> C[🚀 Advanced]
    C --> D[⭐ Expert]
    style A fill:#84cc16
    style B fill:#3b82f6
    style C fill:#8b5cf6
    style D fill:#f59e0b

Loading

---

🛠️ Tech Stack

Category	Technologies
Frontend
Backend
Database
Auth
Deployment

---

🏗️ System Architecture

To help contributors understand how The Dev Pocket handles data and authentication, here is a visual representation of our tech stack integration:

graph LR
    User((User)) -- Interacts --> NextJS[Next.js Frontend]
    
    subgraph "Application Logic"
        NextJS -- Auth Request --> Clerk[Clerk Auth]
        NextJS -- Query --> Prisma[Prisma Client]
    end

    subgraph "Data Layer"
        Prisma -- Session Pooling --> Supabase[(Supabase DB)]
        Prisma -- Direct Connect --> Migrations[DB Migrations]
    end

    Clerk -- Session Tokens --> NextJS
    Supabase -- Data Results --> Prisma
    Prisma -- Typed Response --> NextJS

    style NextJS fill:#000,color:#fff,stroke:#333
    style Clerk fill:#6C47FF,color:#fff
    style Supabase fill:#3ECF8E,color:#fff
    style Prisma fill:#2D3748,color:#fff

Loading

---

🚀 Getting Started (Developer Mode)

📦 Quick Setup Guide

1️⃣ Fork & Clone Repository

# Clone the repository
git clone https://github.com/Darshan3690/The-Dev-Pocket.git

# Navigate to project directory
cd The-Dev-Pocket

2️⃣ Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3️⃣ Set Up Supabase Database (Prisma)

⚠️ Important: Prisma CLI does not load .env.local.
Please use a .env file for database configuration.

1. 🌐 Visit Supabase
2. ➕ Create a new project
3. ⚙️ Go to Settings → Database → Connection string

You will need two connection URLs from Supabase:

• Session pooler URL (used by Prisma Client)
• Direct connection URL (used by Prisma migrations)

4. 📝 Create a .env file in the project root (same level as package.json) and add:

DATABASE_URL="postgresql://postgres:<PASSWORD>@db.xxxxx.supabase.co:6543/postgres?pgbouncer=true"
DIRECT_URL="postgresql://postgres:<PASSWORD>@db.xxxxx.supabase.co:5432/postgres"
RATE_LIMIT_MODE="INMEM"

If you want to use the Redis-backed rate limiter instead of the local in-memory fallback, also add:

RATE_LIMIT_MODE="UPSTASH"
UPSTASH_REDIS_REST_URL="https://<your-upstash-endpoint>"
UPSTASH_REDIS_REST_TOKEN="<your-upstash-token>"

4️⃣ Run Database Migrations

# Generate Prisma Client
npx prisma generate

# Push schema to database
npx prisma db push

# Seed the starter quiz/category data
npx prisma db seed

# (Optional) Open Prisma Studio for DB management
npx prisma studio

5️⃣ Configure Authentication with Clerk

1. 🔐 Go to Clerk Dashboard
2. ➕ Create a new application.
3. 🔑 Copy your API keys.
4. 📝 Add to .env.local:

CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

6️⃣ Launch Development Server

npm run dev

🎉 Success! Visit http://localhost:3000

---

🤝 Contributing

💖 We Love Contributions from Everyone!

🚩 Before You Start

⭐ Star Show some love to the project

🍴 Fork Create your own copy.

🚀 Contribute Make your mark

📋 Contribution Steps

# 1. Star this repository ⭐

# 2. Fork the repo 🍴

# 3. Create a feature branch
git checkout -b feature-amazing-feature

# 4. Commit your changes
git commit -m "feat: add amazing feature"

# 5. Push to your fork
git push origin feature-amazing-feature

# 6. Open a Pull Request 🚀

📌 Please read our CONTRIBUTING.md and CODE_OF_CONDUCT.md before contributing

---

🎯 Open Source Programs

🌍 This project is part of the following open source programs!

🟠 GSSoC 2026 GirlScript Summer of Code Contribute to real-world projects and grow your open source skills this summer!

🟣 Hacktoberfest 2025 Global Open Source Celebration Submit 6 quality PRs to win official Hacktoberfest swag!

🟡 ECWoC 2026 Exciting Campus Winter of Code Dive into open source during the winter and build your contributor profile!

🏷️ Find Issues

Check labels: gssoc, hacktoberfest, ecwoc, good first issue, help wanted

🔍 Browse Open Issues →

---

👥 Our Amazing Contributors

⭐ Stargazers

🍴 Forkers

---

👨‍💻 Project Maintainer

Darshan Rajput Creator & Lead Maintainer 🚀

---

📄 License

This project is licensed under the MIT License

See the LICENSE file for details

┌─────────────────────────────────────────┐
│  Free to use • Modify • Distribute      │
└─────────────────────────────────────────┘

---

⭐ Show Your Support

If you find this project helpful:

⭐ Star Star the repository

🍴 Fork Fork and customize

📢 Share Spread the word

---

Made with ❤️ by Darshan3690 & Contributors

_{⭐ Star us on GitHub — it motivates us a lot!}