# ✅ Phase 0: Planning (Day 1–2)

> **Stack**: Next.js + TypeScript + Shadcn/UI + Tailwind + Wagmi + Prisma + PostgreSQL + MetaMask + IPFS

| Task | Description | Tools |
| ----------------- | ------------------------------------------------ | --------------- |
| Define Scope | Clarify MVP features and future goals | Notion, ChatGPT |
| Create Wireframes | Sketch user dashboard, course pages, admin panel | Figma |
| Set Up Repos | GitHub mono-repo or split for front/backend | GitHub |

> **Goal**: Define what we’re building, who it’s for, and sketch out its structure before jumping into code.
## 🧠 0.1 – Define Scope & MVP

Let’s define the **mission**, the **core MVP features**, the **audience**, and a few **"v2 or later" ideas**.

### ❶ Mission Statement

> Example: _"Empower developers and enthusiasts to learn Ethereum through structured, interactive, and reward-driven modules."_
### ❷ MVP Features

- MetaMask login
- Courses with modules and lessons (video/markdown)
- Progress tracking
- Milestone rewards (NFT)
- Admin panel for uploading course content and rewards
- User dashboard with enrolled courses & achievements
#### 🕒 Post-MVP (Phase 6+):

- NFT-based membership / gated courses
- ETH/Token payments
- Gamification (XP, streaks, badges)
- DAO voting for course proposals
- Leaderboards and social integrations
# ✏️ 0.2 – Wireframes & UX Flow (Rough Sketch Plan)

### ❶ Core Screens (MVP)

- 🏠 Home page (explains what this is)
- 📚 Courses list
- 📖 Course page (modules & progress bar)
- 📦 Lesson viewer (markdown/video with next/prev)
- 🎯 Milestone NFT claim UI
- 🪪 Profile/Dashboard page
- 🔐 MetaMask login screen
- ⚙️ Admin panel


### ❷ User Flows

#### 🎓 Learner:

`→ Login with MetaMask → Enroll in Course → View Modules → Complete Lessons → Hit Milestone → Claim NFT/Token → View Progress`

#### 👨‍🏫 Admin:

`→ Login with MetaMask (admin wallet) → Create Course → Add Modules/Lessons → Attach Rewards → Monitor Users`
## ⚙️ 0.3 – Tech Stack (Confirmed ✅)

| Layer | Tool | Status |
| --------------- | ------------------------------------ | ------ |
| Frontend | Next.js (App Router) | ✅ |
| Styling/UI | Tailwind + shadcn/ui | ✅ |
| Wallet Auth | Wagmi + viem + SIWE | ✅ |
| Database | Prisma + PostgreSQL | ✅ |
| Hosting | Vercel + Railway (or PlanetScale) | ✅ |
| Storage | nft.storage or web3.storage for NFTs | ✅ |
| Smart Contracts | Solidity (NFT / Token) | ✅ |

### 🟢 **1. Wagmi + viem**

**💰 Cost:** ✅ **FREE** (Open-source libraries)
**🛠️ What they do:**
- Handle wallet connection (e.g., MetaMask)
- Read/write to smart contracts
- Built specifically for React + Ethereum dApps

**🧠 How you'll use them:**
- Integrate MetaMask login button
- Read user wallet, NFTs, or tokens
- Call smart contract functions (e.g., mint NFTs, claim rewards)

### 🟢 **2. SIWE (Sign-In With Ethereum)**

**💰 Cost:** ✅ **FREE** (Specification + open libraries)
**🛠️ What it does:**
- Replaces email/password login with wallet signature
- Secures login via Ethereum private key (EIP-4361)

**🧠 How you'll use it:**
- User connects wallet
- User signs a message
- Your backend verifies the signature
- You create/manage a session in the DB (via Prisma)

**🔐 No passwords, no emails. Just cryptographic identity.**

### 🟢 **3. nft.storage / web3.storage**

**💰 Cost:** ✅ **FREE** for reasonable usage
- [nft.storage](https://nft.storage/): 31 GB free with no expiration
- [web3.storage](https://web3.storage/): 5 GB free

**🛠️ What they do:**
- Host NFT metadata + images on **IPFS**
- Give you a link (`ipfs://...`) to store on-chain

**🧠 How you'll use it:**
- Upload metadata and image when a user reaches a milestone
- Store the returned link in the smart contract or database
- Use it as the `tokenURI` in your NFT contract

**🌐 They act as the decentralized “file system” for your NFTs**

### 🟢 **4. Solidity (Smart Contracts)**

**💰 Cost:** ✅ **FREE to write & deploy (on testnets)**
💸 **Paid when deploying/minting on mainnet (gas fees)**

**🛠️ What you’ll do:**
- Write contracts for:
- ERC721 NFTs for milestones
- Optional: ERC20 tokens for XP or engagement
- Deploy to testnets (e.g., Sepolia, Mumbai) during dev
- Later move to a mainnet like Polygon or Base for low gas

**🧠 How you'll use it:**
- Admin uploads NFT metadata → smart contract mints it
- User triggers a `claimReward()` function
- Contract checks if eligible → mints NFT or tokens

---

## 🏗️ Phase 1: Project Setup (Day 2–4)

|Task|Description|Tools|
|---|---|---|
|Init Next.js Project|Setup with Tailwind & Shadcn/ui|`npx create-next-app`|
|Configure Shadcn|Install shadcn/ui, theme config|`npx shadcn-ui@latest init`|
|Setup Prisma & DB|Init Prisma, PostgreSQL schema|Prisma, pg|
|Setup Auth|MetaMask login via Wagmi + SIWE|wagmi, viem, next-auth (custom)|
|Add Chakra-like theming|Optional: if you want easy dark/light toggle|Tailwind, Shadcn theming|

---

## 🎓 Phase 2: Core User Features (Day 4–10)

|Task|Description|Tools|
|---|---|---|
|User Auth Flow|MetaMask login, new wallet onboarding flow|Wagmi, viem|
|Course Pages|Layout for: course > module > lesson|Shadcn UI, Tailwind|
|Markdown/Video Support|Render content from markdown + embedded video|react-markdown, Next.js|
|Progress Tracker|Track user’s last lesson/module|Prisma, user_course table|
|Milestones|After X modules, trigger event|Backend logic, milestone model|
|NFT Minter|Reward milestone with NFT|Smart contract + wagmi hook|

---

## 🛠️ Phase 3: Admin Panel (Day 10–14)

|Task|Description|Tools|
|---|---|---|
|Admin Auth|Simple whitelist of admin wallet addresses|Prisma, middleware|
|Upload Courses/Modules|Dynamic form to create content|Shadcn/forms|
|Upload NFTs|Upload NFT metadata to IPFS|nft.storage, web3.storage|
|Set Milestone Rewards|Assign milestone NFT/token per course|Prisma|
|View Learner Stats|Dashboard with tables/graphs|Prisma + shadcn table|

---

## 🧪 Phase 4: Smart Contracts (Day 14–16)

|Task|Description|Tools|
|---|---|---|
|Write NFT Contract|Milestone NFT with metadata|Solidity|
|Token Contract (Optional)|ERC-20 to reward learners|Solidity|
|Deploy to Testnet|Use Sepolia or Base Goerli|Hardhat, Etherscan|
|Integrate w/ Frontend|Connect contracts via wagmi|Wagmi, viem|

---

## 📊 Phase 5: User Dashboard & Profile (Day 17–20)

|Task|Description|Tools|
|---|---|---|
|Profile Page|Display wallet address, XP, NFTs|Tailwind, Shadcn Card|
|My Courses Page|Show enrolled course list + progress|Prisma|
|Achievements|NFT gallery, token balance view|wagmi, hooks|
|Recommendations|Recommend courses based on XP|Simple logic first|

---

## 🚀 Phase 6: Deploy & Test (Day 21–23)

|Task|Description|Tools|
|---|---|---|
|Deployment|Use Vercel + Railway (or PlanetScale)|Vercel, Railway|
|Wallet Testing|MetaMask, Brave, WalletConnect|Manual QA|
|Bug Fixing|Final QA round, fix UX flows|Vercel Preview|
|Beta Test|Let a few friends try it|Discord, Telegram feedback|

---

## 🔮 Phase 7: Post-MVP Ideas

|Feature|Description|
|---|---|
|Membership Pass|NFT-based access to premium content|
|ETH / Token Payments|Charge per course using wallet|
|Gamified XP / Streaks|Daily login streaks, badges|
|DAO-based Curriculum|Let community suggest or vote new courses|
|Discord Role Sync|Hold NFT → get role access|
|Leaderboard|XP/Token-based leaderboard|

---

# 📁 Suggested Folder Structure (Next.js)

/app
  /dashboard
  /courses
  /admin
/components
  /ui (Shadcn components)
  /course
  /auth
  /nft
/lib
  /auth
  /prisma
  /contracts
/contracts
  milestoneNFT.sol
/prisma
  schema.prisma

---