TeachHub

PearlThought-Task.mp4

This project is a modern, responsive teacher management interface built with Next.js, TypeScript, and Tailwind CSS.

How This Project Is Built

• Framework & Stack

  • Built with Next.js (React framework) for SSR and fast routing.
  • Uses TypeScript for type safety and better code maintainability.
  • Styled with Tailwind CSS for rapid, utility-first, and responsive design.
  • Organized with a clear folder structure: components/, pages/, public/, styles/, and types/.

• Branding & Theming

  • Custom logo (public/logo.png) used in Navbar, Footer, and as favicon.
  • App name and branding updated everywhere to "TeachHub".
  • Modern, clean UI with glassmorphism and smooth transitions.

• Core Features

  • Dashboard: Overview and navigation to main features.
  • Teacher Management: List, view, and (soon) edit teacher profiles with avatars.
  • Salary Sheets: View salary details for each teacher in a responsive table.
  • Sidebar & Navbar: Persistent navigation with smooth, stylish hover effects and mobile support.
  • Scroll-to-Top Button: Animated, glassy button for UX.

• UI/UX Enhancements

  • Responsive design for desktop and mobile.
  • Smooth, slow hover and transition effects.
  • Font customization and modern iconography.
  • Accessible with ARIA labels and keyboard navigation.

• Project Metadata

  • README.md and package.json updated for TeachHub branding.
  • All static assets (logo, favicon) in the public/ directory.

• Extensibility

  • Modular components for easy feature addition (e.g., editable teacher modal, attendance, notifications).
  • Ready for backend/API integration for real data and authentication.

---

Features

• Modern UI/UX for teacher management and payment
• Responsive, mobile-first design
• Accessible (WCAG compliant)
• TypeScript for type safety
• Component-based architecture

Tech Stack

• Next.js
• TypeScript
• Tailwind CSS

Getting Started

Prerequisites

• Node.js >= 18.x
• npm >= 9.x or yarn >= 1.22

Setup

1. Install dependencies:

   npm install
   # or
   yarn install

2. Run the development server:

   npm run dev
   # or
   yarn dev

3. Open http://localhost:3000 to view the app.

---

Project Structure

• /pages - Next.js pages
• /components - Reusable UI components
• /types - TypeScript type definitions
• /styles - Tailwind and global styles

Accessibility

This project follows WCAG guidelines for accessibility.