🚀 TrainWithShubham Community Hub

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

✨ Features

🎯 Core Capabilities

📅 Events

Community calendar powered by Google Calendar integration

Real-time event synchronization
Automated hourly updates
Responsive event cards with details

🏆 Community Heroes

Recognition program celebrating top contributors

Three-tier achievement system
Hero profiles with social links
Filterable by tier level

💼 Projects

GitHub-powered project catalog with live metadata

⭐ Stars, forks, and topic tags
📖 Integrated README viewer
🔍 Searchable by difficulty and tech stack

💡 Interview Questions

Comprehensive Q&A for DevOps/Cloud interviews

⚡ Client-side fuzzy search (Fuse.js)
📑 Paginated browsing
🎯 Curated by community experts

💼 Jobs Board

Community-driven job opportunities

Latest DevOps/Cloud positions
Terminal-style animations
Direct application links

🎨 Modern UI/UX

Beautiful, accessible interface

🌓 Dark/Light mode support
📱 Fully responsive design
♿ WCAG accessibility compliant

🎯 Technical Highlights

🚀 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

🏗️ Architecture

Tech Stack

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]

Project Structure

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

Data Flow

┌─────────────────────────────────────────────────────────────┐
│                    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                       │
└─────────────────────────────────────────────────────────────┘

🚀 Quick Start

Prerequisites

Node.js 20+ and npm
Git

Installation

# Clone the repository
git clone https://github.com/TrainWithShubham/community-website.git
cd community-website

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:3000 to see the site in action! 🎉

Available Scripts

# 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 connection

🤝 Contributing

We welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.

Quick Contribution Guide

Fork & Clone the repository
Create a branch from main
```
git 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

Commit Convention

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

Code Quality Standards

✅ TypeScript strict mode
✅ ESLint + Prettier formatting
✅ Unit tests for utilities
✅ Property-based tests for complex logic
✅ Accessibility compliance (WCAG)
✅ Responsive design (mobile-first)

Getting Help

📖 Check CONTRIBUTING.md for detailed guidelines
🐛 Report bugs via GitHub Issues
💬 Join discussions in the community Discord
🏷️ Look for good first issue labels for beginner-friendly tasks

📚 Documentation

Core Documentation

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

Key Concepts

Static Site Generation

All pages are pre-rendered at build time for maximum performance and zero hosting cost.

Automated Deployment

GitHub Actions workflow handles:

✅ Immediate deployment on push to main
✅ Hourly scheduled rebuilds for fresh data
✅ Manual deployment via GitHub Actions UI

Client-Side Search

Fuse.js provides fuzzy search without server infrastructure:

⚡ Instant results
🎯 Typo-tolerant matching
📦 Minimal bundle impact

🎯 Roadmap

Current Focus

Community Heroes recognition program
Property-based testing infrastructure
Dark mode support
Enhanced project filtering
Event RSVP functionality
User authentication (optional)

Future Enhancements

📊 Analytics dashboard
🔔 Event notifications
🏆 Gamification features
📱 Progressive Web App (PWA)
🌍 Internationalization (i18n)
🤖 AI-powered recommendations

📊 Project Stats

Migration Success (Dec 2024)

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

Test Coverage

✅ 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

🙏 Acknowledgments

Built with ❤️ by the TrainWithShubham community

Technologies Used

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

📄 License

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

⬆ Back to Top

Made with 💻 and ☕ by the TrainWithShubham Community

Name		Name	Last commit message	Last commit date
Latest commit History 59 Commits
.github		.github
.husky		.husky
.kiro		.kiro
.vscode		.vscode
config		config
docs		docs
public		public
src		src
.cursorignore		.cursorignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.gitmessage.txt		.gitmessage.txt
CNAME		CNAME
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
commitlint.config.cjs		commitlint.config.cjs
components.json		components.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts
vitest.setup.ts		vitest.setup.ts

License

TrainWithShubham/community-website

Folders and files

Latest commit

History

Repository files navigation