Initial commit

Author: megoxv

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": [
+        "next/core-web-vitals",
+        "plugin:prettier/recommended"
+    ]
+}

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+npx lint-staged
+npx lint-staged

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "https://json.schemastore.org/prettierrc",
+    "singleQuote": true,
+    "trailingComma": "all",
+    "semi": true,
+    "bracketSpacing": true,
+    "tabWidth": 4,
+    "printWidth": 100,
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    }
+}

README.md

@@ -0,0 +1,66 @@
+# PBL Platform - Learn Programming by Building Real Projects
+
+[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/megoxv/pbl-platform/pulls)
+
+Learn programming through hands-on project development with community-curated tutorials. 🚀
+
+## Features
+
+✨ **Learn by Building**  
+Gain practical experience by creating real-world applications from scratch
+
+📚 **Curated Tutorials**  
+High-quality guides across multiple languages from experienced developers
+
+🌍 **Community Driven**  
+Open source platform powered by developer contributions
+
+## Contributing Tutorials
+
+We welcome community contributions! Here's how to add new tutorials:
+
+### 1. Create Markdown File
+Create a new `.md` file in the appropriate language directory:
+```bash
+content/javascript/my-tutorial.md
+```
+
+### 2. Frontmatter Template
+```markdown
+---
+title: "Your Tutorial Title"
+description: "Brief description (150-200 chars)"
+technologies: Tech1, Tech2
+difficulty: "beginner"
+url: "https://youtube.com/..."
+image: "https://example.com/preview.jpg"
+---
+
+## Tutorial Content
+Your tutorial content here...
+```
+
+### 3. Required Fields
+| Field          | Description                                  |
+|----------------|----------------------------------------------|
+| `title`        | Tutorial name                                |
+| `description`  | Concise summary (150-200 characters)         |
+| `technologies` | Comma-separated technologies used            |
+| `difficulty`   | beginner/intermediate/advanced               |
+| `url`          | YouTube/article URL                          |
+| `image`        | Preview image URL (16:9 ratio recommended)   |
+
+### Submission Process
+1. Fork the repository
+2. Create feature branch: `git checkout -b feat/awesome-tutorial`
+3. Commit changes: `git commit -m 'Add awesome tutorial'`
+4. Push to branch: `git push origin feat/awesome-tutorial`
+5. Open a Pull Request
+
+## Need Help?
+💬 **Get support through:**
+- [Open an Issue](https://github.com/megoxv/pbl-platform/issues)
+
+## License
+Distributed under MIT License. See `LICENSE` for more information.

app/api/languages/route.ts

@@ -0,0 +1,23 @@
+import { readdirSync } from "fs";
+import { join } from "path";
+import { NextResponse } from "next/server";
+
+const CONTENT_DIR = join(process.cwd(), "content");
+
+export async function GET() {
+    try {
+        const directories = readdirSync(CONTENT_DIR, { withFileTypes: true })
+            .filter(dirent => dirent.isDirectory())
+            .map(dirent => ({
+                name: dirent.name,
+                icon: `/icons/${dirent.name.toLowerCase()}.svg`,
+                count: readdirSync(join(CONTENT_DIR, dirent.name))
+                    .filter(file => file.endsWith(".md"))
+                    .length
+            }));
+
+        return NextResponse.json(directories);
+    } catch {
+        return NextResponse.json({ error: "Failed to fetch languages" }, { status: 500 });
+    }
+}

app/api/tutorials/[language]/route.ts

@@ -0,0 +1,49 @@
+import { readdirSync, readFileSync } from "fs";
+import { join } from "path";
+import matter from "gray-matter";
+import { NextResponse } from "next/server";
+
+const CONTENT_DIR = join(process.cwd(), "content");
+
+export async function generateStaticParams() {
+    try {
+        return readdirSync(CONTENT_DIR, { withFileTypes: true })
+            .filter(dirent => dirent.isDirectory())
+            .map(dirent => ({
+                language: dirent.name.toLowerCase(),
+            }));
+    } catch (error) {
+        console.error("Error generating static params:", error);
+        return [];
+    }
+}
+
+type Params = Promise<{ language: string }>
+
+export async function GET(
+    request: Request,
+    props: { params: Params }
+) {
+    try {
+        const params = props.params;
+
+        const languageDir = join(CONTENT_DIR, (await params).language);
+        const files = readdirSync(languageDir).filter(file => file.endsWith(".md"));
+
+        const tutorials = files.map(filename => {
+            const fileContent = readFileSync(join(languageDir, filename), "utf-8");
+            const { data } = matter(fileContent);
+            return {
+                slug: filename.replace(".md", ""),
+                frontmatter: data,
+            };
+        });
+
+        return NextResponse.json(tutorials);
+    } catch {
+        return NextResponse.json(
+            { error: "Failed to fetch tutorials" },
+            { status: 500 }
+        );
+    }
+}

app/contribute/page.tsx

@@ -0,0 +1,76 @@
+export default function ContributePage() {
+    return (
+        <div className="container mx-auto px-4 py-8 max-w-4xl">
+            <h1 className="text-4xl font-bold mb-8">How to Contribute</h1>
+
+            <div className="prose dark:prose-invert max-w-none">
+                <h2>Adding New Tutorials</h2>
+                <p>
+                    We welcome contributions from the community! Here&apos;s how you can add new tutorials:
+                </p>
+
+                <h3>1. Create a Markdown File</h3>
+                <p>
+                    Create a new markdown file in the appropriate language directory under <code>content/</code>.
+                    For example: <code>content/javascript/my-tutorial.md</code>
+                </p>
+
+                <div className="bg-muted p-4 rounded-lg my-4">
+                    <pre className="text-sm">
+                        {`---
+title: "Tutorial Title"
+description: "A brief description of the tutorial"
+technologies: Tech1, Tech2
+difficulty: "beginner"
+url: "https://youtube.com/..."
+image: "https://example.com/preview.jpg"
+---
+                        
+## Tutorial Content
+                        
+Your tutorial content here...`}
+                    </pre>
+                </div>
+
+                <h3>2. Required Fields</h3>
+                <ul>
+                    <li><code>title</code>: The name of your tutorial</li>
+                    <li><code>description</code>: A brief description (150-200 characters)</li>
+                    <li><code>technologies</code>: Comma-separated list of technologies used</li>
+                    <li><code>difficulty</code>: One of: beginner, intermediate, advanced</li>
+                    <li><code>url</code>: YouTube video or article URL</li>
+                    <li><code>image</code>: Preview image URL (16:9 ratio recommended)</li>
+                </ul>
+
+                <h3>3. Content Guidelines</h3>
+                <ul>
+                    <li>Use clear, concise language</li>
+                    <li>Include code examples where relevant</li>
+                    <li>Break down complex concepts</li>
+                    <li>Add screenshots or diagrams when helpful</li>
+                    <li>Link to additional resources</li>
+                </ul>
+
+                <h3>4. Submit Your Contribution</h3>
+                <p>
+                    1. Fork the repository<br />
+                    2. Create a new branch<br />
+                    3. Add your tutorial<br />
+                    4. Submit a pull request
+                </p>
+
+                <div className="bg-muted p-4 rounded-lg my-4">
+                    <h4 className="text-sm font-semibold mb-2">Need Help?</h4>
+                    <p className="text-sm">
+                        If you need assistance or have questions, feel free to:
+                    </p>
+                    <ul className="text-sm mt-2">
+                        <li>Open an issue on GitHub</li>
+                        <li>Join our Discord community</li>
+                        <li>Check our detailed contribution guide</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}

app/favicon.ico

@@ -0,0 +1,74 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}