TeachLink is a decentralized platform built for technocrats to share, analyze, and monetize knowledge through collaborative content, blockchain-based tipping, and gamified reputation. This repository contains the frontend codebase built with Next.js (App Router), Tailwind CSS, and integrated with Starknet for seamless Web3 interactions.
TeachLink empowers users to:
- 📢 Share knowledge, tutorials, or insights
- 🧠 Engage in discussions and collaborative learning
- 💸 Earn through on-chain tipping
- 🔗 Build reputation with verifiable Web3 credentials
This frontend serves as the main user interface for interacting with TeachLink's decentralized knowledge ecosystem. It supports wallet-based login, markdown post creation, tipping, theming, user profiles, and topic feeds—all while maintaining a seamless Web2.5 user experience.
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router) |
| Styling | Tailwind CSS |
| Web3 | Starknet.js, StarknetKit |
| State Mgmt | React Context / Hooks |
| Markdown | React Markdown + Remark |
| Theming | next-themes |
| Indexing | Apibara (backend) |
| Wallets | Argent X, Braavos |
- 🔐 Starknet Wallet Integration – Login and interact using Starknet-compatible wallets
- 🧾 Markdown-Based Post Editor – Rich, previewable post creation using markdown
- 💡 Tipping System – Send and receive on-chain tips via smart contracts
- 🌙 Dark/Light Theme Toggle – Accessible theming using Tailwind CSS
- 🔎 Dynamic Routing with App Router – Clean, scalable navigation
- 📂 Profile and Topic Pages – View user-specific content and explore topic-specific posts
- 📱 Responsive Layout – Fully mobile-ready with modular components
/app /create → Post creation page /post/[id] → View individual post /profile/[user] → User profile /topics/[slug] → Topic feed /components Navbar.tsx → Top navigation bar Sidebar.tsx → Side navigation Editor.tsx → Markdown post editor WalletProvider.tsx → Wallet connection logic /styles globals.css → Tailwind directives
- Clone the repo
git clone https://github.com/teachlink/frontend.git
cd frontend
pnpm install- Set up environment variables
Create a .env.local with:
NEXT_PUBLIC_STARKNET_NETWORK=testnet
NEXT_PUBLIC_INDEXER_API_URL=https://indexer.teachlink.xyz- Run the development server
pnpm run devThe project now uses pnpm workspaces as the monorepo/dependency strategy.
- Evaluated: Nx, Turborepo, pnpm workspaces
- Chosen: pnpm workspaces (lowest migration risk, strict dependency graph, fast installs)
- Single source of truth:
pnpm-lock.yaml+ rootpnpm.overrides - Shared tooling config:
packages/tooling(base ESLint + TypeScript config)
🏗️ Development Milestones ✅ Tailwind CSS Integration
✅ App Router setup with nested layouts
✅ Wallet connection via StarknetKit
✅ Theme toggle and persistence
✅ Markdown editor with live preview
🚧 Topic and profile page rendering
🚧 DAO & governance integration post-launch
For detailed tasks, see GitHub Issues
We welcome community contributions!
- Read
CONTRIBUTING.mdbefore opening a PR. - All PRs must include an issue reference in the description (e.g.
Closes #68). - Merges to protected branches require passing CI + approvals.
Guidelines:
- Fork the repo and make your changes in a feature branch
- Before submitting a PR, read the
CONTRIBUTING.mdfile
- Telegram Join our Telegram group for discussions and support
Make sure your PR references the correct issue: Example: Close #3
✅ Acceptance Criteria for PRs Feature must align with roadmap/issue description
Must include working UI with no console errors
Must use lucide icons for consistent usage throughout the app
Must use Starknet best practices for wallet/contract interactions
Use Tailwind CSS with responsive design
PR title should be clear and reference issue number
✅ Outcome: A scalable, token-driven learning platform where creators monetize knowledge, learners access premium content, and all users interact securely — powered by Web2 + Web3.
let make our code clean, maintainable and scallable. Keep to Standard
📜 License MIT © 2025 TeachLink DAO