A comprehensive web portal for Google Developer Groups on Campus 2025 core team management at GITAM University. This modern, responsive application provides a complete recruitment and management solution with advanced form handling, authentication, and email notifications.
- Minimalistic Design: Clean white (#FFF) background with Google's official color scheme
- Google Sans Typography: Professional typography using Google Sans font family
- Fully Responsive: Mobile-first design that works seamlessly across all devices
- Interactive Animations: Smooth hover effects and transitions for enhanced user experience
- Accessibility: WCAG-compliant design with proper ARIA labels and semantic HTML
- Google OAuth Integration: Secure authentication using NextAuth.js
- Domain Restriction: Access limited to @gitam.in email addresses only
- Session Management: Secure JWT-based session handling
- Custom Sign-in Pages: Branded authentication flows with Google styling
- Error Handling: Comprehensive error handling for authentication failures
-
Personal Information
- First Name, Last Name
- GITAM Email Address (validated)
- Phone Number
-
Academic Information
- Student ID
- Year of Study (1st-4th year)
- Branch/Department selection
- Current CGPA
-
Technical Skills & Experience
- Programming Languages & Technologies
- Previous Projects & Experience
- GitHub Profile URL
-
Motivation & Goals
- Why join GDGoC GITAM?
- How to contribute to GDGoC GITAM?
-
Commitment & Availability
- Class schedule and weekly time commitment
- Semester/academic year availability
- Conditional follow-up for limited availability
-
More About Your Passion
- Passionate project experience and outcomes
- Anticipated challenges and proposed solutions
-
Role Preference
- Technical Team (Development & Engineering)
- Design Team (UI/UX & Graphics)
- Content Team (Writing & Documentation)
- Events Team (Organization & Management)
- Marketing Team (Social Media & Outreach)
- Team Lead (Leadership & Coordination)
-
Department-Specific Tasks (Conditional)
- Build a webpage displaying GDG events
- Create a "Hello World" app with interactive features
- Write a Python script for API data analysis
- Submit GitHub repository or live demo link
- Design social media graphics for events
- Draft community email newsletters
- Create short promotional videos/reels
- Submit work portfolio links
- Draft professional partnership emails
- Outline community project ideas
- Submit detailed written responses
- NodeMailer Integration: Professional email notifications
- HTML Email Templates: Responsive email designs with Google branding
- Application Confirmations: Immediate confirmation emails with application details
- Interview Notifications: Automated interview booking confirmations
- Professional Styling: Consistent branding across all email communications
- Interactive Slot Selection: Visual calendar interface for interview scheduling
- Conflict Prevention: Real-time availability checking
- Booking Confirmations: Detailed interview information with Google Meet links
- Email Notifications: Automatic confirmation emails with preparation tips
- Framework: Next.js 15 with App Router
- Language: TypeScript for type safety
- Styling: Tailwind CSS with custom Google color palette
- Components: React functional components with hooks
- State Management: React useState for form state and conditional rendering
- Authentication: NextAuth.js with Google OAuth provider
- API Routes: Next.js API routes for server-side logic
- Email Service: NodeMailer for SMTP email delivery
- Session Storage: JWT tokens with httpOnly cookies
/* Google Color Palette */
--primary: #4285F4; /* Google Blue */
--secondary: #EA4335; /* Google Red */
--accent: #FBBC05; /* Google Yellow */
--success: #34A853; /* Google Green */
--background: #FFFFFF; /* Pure White */src/
├── app/
│ ├── auth/ # Authentication pages
│ │ ├── signin/ # Custom sign-in page
│ │ └── error/ # Authentication error handling
│ ├── recruitment/ # Main application form
│ │ └── page.tsx # Comprehensive recruitment form
│ ├── confirmation/ # Success page after application
│ ├── interview/ # Interview booking system
│ ├── api/
│ │ └── auth/ # NextAuth.js API routes
│ ├── globals.css # Global styles and Google Sans fonts
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Homepage with community features
├── lib/
│ ├── auth.ts # NextAuth configuration
│ └── email.ts # Email service functions
└── public/
├── fonts/ # Google Sans font files
│ ├── GoogleSans-Regular.woff2
│ ├── GoogleSans-Medium.woff2
│ ├── GoogleSans-Bold.woff2
│ └── GoogleSansDisplay-Regular.woff2
└── gdsc-gitam.jpg # Community image
- Node.js 18+
- npm or yarn package manager
- Google OAuth credentials
- SMTP email service credentials
-
Clone the repository
git clone https://github.com/dsc-gitam/dsc-portal.git cd dsc-portal -
Install dependencies
npm install # or yarn install -
Environment Configuration
Create a
.env.localfile in the root directory:# NextAuth Configuration NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your-super-secret-key-here # Google OAuth Credentials GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret # Email Service Configuration SMTP_USER=your-email@gmail.com SMTP_PASS=your-app-password SMTP_HOST=smtp.gmail.com SMTP_PORT=587
-
Google OAuth Setup
- Go to Google Cloud Console
- Create a new project or select existing
- Enable Google+ API
- Create OAuth 2.0 credentials
- Add authorized redirect URIs:
http://localhost:3000/api/auth/callback/google(development)https://yourdomain.com/api/auth/callback/google(production)
-
Run the development server
npm run dev # or yarn dev -
Open the application
Navigate to http://localhost:3000 in your browser.
- Modern landing page with Google branding
- Community statistics and feature highlights
- Clear call-to-action buttons for application
- Multi-step comprehensive form
- Real-time validation and error handling
- Progressive disclosure based on role selection
- Dynamic content based on selected role
- Interactive task selection with radio buttons
- Appropriate submission fields for each task type
- Professional success page with next steps
- Clear timeline and expectations
- Contact information and support links
- Calendar-based slot selection
- Real-time availability checking
- Detailed booking confirmations
- Conditional Rendering: Sections appear based on user selections
- Progressive Disclosure: Complex forms broken into manageable sections
- Smart Validation: Real-time validation with helpful error messages
- Data Persistence: Form state maintained during navigation
- Email Validation: Strict @gitam.in domain checking
- Required Fields: Clear marking with asterisks (*)
- Format Validation: Phone numbers, URLs, and CGPA ranges
- Character Limits: Appropriate limits for text areas
- Screen Reader Support: Proper ARIA labels and descriptions
- Keyboard Navigation: Full keyboard accessibility
- Color Contrast: WCAG AA compliant color combinations
- Focus Management: Clear focus indicators and logical tab order
The project uses a custom Tailwind configuration with Google's design system:
// tailwind.config.ts
module.exports = {
theme: {
extend: {
colors: {
primary: '#4285F4',
secondary: '#EA4335',
accent: '#FBBC05',
success: '#34A853',
},
fontFamily: {
sans: ['Google Sans', 'Inter', 'system-ui', 'sans-serif'],
display: ['Google Sans Display', 'Inter', 'system-ui', 'sans-serif'],
},
},
},
}/* globals.css */
@font-face {
font-family: 'Google Sans';
src: url('/fonts/GoogleSans-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Google Sans';
src: url('/fonts/GoogleSans-Medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}GET /api/auth/signin- Custom sign-in pagePOST /api/auth/callback/google- Google OAuth callbackGET /api/auth/session- Current session informationPOST /api/auth/signout- Sign out functionality
The recruitment form can be extended with API endpoints for:
POST /api/applications- Submit new applicationsGET /api/applications/[id]- Retrieve application statusPOST /api/interviews/book- Book interview slotsGET /api/interviews/availability- Check available slots
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on push
# Build for production
npm run build
# Start production server
npm startNEXTAUTH_URL=https://yourdomain.com
NEXTAUTH_SECRET=your-production-secret
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
SMTP_USER=your-production-email
SMTP_PASS=your-production-password- Homepage loads correctly with all visual elements
- Google authentication flow works with @gitam.in restriction
- All form sections render properly
- Conditional logic works for role-specific tasks
- Form validation provides helpful error messages
- Email notifications are sent successfully
- Interview booking system functions correctly
- Mobile responsiveness works across devices
- Technical Role: Select technical role and verify programming tasks appear
- Marketing Role: Select marketing role and verify creative tasks appear
- Operations Role: Select operations role and verify partnership tasks appear
- Availability Logic: Test "No" selection shows follow-up question
- Task Selection: Verify appropriate submission fields appear for each task
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Maintain Google design system consistency
- Write descriptive commit messages
- Test across multiple devices and browsers
- Use functional components with hooks
- Implement proper TypeScript types
- Follow React best practices
- Maintain consistent indentation and formatting
This project is licensed under the MIT License - see the LICENSE file for details.
GDGoC GITAM Core Team
- Email: dsc.gitam@gmail.com
- Website: GDGoC GITAM Portal
- GitHub: @dsc-gitam
- Google Developer Groups for the amazing community platform
- GITAM University for supporting the developer community
- Next.js Team for the excellent React framework
- Tailwind CSS for the utility-first CSS framework
- NextAuth.js for seamless authentication
Built with ❤️ by GDGoC GITAM for the developer community