Build a Frontend for displaying the projects ideas.

frontend/.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

frontend/README.md

@@ -0,0 +1,80 @@
+# 🚀 MERN Project Ideas Explorer
+
+A simple and interactive frontend app that provides a curated list of project ideas to help you dive into building **real-world applications** using the **MERN stack (MongoDB, Express.js, React, Node.js)**.  
+Each project is broken down into **manageable sub-problems**, making your learning journey smoother and more enjoyable.
+
+## ✨ Features
+
+- 📚 Collection of project ideas focused on MERN stack learning.
+- 🔎 Filter and search functionality to quickly find projects.
+- 🧩 Projects broken down into smaller sub-tasks for better clarity.
+- 🎨 Modern UI with **Next.js**, **ShadCN**, and **Tailwind CSS**.
+
+## 📂 Project Data Structure
+
+All project ideas are stored in a single **TypeScript file**.  
+This makes it easy to add, edit, or extend the list without touching the UI.
+
+### Types
+
+`./MERN-Project-Ideas/frontend/src/data.ts`
+
+```ts
+type Tech =
+  | "REACT"
+  | "MONGODB"
+  | "NODE.JS"
+  | "EXPRESS"
+  | "SOCKET"
+  | "GRAPHQL"
+  | "GRPC"
+  | "POSTGRES";
+
+export type Tags = {
+  level: "Begineer" | "Intermediate" | "Advanced";
+  id: number;
+};
+
+export type ProjectItem = {
+  title: string;
+  longTitle: string;
+  description: string;
+  tag: Tags;
+  techs?: Tech[];
+};
+```
+
+### Example
+
+```ts
+{
+  title: "Chat App",
+  longTitle: "Real-time Chat Application with WebSocket",
+  description: "Build a chat app where users can join rooms, send messages, and see typing indicators.",
+  tag: { level: "Intermediate", id: 2 },
+  techs: ["REACT", "NODE.JS", "SOCKET"]
+}
+```
+
+## 📦 Getting Started
+
+### 1. Prerequisites
+
+Make sure you have installed:
+
+- [Node.js](https://nodejs.org/) (>= 18)
+- [pnpm](https://pnpm.io/) (>= 9) 
+
+  - install pnpm using `npm i -g pnpm`
+
+### 2. Installation
+
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/<your-username>/<your-repo>.git
+cd <your-repo>
+pnpm install
+
+pnpm dev
+```

frontend/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
+  }
+}

frontend/eslint.config.mjs

@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "next": "15.5.4",
+    "next-themes": "^0.4.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-markdown": "^10.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}