🎓 School Management App with Next.js & React

A full-stack School Management Website built with Next.js 15, React.js 19, and Tailwind CSS. Includes responsive layouts, reusable components, interactive charts, and complex forms with validation, modals, and lazy loading.

🚀 Tech Stack

🌐 Framework: Next.js 15 – SSR, routing, and API handling.

⚛️ UI Library: React.js 19 – Component-based architecture.

🎯 Styling: Tailwind CSS – Utility-first, responsive styling.

📈 Charts: Re-Charts – Data visualization with animations.

✍️ Forms: React-Hook-Form + Zod – Form handling with validation.

📅 Calendar: React Big Calendar – Event scheduling and management.

⚡ Performance: Lazy loading with dynamic() for optimized rendering.

⚙️ Features

📄 Page & Layout Management: Modular structure with reusable layouts.

🎨 Responsive UI: Tailwind-powered dynamic design.

📊 Data Visualization: Radial, bar, and line charts with animations.

🗓️ Calendar & Events: React Big Calendar integration.

🛠️ Reusable Components: Tables, modals, and form components.

📝 Form Handling: React-Hook-Form with Zod validation.

⚡ Lazy Loading: Dynamic imports with dynamic() for better performance.

Available Scripts

In the project directory, you can run:

npm run serve

Runs the app in the development mode. Open http://localhost:4000 to view it in the browser.

next build

Builds the app for production to the .next folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Live Site (Vercel)

Dependencies

React Icons - https://www.npmjs.com/package/react-icons

npm i react-icons

Video Preview

Demo