VIT Connect 🎓

A comprehensive college management platform for Vishwakarma Institute of Technology (VIT Pune) that connects students, facilitates communication, and streamlines campus life.

✨ Features

🤖 AI-Powered Chatbot

• Intelligent assistant powered by Google Generative AI
• Instant answers about admissions, programs, fees, and campus facilities
• Context-aware responses for better user experience

👥 Social Network

• Connect with fellow students
• Share posts with photo upload support
• Like, comment, and engage with the community
• Real-time feed updates

📚 Note Sharing Platform

• Upload and share study materials
• Organize notes by subject and semester
• Download resources shared by peers
• Collaborative learning environment

🔔 Notifications Hub

• Training & placement updates
• Club events and activities
• Important announcements
• Deadline reminders

🔍 Lost & Found

• Report lost items with photo upload
• Browse found items
• Filter by category (Electronics, Documents, Personal Items, etc.)
• Contact information for item recovery

🎭 College Clubs

• Discover 8+ active college clubs
• Detailed club information and activities
• Meeting schedules and locations
• Direct contact and join functionality
• Categories: Technical, Cultural, Social Service, Entrepreneurship, and more

👤 User Profiles

• Personalized student profiles
• Department and batch information
• Activity tracking
• Secure authentication

🚀 Tech Stack

• Frontend Framework: React 18.3.1
• Language: TypeScript 5.8.3
• Styling: Tailwind CSS 3.4.17
• UI Components: shadcn/ui (Radix UI)
• Animations: Framer Motion 12.23.12
• Routing: React Router DOM 6.30.1
• State Management: React Query (TanStack Query)
• Form Handling: React Hook Form 7.61.1
• AI Integration: Google Generative AI
• Build Tool: Vite 5.4.19

📦 Installation

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Setup

1. Clone the repository

git clone https://github.com/Asadp3406/Vit-connect.git
cd Vit-connect

2. Navigate to project directory

cd "PBL SEPM"

3. Install dependencies

npm install

4. Set up environment variables

# Copy the example env file
cp .env.example .env

5. Add your Google Generative AI API key Edit .env file:

VITE_GOOGLE_API_KEY=your_api_key_here

6. Start development server

npm run dev

The application will be available at http://localhost:5173

🛠️ Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run build:dev    # Build in development mode
npm run preview      # Preview production build
npm run lint         # Run ESLint

📁 Project Structure

PBL SEPM/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── ui/          # shadcn/ui components
│   │   └── auth/        # Authentication components
│   ├── pages/           # Page components
│   │   ├── Index.tsx    # Landing page
│   │   ├── SocialFeed.tsx
│   │   ├── NoteShare.tsx
│   │   ├── Notifications.tsx
│   │   ├── LostFound.tsx
│   │   ├── Clubs.tsx
│   │   └── Profile.tsx
│   ├── contexts/        # React contexts
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility functions
│   ├── services/        # API services
│   └── App.tsx          # Main app component
├── public/              # Static assets
└── package.json

🎨 Key Features Implementation

Photo Upload

• Supports image upload in Social Feed and Lost & Found
• Client-side image preview
• Base64 encoding for storage
• Remove/replace functionality

Authentication

• Secure user authentication
• Protected routes
• User session management
• Profile customization

Responsive Design

• Mobile-first approach
• Adaptive layouts for all screen sizes
• Touch-friendly interface
• Optimized for tablets and desktops

Animations

• Smooth page transitions
• Interactive hover effects
• Loading states
• Micro-interactions with Framer Motion

🌐 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

Netlify

1. Connect GitHub repository
2. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
3. Add environment variables
4. Deploy

🔐 Environment Variables

Variable	Description	Required
VITE_GOOGLE_API_KEY	Google Generative AI API Key	Yes

Note: Never commit .env file to version control. It's already in .gitignore.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

👨‍💻 Developer

Asad Pathan

• GitHub: @Asadp3406

🙏 Acknowledgments

• Vishwakarma Institute of Technology, Pune
• Google Generative AI
• shadcn/ui for beautiful components
• The React and TypeScript communities

---

Made with ❤️ for VIT Pune students