Curated resources, interactive tools, and step-by-step roadmaps for learners, students, and developers.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β π― Learn β π οΈ Build β π Deploy β π€ Contribute β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
- π Features
- π οΈ Tech Stack
- System Architecture
- π Getting Started
- π€ Contributing
- π― Hacktoberfest 2025
- π₯ Contributors
- π¨βπ» Project Maintainer
- π License
- β Show Your Support
|
Carefully curated content for Web Development, DSA, AI/ML, and cutting-edge technologies |
Boost productivity with hands-on coding practice tools and utilities |
|
Crystal-clear paths for developers at every stage of their journey |
Built by developers, for developers with Hacktoberfest 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
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
π¦ Quick Setup Guide
# Clone the repository
git clone https://github.com/Darshan3690/The-Dev-Pocket.git
# Navigate to project directory
cd The-Dev-Pocketnpm install
# or
yarn install
# or
pnpm install
β οΈ Important: Prisma CLI does not load.env.local.
Please use a.envfile for database configuration.
- π Visit Supabase
- β Create a new project
- βοΈ 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)
- π Create a
.envfile in the project root (same level aspackage.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"# Generate Prisma Client
npx prisma generate
# Push schema to database
npx prisma db push
# (Optional) Open Prisma Studio for DB management
npx prisma studio- π Go to Clerk Dashboard
- β Create a new application.
- π Copy your API keys.
- π Add to
.env.local:
CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_keynpm run devπ Success! Visit http://localhost:3000
|
Show some love to the project |
Create your own copy. |
Make your mark |
# 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
|
Submit 6 quality PRs to win official Hacktoberfest swag |
Check labels: |
Darshan Rajput Creator & Lead Maintainer π |
This project is licensed under the MIT License
See the LICENSE file for details
βββββββββββββββββββββββββββββββββββββββββββ
β Free to use β’ Modify β’ Distribute β
βββββββββββββββββββββββββββββββββββββββββββ
|
Star the repository |
Fork and customize |
Spread the word |
Made with β€οΈ by Darshan3690 & Contributors
β Star us on GitHub β it motivates us a lot!