🎓 College Societies Management Console

A premium, high-performance SaaS frontend for managing college societies, campus events, and member engagement.

This project is a modern, responsive dashboard built to streamline the administration of university clubs. It features a stunning glassmorphic design, fluid micro-interactions, an integrated Command Palette, and a mock AI Co-pilot interface.

Built with a focus on cutting-edge UI/UX patterns and rapid development leveraging AI tooling.

✨ Key Features

• Premium Glassmorphic UI: Deep dark mode featuring frosted glass components, subtle backdrop blurs, and vibrant neon cyan/purple accents.
• AI Co-Pilot Hub: A mock generative AI chat interface designed to provide insights on event scheduling, member overlap, and campus engagement.
• Global Command Palette: Hit Ctrl+K or Cmd+K to instantly summon an animated search modal for lightning-fast navigation across the app.
• Fluid Animations: Powered by Framer Motion, featuring staggered list renders, 3D hover tilts on society cards, animated progress bars, and a dynamic sun/moon theme toggle.
• Interactive Dashboard: Real-time data visualization (ready for backend integration) with Recharts.
• Mobile-First Design: Fully responsive layout with a collapsible sidebar that transforms into a bottom navigation bar on smaller screens.

🛠️ Tech Stack

• Framework: React 18 + Vite
• Language: TypeScript
• Styling: Tailwind CSS (v3.4+)
• Animations: Framer Motion
• Icons: Lucide React
• Charts: Recharts
• Routing: React Router v6
• State Management: React Context API

🚀 Getting Started

To run this project locally, make sure you have Node.js installed.

1. Clone the repository:

git clone https://github.com/dhruv-gupta-dev/Cursor_Project.git

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

1. Open your browser:

Navigate to http://localhost:5173

🧠 Development Journey

This project was built to explore modern frontend architecture and high-end UI design. The initial foundation and scaffolding were rapidly prototyped using Cursor AI, allowing for a massive acceleration in boilerplate generation and layout structuring.

Following the AI-assisted generation, significant manual engineering was done to:

• **Refine the Command Palette's state management and AnimatePresence lifecycle.

• **Debug and perfect complex Flexbox layouts for the AI chat interface across mobile and desktop viewports.

• **Fine-tune Framer Motion variants to prevent layout thrashing.

• **Ensure strict TypeScript safety and Context API optimization.

👨‍💻 Author

Dhruv Gupta GitHub: @dhruv-gupta-dev

If you like this project, feel free to leave a ⭐!