Groupie Tracker is a Go web application that receives data from the Groupie Trackers API and displays information about artists and bands.
The application uses the API's four data sections:
- Artists — names, images, members, creation dates and first album dates.
- Locations — concert locations for each artist.
- Dates — concert dates for each artist.
- Relations — connects concert locations with their matching dates.
The four API sections are fetched concurrently using Go goroutines, allowing the independent API requests to run at the same time before the server starts. The fetched data is kept in memory as an in-memory cache and is automatically re-fetched on a fixed interval, so the server never queries the external API on every request.
The website includes artist cards, search, live suggestions, pagination, a Quick View side panel, detailed artist pages, concert information, an interactive map, dark mode and custom error pages.
Run the project from the root directory:
go run ./cmdor
make runThe server starts at:
http://localhost:8080
A different port can be selected with the PORT environment variable:
PORT=3000 go run ./cmd- Artist cards with images and names.
- Pagination with 12 artists per page.
- Search by artist name.
- Live search suggestions using asynchronous JavaScript requests.
- Quick View side panel without reloading the page.
- Artist members, creation year and first album date.
- Dynamic total concert and location counts.
- Expandable concert-location list.
- Full artist details page.
- Concert locations connected to their dates.
- Interactive Leaflet and OpenStreetMap concert map.
- Light and dark modes stored in
localStorage. - Responsive layout for desktop, tablet and mobile.
- Custom
400,404,405and500error handling. - Automated tests for models, handlers, routes and server behavior.
- Concurrent API fetching using Go goroutines and channels.
- In-memory caching of artist, relation, location and date data.
- Automatic background cache refresh from the API every 10 minutes, controlled by the
SyncIntervalvalue.
| Route | Description |
|---|---|
/ |
Displays the paginated artist list. |
/search?query=name |
Displays artists matching the search text. |
/suggestions?query=name |
Returns matching artists as JSON for live suggestions. |
/artist?id=1 |
Returns artist Quick View data as JSON. |
/artist-details?id=1 |
Displays the full artist details page. |
/static/ |
Serves CSS, JavaScript and image files. |
The main client–server event is the Quick View button:
- The user clicks a Quick View button.
- JavaScript reads the artist ID from the button.
fetch()sends a GET request to/artist?id=<id>.- The Go handler finds the matching artist, relation, location and date data.
- The server returns JSON.
- JavaScript updates and opens the side panel without reloading the page.
Live search suggestions use the same client–server pattern through the /suggestions route.
groupie-tracker/
├── cmd/
│ ├── main.go # Application entry point
│ └── main_test.go # Entry-point tests
├── internal/
│ ├── api.go # API requests and JSON decoding
│ ├── handlers.go # HTTP handlers and error handling
│ ├── models.go # Application data structures
│ ├── server.go # Route setup and server startup
│ ├── handlers_test.go # Handler status tests
│ ├── models_test.go # Model tests
│ └── server_test.go # Route and integration-style tests
├── templates/
│ ├── index.html # Home, search results and side panel
│ ├── artist-details.html # Full artist and concert page
│ └── error.html # Custom error page
├── static/
│ ├── style.css # Light, dark and responsive styling
│ ├── sidepanel.js # Quick View client-server event
│ ├── search.js # Live search suggestions
│ ├── map.js # Concert map and geocoding
│ ├── darkmode.js # Theme switching
│ ├── background.js # Interactive background
│ └── logo.png # Project logo
├── _docs/
│ └── learning-guide.md
└── go.mod
-
Startup:
StartServer()runs an initialFetchAPI()call before the HTTP server starts, so the in-memory cache is populated from the first request onward. -
Concurrent API requests: Four goroutines fetch artists, relations, locations and dates at the same time, each sending its result over its own channel.
-
Synchronization: A
selectstatement waits on all four channels until every goroutine has reported back. -
Validation: The server checks request errors, response status codes and empty API responses before touching the cache.
-
Caching: Once all four fetches succeed, the results replace the in-memory cache (
artists,relations,locations,dates) that every handler reads from. -
Background refresh: A separate goroutine calls
FetchAPI()again everySyncInterval(10 minutes) usingtime.Tick, refreshing the cache without blocking requests. -
Route setup:
SetupRoutes()registers the page, JSON, filter and static-file handlers. -
Rendering: Go templates generate the home, details and error pages.
-
Filtering: The server filters artists by creation year, first album year, member count and location.
-
Quick View: JavaScript requests selected artist data as JSON and fills the side panel.
-
Search: The server filters artist names and JavaScript displays live suggestions.
-
Concert display: Relation data connects each location with its concert dates.
-
Map: The browser geocodes concert locations and places markers on a Leaflet map.
- Backend: Go 1.22.2
- Backend packages: Go standard library only
- Frontend: HTML, CSS and JavaScript
- Templates:
html/template - HTTP server:
net/http - JSON:
encoding/json - Map: Leaflet with OpenStreetMap tiles
- Geocoding: Nominatim OpenStreetMap search service
- Concurrency: Goroutines, channels and
select - Caching: In-memory package-level cache, refreshed on a
time.Tickinterval
The Go backend uses only standard-library packages. Leaflet is loaded in the browser for the map interface.
Artists, relations, locations and dates are independent API requests, so FetchAPI() starts four goroutines to fetch them concurrently instead of one after another.
Each goroutine sends its result over its own channel. A select statement inside FetchAPI() reads from all four channels in a loop until every goroutine has reported back — this is the fan-in pattern: several producers, one consumer collecting all of them before moving on.
The results are only written to the package-level artists, relations, locations and dates variables once all four fetches succeed. Every HTTP handler reads from these variables instead of calling the external API directly, which makes them an in-memory cache.
This cache is not static: StartServer() populates it once at startup, then launches a background goroutine that calls FetchAPI() again on a fixed interval (time.Tick(SyncInterval), currently 10 minutes). This periodic cache refresh keeps the data reasonably up to date without slowing down individual requests or hitting the external API on every page load.
Run all tests:
go test ./...Run tests with detailed output:
go test -v ./...Run tests with Go's race detector (If it passes with no race warnings it means the goroutine is safe):
go test -race ./...The test suite covers:
- Successful routes.
- Invalid routes.
- Invalid IDs and page numbers.
- Wrong HTTP methods.
- Search and suggestion responses.
- Quick View JSON data.
- Location and concert counts.
- Artist details rendering.
- Model data structures.
- Main server success and error behavior.
# Build the application
go build -o groupie-tracker ./cmd
# Run the compiled application
./groupie-tracker🌐 The site is live on: Open Groupie Tracker
Charles Newman | cnewman | Cohort 2.3 | Zone01 Athens
Pavlos Avgerinos | pavgerin | Cohort 2.3 | Zone01 Athens
Nikos Antoniou | nantoniou | Cohort 2.3 | Zone01 Athens
Completed as part of the Zone01 Athens curriculum — Cohort 2.3.