https://github.com/affancoder/teachhub
Teacher Managment Web App | Modern UI
https://github.com/affancoder/teachhub
mobile-first-design nextjs responsive-web-design tailwindcss typescript website
Last synced: 23 days ago
JSON representation
Teacher Managment Web App | Modern UI
- Host: GitHub
- URL: https://github.com/affancoder/teachhub
- Owner: affancoder
- Created: 2025-07-11T06:33:11.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-11-28T11:19:05.000Z (6 months ago)
- Last Synced: 2025-11-30T18:46:34.411Z (6 months ago)
- Topics: mobile-first-design, nextjs, responsive-web-design, tailwindcss, typescript, website
- Language: TypeScript
- Homepage: https://teach-hub-lyart.vercel.app
- Size: 226 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TeachHub
https://github.com/user-attachments/assets/8e4ab295-ed34-4280-8f75-ce388b6a3dde
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](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
## Getting Started
### Prerequisites
- Node.js >= 18.x
- npm >= 9.x or yarn >= 1.22
### Setup
1. **Install dependencies:**
```bash
npm install
# or
yarn install
```
2. **Run the development server:**
```bash
npm run dev
# or
yarn dev
```
3. Open [http://localhost:3000](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.