GDG AJCE Community Website

A modern, responsive website for Google Developer Group - AJCE (Amal Jyothi College of Engineering) built with React, Vite, and Tailwind CSS.

🌟 Features

🏠 Multi-Page Website

• Homepage: Welcome page with community stats and feature highlights
• Events: Dynamic events showcase with poster displays and registration links
• Core: Platform features and supported technologies
• Leaderboard: Study jam progress tracking and member rankings

🔐 Admin Panel

• Secure authentication system
• Complete event management (CRUD operations)
• Poster upload and management
• Google Form integration for event registrations
• Real-time content updates

🎨 Design & UX

• Fully responsive design for all screen sizes
• Modern UI with consistent design language
• Smooth animations and hover effects
• Professional color scheme and typography

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/GDSC-AJCE/GDG-AJCE.git
   cd GDG-AJCE

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser

   • Navigate to http://localhost:5173 (or the port shown in terminal)

🛠️ Technologies Used

• Frontend Framework: React 19.1.1
• Build Tool: Vite 7.1.7
• Styling: Tailwind CSS 4.1.13
• Routing: React Router DOM
• Icons: Lucide React
• Charts: Chart.js & React-ChartJS-2
• Date Handling: date-fns

📱 Pages Overview

🏠 Homepage (/)

• Community welcome message
• Key statistics cards
• Feature highlights with navigation
• Call-to-action sections

🎉 Events (/events)

• Upcoming events with poster displays
• Event details (date, time, location, capacity)
• Registration buttons linking to Google Forms
• Past events archive
• Progress bars for event capacity

⚙️ Core (/core)

• Platform core features showcase
• Supported technologies grid
• Feature benefits and descriptions
• Call-to-action for getting started

🏆 Leaderboard (/leaderboard)

• Study jam participant rankings
• Performance statistics
• Weekly progress charts
• Top performers showcase
• Search and filtering capabilities

🔧 Admin Panel (/admin)

• Access: Direct URL only (hidden from navigation)
• Login: Password-protected (Demo: gdg-admin-2025)
• Features:
  • Add/Edit/Delete events
  • Upload event posters
  • Set Google Form registration links
  • Manage event status and capacity
  • Real-time preview of changes

🔐 Admin Access

The admin panel is accessible only via direct URL for security:

• URL: http://localhost:5173/admin
• Demo Password: gdg-admin-2025
• Session: 24-hour login session with auto-logout

Admin Capabilities

• ✅ Create new events with complete details
• ✅ Edit existing events inline
• ✅ Upload and manage event posters
• ✅ Set Google Form registration links
• ✅ Delete events with confirmation
• ✅ Manage event status (open/full/cancelled)
• ✅ Real-time updates reflected on Events page

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── Header.jsx      # Navigation header
│   ├── StatsCard.jsx   # Statistics display cards
│   ├── LeaderboardTable.jsx  # Rankings table
│   └── ...
├── pages/              # Main page components
│   ├── Home.jsx        # Homepage
│   ├── Events.jsx      # Events showcase
│   ├── Core.jsx        # Core features
│   ├── Leaderboard.jsx # Study jam rankings
│   └── Admin.jsx       # Admin panel
├── contexts/           # React contexts
│   └── AdminContext.jsx # Admin state management
├── hooks/              # Custom React hooks
│   ├── useAdmin.js     # Admin functionality
│   └── useLeaderboard.js # Leaderboard logic
├── data/               # Mock data and constants
│   └── mockData.js     # Sample data
├── utils/              # Utility functions
│   └── helpers.js      # Helper functions
└── assets/             # Static assets

🎨 Design System

Colors

• Primary: Blue (#2563eb)
• Secondary: Purple (#7c3aed)
• Neutral: Gray scale for text and borders
• Success: Green for positive actions
• Danger: Red for warnings and deletions

Typography

• Font: System font stack for optimal performance
• Headings: Semibold weight with tight tracking
• Body: Regular weight with good readability

🚢 Deployment

Build for Production

npm run build

Preview Production Build

npm run preview

Deployment Options

• Vercel: Connect your GitHub repository
• Netlify: Deploy from Git or drag & drop
• GitHub Pages: Use GitHub Actions workflow

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• GDG AJCE Team for requirements and feedback
• React Community for excellent documentation
• Tailwind CSS for the utility-first CSS framework
• Vite for blazing fast development experience

📞 Support

For support, questions, or feature requests:

• GitHub Issues: Create an issue
• Email: Contact GDG AJCE team
• Community: Join our developer community events

---

Built with ❤️ by the GDG AJCE community