Empowering DevOps Engineers, Cloud Practitioners & DevSecOps Enthusiasts
A modern, fully static Next.js platform for community learning through real-world projects, events, and collaborative growth.
🌟 Features • 🏗️ Architecture • 🚀 Quick Start • 🤝 Contributing • 📚 Documentation
|
Community calendar powered by Google Calendar integration
|
Recognition program celebrating top contributors
|
|
GitHub-powered project catalog with live metadata
|
Comprehensive Q&A for DevOps/Cloud interviews
|
|
Community-driven job opportunities
|
Beautiful, accessible interface
|
- 🚀 Zero Hosting Cost - Deployed to GitHub Pages with automated builds
- ⚡ Lightning Fast - Fully static site generation, no server required
- 🔄 Auto-Updates - Hourly rebuilds fetch fresh data automatically
- 🔍 Smart Search - Client-side fuzzy search with Fuse.js
- 📦 Optimized Bundles - 30%+ size reduction through code splitting
- 🧪 Test Coverage - Property-based testing with fast-check
- 🎨 Component Library - Shadcn/ui with Radix UI primitives
- 🔒 Type Safety - Strict TypeScript with Zod validation
graph TB
A[Next.js 15 App Router] --> B[Static Site Generation]
B --> C[GitHub Pages CDN]
D[Google Sheets API] --> B
E[GitHub API] --> B
F[Client-Side Search] --> G[Fuse.js]
H[UI Components] --> I[Shadcn/ui + Radix]
J[Styling] --> K[Tailwind CSS]
L[Testing] --> M[Vitest + fast-check]
src/
├── app/ # Next.js App Router (pages + layouts)
│ ├── events/ # Community events calendar
│ ├── heroes/ # Community heroes recognition
│ ├── projects/ # Project catalog with GitHub integration
│ ├── interview-questions/ # DevOps/Cloud Q&A
│ └── jobs/ # Job board
├── components/ # Shared UI components
│ ├── ui/ # Shadcn/ui components (40+ components)
│ ├── layout/ # Navbar, Footer, layouts
│ └── heroes/ # Hero-specific components
├── features/ # Feature-based modules
│ └── projects/ # Project listing logic
├── lib/ # Core utilities
│ ├── client-search.ts # Fuse.js wrapper
│ ├── data-fetcher.ts # Build-time data fetching
│ └── utils.ts # Shared utilities
├── services/ # External service wrappers
│ └── google-sheets.ts # Google Sheets CSV fetching
└── data/ # Type definitions & static data
┌─────────────────────────────────────────────────────────────┐
│ Build Time (GitHub Actions) │
├─────────────────────────────────────────────────────────────┤
│ 1. Trigger (Push/Cron/Manual) │
│ 2. Fetch Google Sheets CSV data │
│ 3. Fetch GitHub API metadata (stars, forks, topics) │
│ 4. Generate static HTML/CSS/JS │
│ 5. Deploy to GitHub Pages CDN │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ Runtime (Browser) │
├─────────────────────────────────────────────────────────────┤
│ • Static assets served from CDN │
│ • Client-side search with Fuse.js │
│ • Theme toggle (dark/light mode) │
│ • No server-side processing required │
└─────────────────────────────────────────────────────────────┘
- Node.js 20+ and npm
- Git
# Clone the repository
git clone https://github.com/TrainWithShubham/community-website.git
cd community-website
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:3000 to see the site in action! 🎉
# Development
npm run dev # Start dev server with Turbopack
npm run build # Production build (static export)
npm run lint # Run ESLint
npm run typecheck # TypeScript type checking
# Testing
npm run test # Run all tests
npm run test:watch # Run tests in watch mode
npm run test:ui # Open Vitest UI
# Commits (Conventional Commits)
npm run commit # Interactive commit prompt
npm run lint:commits # Validate commit messages
# Utilities
npm run env:check # Validate environment variables
npm run test:sheets # Test Google Sheets connectionWe welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.
- Fork & Clone the repository
- Create a branch from
maingit checkout -b feat/your-feature-name
- Make your changes with proper testing
- Commit using Conventional Commits
npm run commit # Interactive prompt - Push and create a Pull Request
We use Conventional Commits for clear, semantic commit history:
type(scope): brief description
[optional body]
[optional footer]
Types: feat, fix, docs, chore, build, ci, test, refactor, perf, style
Common Scopes: events, heroes, projects, interview-questions, jobs, ui, api, docs, ci
Examples:
feat(heroes): add community heroes recognition program
fix(projects): correct GitHub API rate limiting
docs(readme): update installation instructions
test(heroes): add property-based tests for hero filtering- ✅ TypeScript strict mode
- ✅ ESLint + Prettier formatting
- ✅ Unit tests for utilities
- ✅ Property-based tests for complex logic
- ✅ Accessibility compliance (WCAG)
- ✅ Responsive design (mobile-first)
- 📖 Check CONTRIBUTING.md for detailed guidelines
- 🐛 Report bugs via GitHub Issues
- 💬 Join discussions in the community Discord
- 🏷️ Look for
good first issuelabels for beginner-friendly tasks
| Document | Description |
|---|---|
| 📖 Deployment Guide | Complete deployment instructions, custom domain setup, troubleshooting |
| 🔄 Migration Report | Vercel to GitHub Pages migration details, cost savings analysis |
| 🏗️ Project Structure | Detailed codebase organization and architecture |
| 🤝 Contributing Guide | Comprehensive contribution guidelines and workflow |
All pages are pre-rendered at build time for maximum performance and zero hosting cost.
GitHub Actions workflow handles:
- ✅ Immediate deployment on push to
main - ✅ Hourly scheduled rebuilds for fresh data
- ✅ Manual deployment via GitHub Actions UI
Fuse.js provides fuzzy search without server infrastructure:
- ⚡ Instant results
- 🎯 Typo-tolerant matching
- 📦 Minimal bundle impact
- Community Heroes recognition program
- Property-based testing infrastructure
- Dark mode support
- Enhanced project filtering
- Event RSVP functionality
- User authentication (optional)
- 📊 Analytics dashboard
- 🔔 Event notifications
- 🏆 Gamification features
- 📱 Progressive Web App (PWA)
- 🌍 Internationalization (i18n)
- 🤖 AI-powered recommendations
| Metric | Before (Vercel) | After (GitHub Pages) | Improvement |
|---|---|---|---|
| Hosting Cost | $240/year | $0/year | 💰 100% savings |
| Bundle Size | ~850 KB | ~595 KB | 📦 30% reduction |
| Build Time | ~45s | ~35s | ⚡ 22% faster |
| Deployment | Manual | Automated | 🤖 Fully automated |
- ✅ 59 tests passing across 7 test suites
- ✅ Property-based tests with 100+ iterations each
- ✅ Unit tests for all core components
- ✅ Integration tests for critical flows
Built with ❤️ by the TrainWithShubham community
- Next.js - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Shadcn/ui - Component library
- Radix UI - Accessible primitives
- Fuse.js - Fuzzy search
- Vitest - Testing framework
- fast-check - Property-based testing
- GitHub Pages - Hosting
- GitHub Actions - CI/CD
This project is licensed under the MIT License - see the LICENSE file for details.
