Skip to content

bstef/culturehub

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

11 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

CultureHub ๐ŸŽฏ

Track, celebrate, and reward your team culture โ€” all in the browser, no backend required.

CultureHub is a zero-server team culture event tracker built with vanilla HTML, CSS, and JavaScript. Manage events, check in attendees, run a live leaderboard, and share photo galleries โ€” everything stored in your browser's localStorage.

โœจ Features

๐Ÿ“… Event Management

  • Create and manage events with title, date, type, location, and description
  • Six color-coded event types: Game ๐ŸŽฎ, Social ๐Ÿฅ‚, Team Building ๐Ÿค, Holiday ๐ŸŽ‰, Charity โค๏ธ, General ๐Ÿ“Œ
  • Live check-in counters, attendance tracking, and photo galleries per event

๐Ÿ‘ฅ Roster & Bulk Import

  • Add team members manually or bulk-import from JSON
  • Supports native format and Microsoft Teams/Azure AD exports
  • Automatic duplicate detection
  • Tracks name, team affiliation, and email

โœ… Check-In & Scoring

  • Tap to check in (1 point) or mark winner (3 points)
  • Bulk check-in entire registered attendee lists
  • Simple, transparent scoring system with no caps
  • Undo functionality

๐Ÿ“บ Live TV Dashboard & Leaderboard

  • TV Mode for fullscreen lobby displays
  • Animated rank rows with gold/silver/bronze highlights
  • Scrolling ticker of top scores and recent events
  • Event attendance progress bars
  • Auto-refresh every 30 seconds

๐Ÿ–ผ๏ธ Photo Gallery

  • Per-event photo management with drag-drop support
  • Slideshow view
  • Quick gallery grid browsing

๐Ÿ” Global Search

  • Search across people and events
  • Fast, client-side searching

โš™๏ธ Settings & Data Management

  • Customize organization name
  • Dark/light theme toggle (persisted)
  • Backup and restore data
  • Export/import functionality

๐Ÿš€ Getting Started

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/culturehub.git
    cd culturehub
  2. Open in browser:

    • Simply open index.html in your web browser
    • Or use a local server:
      python3 -m http.server 8000
      # Visit http://localhost:8000

First Time Setup

  1. Go to Settings to customize your organization name
  2. Visit Roster to add team members (manual or bulk import)
  3. Create your first event in Events
  4. Use Check-In at the event to track attendance
  5. View results on the Dashboard or in TV Mode

๐Ÿ“ Project Structure

โ”œโ”€โ”€ index.html          # Dashboard home โ€” stats, leaderboard, upcoming events
โ”œโ”€โ”€ events.html         # Create and manage events
โ”œโ”€โ”€ roster.html         # Add people / bulk import
โ”œโ”€โ”€ checkin.html        # Day-of attendance tracking
โ”œโ”€โ”€ dashboard.html      # Live leaderboard with TV mode
โ”œโ”€โ”€ search.html         # Global search across data
โ”œโ”€โ”€ gallery.html        # Per-event photo management
โ”œโ”€โ”€ settings.html       # Configuration, backup, restore
โ”œโ”€โ”€ data.js             # Shared data layer (localStorage)
โ”œโ”€โ”€ utils.js            # Helper functions and navigation
โ”œโ”€โ”€ style.css           # Styling (dark/light theme support)
โ”œโ”€โ”€ docs/               # Documentation
โ”‚   โ”œโ”€โ”€ hashnode-post.md
โ”‚   โ””โ”€โ”€ index.html
โ””โ”€โ”€ README.md           # This file

๐Ÿ’พ Data Storage

All data is stored locally in your browser's localStorage under the key culturehub_data. This means:

  • โœ… No server required โ€” runs entirely client-side
  • โœ… Offline capable โ€” works without internet
  • โš ๏ธ Per-browser storage โ€” data doesn't sync across devices
  • ๐Ÿ’ก Backup/restore โ€” use Settings to export/import JSON

Data Structure

{
  version: 1,
  people: [
    { id, name, team, email, avatar }
  ],
  events: [
    { id, title, date, type, description, location, gallery:[], attendees:[{personId, checkedIn, points, isWinner}] }
  ],
  settings: { orgName, theme }
}

โŒจ๏ธ Keyboard Shortcuts

Key Action
Alt+T or F11 Toggle TV Mode (Dashboard)
Esc Exit TV Mode

๐ŸŽจ Theme Support

CultureHub includes built-in dark and light themes, toggled from Settings. Theme preference is persisted to localStorage.

๐Ÿ“Š Scoring System

Action Points
โœ… Check-in (attending) 1 pt
๐Ÿ† Winner 3 pts
Tiebreaker # of events attended

๐Ÿ› ๏ธ Built With

  • HTML5 โ€” Semantic markup
  • CSS3 โ€” Grid, flexbox, CSS variables for theming
  • Vanilla JavaScript โ€” No frameworks or dependencies
  • localStorage โ€” Client-side data persistence

๐Ÿค Contributing

Contributions are welcome! Please feel free to:

  • ๐Ÿ› Report bugs
  • ๐Ÿ’ก Suggest features
  • ๐Ÿ“ Improve documentation
  • ๐Ÿ”ง Submit pull requests

๐Ÿ“„ License

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

๐Ÿ’ฌ Feedback

Have suggestions or found a bug? Please open an Issue on GitHub.


Made with โค๏ธ for building better team culture.

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors