Abirga — Music Festival React JS Template

Abirga React is a bold, energetic Music Festival and Event Promotion web application built as a fully functional React 18 app using Vite and Bootstrap 5. It ships with 9 page-level components, a custom audio player hook, a filterable festival photo gallery, an album showcase, an event ticket cart powered by React Context, and a Particles.js hero — all built with modern functional React and zero class components.

Built for React developers delivering music festival sites, concert promotion apps, artist portfolio projects, or event e-commerce storefronts. The codebase uses hooks exclusively: useState, useEffect, useContext, useRef, and custom hooks for audio playback and cart management. The component tree is flat and composable — every UI section is an isolated, reusable component. Swap out the static JSON data sources for any REST API or headless CMS and the UI layer is immediately production-ready.

Everything in the Package

• 9 page-level React components across Home, Albums, Gallery, Blog, Shop, and Contact
• React 18 with Vite — fast HMR dev server and optimised production build out of the box
• React Router v6 — client-side routing with nested routes and lazy-loaded page components
• Bootstrap 5.0.1 — responsive grid and utility classes, no jQuery dependency
• Particles.js hero background on the Home page via react-particles wrapper
• Custom useAudioPlayer hook — manages track state, play/pause, and seek with useRef and useState
• useCart hook backed by React Context and useReducer — add, remove, update quantity, and persist to localStorage
• Album showcase: AlbumGrid component + AlbumDetail page with dynamic tracklist rendering
• Festival photo gallery: GalleryGrid component with useState-driven category filter
• CountdownTimer component using useEffect and setInterval — live event countdown
• Blog module: BlogGrid and BlogPost page components with related posts section
• Checkout page with React Hook Form — field validation, error messages, and submission state
• Newsletter form with controlled input and submission feedback via useState
• Swiper React — touch-friendly album and featured content carousels
• Magnific Popup lightbox for full-screen gallery previews
• Retina-ready, fully responsive from 320px to 1920px+
• ESLint configured — Airbnb ruleset with React Hooks plugin

Component Architecture

• Page components: HomePage, AlbumsPage, AlbumDetailPage, GalleryPage, BlogPage, BlogPostPage, CartPage, CheckoutPage, ContactPage
• Shared components: Navbar, Footer, AudioPlayer, CountdownTimer, AlbumCard, GalleryItem, BlogCard, BackToTop
• Custom hooks: useAudioPlayer, useCart, useCountdown, useGalleryFilter
• Context providers: CartContext wraps the router — cart state available on every route
• React.lazy() and Suspense applied to Gallery, Blog, and Shop page bundles — code-split on route
• All data (albums, gallery items, blog posts) sourced from typed JSON files in src/data/ — replace with fetch() calls to your API
• PropTypes defined on every component for clear prop contracts
• Folder structure: src/pages/, src/components/, src/hooks/, src/context/, src/data/

All 9 Pages

• /home — Particles.js hero, festival Swiper slider, album spotlight section, gallery preview, newsletter, countdown timer
• /albums — AlbumGrid component rendering album cards from albums.json
• /album-details — AlbumDetailPage with photo carousel, tracklist map, and concert description
• /gallery — GalleryGrid with useState category filter: All, Afterparty, Chilling, Filming, Vibe Out
• /blog — BlogGrid rendering BlogCard components from posts.json
• /blog-post — BlogPostPage with related posts computed from shared tags
• /cart — CartPage subscribing to CartContext — quantity controls and remove via useCart reducer
• /checkout — React Hook Form checkout with billing fields, validation, and order summary sidebar
• /contact — Controlled contact form with useForm, field validation, and success/error state

Audio Player Hook

• useAudioPlayer custom hook wraps the HTML5 Audio API via useRef
• Exposes: currentTrack, isPlaying, progress, play(track), pause(), seek(time), next(), prev()
• AudioPlayer component renders a fixed bottom bar — visible across all routes via the root layout
• Track queue updates automatically when user navigates to an AlbumDetailPage
• useEffect cleanup stops audio and removes event listeners on hook unmount

Cart and Checkout

• CartContext created with React.createContext and provided at the root level
• useReducer manages cart state: ADD_ITEM, REMOVE_ITEM, UPDATE_QTY, CLEAR_CART action types
• Cart count badge on the Navbar updates live via useContext(CartContext)
• CartPage renders line items with quantity steppers — all changes dispatched to the reducer
• CheckoutPage uses React Hook Form with register, handleSubmit, and formState.errors
• Cart persisted to localStorage via useEffect — survives page refresh

Performance and SEO

• React Helmet Async sets per-route title and meta description tags for SEO
• React.lazy() + Suspense code-splits Gallery, Blog, and Shop bundles — home route loads fast
• Vite production build applies Rollup tree-shaking, chunk splitting, and asset hashing automatically
• All images carry descriptive alt props meeting WCAG 1.1.1
• Google Fonts loaded with font-display: swap to prevent invisible-text flash

Use Cases

• Music Festival Organisers: Showcase lineups, sell tickets, and display galleries as a fast React SPA
• Concert Promoters: Particles.js hero with live countdown timer — maximum event hype from first load
• Artists and Bands: Album grid, tracklist detail, and persistent audio player all wired up
• Event Photographers: 32+ photo gallery with useState category filtering and lightbox
• Music Blogs: Blog module with grid and post detail, ready for headless CMS data integration
• React Developers: Custom hooks, Context API, and React Router v6 patterns reduce setup time significantly

Credits and Dependencies

• React 18 — MIT License
• Vite — MIT License
• React Router v6 — MIT License
• Bootstrap 5.0.1 — MIT License
• React Hook Form — MIT License
• React Helmet Async — MIT License
• Swiper React — MIT License
• react-particles — MIT License
• Font Awesome 6 — Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT
• Google Fonts — SIL Open Font License
• Demo images: Unsplash — Unsplash License (free for commercial use, no attribution required)
• Demo images: Freepik — Freepik License (free for commercial use with attribution)
• All demo images are for preview purposes only and are NOT included in the download. Replace with your own licensed images before publishing.

v1.0  Initial React Release
- React 18 with Vite build tooling
- 9 page-level components with React Router v6 client-side routing
- useAudioPlayer custom hook for persistent music playback across routes
- CartContext with useReducer for event ticket e-commerce
- React Hook Form checkout with field validation
- GalleryGrid with useState category filter for 32+ festival photos
- CountdownTimer via useEffect and setInterval
- React.lazy() code-splitting on Gallery, Blog, and Shop routes
- React Helmet Async per-route SEO meta tags
- ESLint with Airbnb ruleset and React Hooks plugin configured