Lets audience members:
- Access information about the event,
- View artist's bio,
- See the setlist,
- Pick any setlist song to view,
- Check out song lyrics,
- See lyrics in an alternate language,
- Easily install on any device,
Click here to View Live Demo →
🔍 Click here to View Full Screenshot
---
# 1. Clone the repository
git clone https://github.com/markpawl/Events.git
cd Events
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devOpen http://localhost:5173 in your browser. That's it — no API keys, no environment setup required.
Managing music performance data is surprisingly messy. Setlists change, artist lineups shift, and fan-facing apps often require a full backend just to update a song entry. Events PWA solves this by treating content as structured, file-based data that anyone can update — no backend, no database, no deployment pipeline required for content changes.
The motivation: This project was built to give music communities and small venues a lightweight, installable web app for tracking performances, without the overhead of a full CMS or server. By choosing a file-based, modular data architecture, contributors can add a new artist or setlist by following a simple template — making the project genuinely open to non-developer contributors.
Why this stack?
- React was chosen for its component model, which maps cleanly to the domain objects (Artist, Venue, SetList) and enables maximum UI reuse.
- Vite provides near-instant HMR during development and optimized production builds — critical for a PWA where load performance matters.
- Bootstrap 5 delivers a responsive, accessible layout without writing custom CSS grid systems from scratch.
vite-plugin-pwahandles the full PWA lifecycle (service worker, manifest, offline caching) declaratively, keeping the app installable on Android and iOS with minimal boilerplate.
- 📱 Progressive Web App (PWA) — Fully offline-capable with a complete web manifest and icon set. Users can install the app directly from their browser on mobile and desktop.
- 🗂 Modular Data Schema — Domain-driven folder structure for Songs, Events, and Artists. JS-based templates enforce data consistency and allow content updates without touching UI code.
- 🧩 Decoupled Component Architecture — Reusable
Artist,Venue, andSetListcomponents are fully independent, making it easy to extend or restyle individual sections. - 🌍 i18n Ready — Structured to support multilingual content (German/English) through a centralized data layer — no runtime library required to get started.
- ⚡ Vite-Powered Builds — Lightning-fast development server with Hot Module Replacement and optimized production output.
- 🎨 Bootstrap 5 + Bootstrap Icons — Clean, responsive UI out of the box, with a comprehensive icon library for event and music-related UI elements.
- 🔍 ESLint Configured — Enforced code quality with React-specific rules (
react-hooks,react-refresh) for a maintainable codebase.
| Layer | Technology |
|---|---|
| UI Framework | React 18 |
| Build Tool | Vite 5 |
| Styling | Bootstrap 5 + Bootstrap Icons |
| PWA | vite-plugin-pwa |
| Linting | ESLint with React plugins |
| Language | JavaScript (ES Modules) |
| Deployment | Vercel |
Before you begin, make sure you have the following installed:
- Node.js
v18.0.0or higher — Download here - npm
v9.0.0or higher (comes with Node.js)
Verify your versions:
node --version # Should be >= 18.0.0
npm --version # Should be >= 9.0.0No API keys or environment variables are required. The app is fully data-driven from local files.
1. Clone the repository
git clone https://github.com/markpawl/Events.git
cd Events2. Install dependencies
npm install3. Start the development server
npm run devThe app will be available at http://localhost:5173.
npm run dev # Start the Vite dev server with HMRnpm run build # Compile and bundle for production
npm run preview # Preview the production build locallynpm run lint # Run ESLint across all JS/JSX filesnpm run generate-pwa-assets # Generate all PWA icons from public/logo.svgThe project's core strength is its contributor-friendly data layer. To add a new artist or event:
- Navigate to
src/artists/orsrc/songs/ - Copy an existing entry file as your template
- Fill in the fields following the established schema
- The new content will appear in the app automatically — no UI changes needed
// Example: src/artists/new-artist.js (follow the existing template structure)
export const artist = {
id: "artist-slug",
name: "Artist Name",
genre: "Genre",
// ...other fields per the template
};The project is actively evolving. Here's what's planned:
- Search & Filter — Full-text search across events, artists, and setlists
- User Favorites — LocalStorage-based system to bookmark events and artists
- Dynamic Routing — Dedicated detail pages for each artist and event (React Router)
- Dark Mode — System-preference-aware theme toggle
- GitHub Actions CI — Automated lint + build checks on every pull request
- Full i18n — Complete German/English language toggle using
react-i18next - CMS Integration — Optional headless CMS (e.g., Contentlayer or Sanity) for teams who prefer a visual editor
Have an idea? Open a feature request →
Contributions make open source such a great place to learn, inspire, and create — and this project is designed with contributors in mind. Whether you're adding a new artist entry, fixing a bug, or proposing a new feature, all contributions are warmly welcome.
How to contribute:
- Fork the repository
- Create your feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m 'feat: add some feature' - Push to the branch:
git push origin feature/your-feature-name - Open a Pull Request
For content-only contributions (new artists, events, or songs), you don't need deep React knowledge — just follow the templates in src/artists/ and src/songs/.
Please read the Contributor Guidelines before submitting a PR. (Coming soon)
Distributed under the MIT License. See LICENSE for more information.
- Vite PWA Plugin for making PWA implementation approachable
- Bootstrap for the solid responsive foundation
- Shields.io for the status badges
- Vercel for frictionless deployment
Made with ❤️ by markpawl