Players Club: A Free Astro Template for Showcasing Music Artists

I’ve been wanting to experiment with Astro for a while, and this little project gave me the perfect opportunity. Players Club is a proof of concept born from a collaboration with Alex Tkachev, whose Dribbble shot served as the foundation for the design and animations. He not only gave me permission to use it but also provided invaluable feedback throughout the process.

Built with Astro 5.2, this was a fantastic learning experience for me, and I hope you find it useful, too!

Why Astro?

I wanted to give Astro a try because of its growing popularity among developers, and the experience has been fantastic. Astro’s hybrid approach makes it easy to build fast, static sites while incorporating animations and dynamic content where needed. Its content collections and View Transitions API offer powerful yet straightforward tools for structuring and animating content without adding unnecessary complexity.

What this experiment includes

This experiment presents music artists in a grid view. Clicking on an artist takes you to their dedicated page, where you can explore their genre, albums, and details. Each album also has its own page, because I wanted to add another level in the navigation experience.

Some key features

• Content Collections & Content Layer API – Manages artists and albums with structured Markdown data.
• Full-Site View Transitions (SPA Mode) – Utilizes Astro’s View Transitions API for a seamless navigation experience.
• GSAP for Animations – Adds smooth micro-interactions and motion effects.
• Lenis for Smooth Scrolling – Enhances scrolling for a polished feel.
• Astro SEO Integration – Optimizes metadata and structured data for better search visibility.
• Fontsource for Fonts – Simplifies typography management.
• Astro Sitemap – Although not a large multi-page site, a sitemap is included for completeness.

UI & Interaction Details

• Preloading: The homepage images are preloaded using imagesLoaded, ensuring a smooth entry effect as they animate in one by one.
• Global image fade-in: On non-homepage pages, images fade in only after loading, for better perceived performance and user experience.
• Sort, shuffle, and search features: A simple proof-of-concept allows users to dynamically reorder, search/filter the artist grid.

File Structure

Here’s a quick overview of the core structure:

.
├── astro.config.mjs
├── package.json
├── public
│   ├── images
│   │   ├── albums
│   │   ├── artists
│   └── playersclub-og.jpg
├── src
│   ├── components
│   │   ├── AlbumCard.astro
│   │   ├── ArtistCard.astro
│   │   ├── Preloader.astro
│   │   ├── SmoothScroll.astro
│   │   └── Tooltip.astro
│   ├── pages
│   │   ├── [artist_id].astro
│   │   ├── [artist_id]/albums/[album_id].astro
│   │   ├── index.astro
│   │   ├── history.astro
│   │   ├── releases.astro
│   ├── scripts
│   │   ├── gridActions.js
│   │   ├── preloader.js
│   │   ├── smoothscroll.js
│   └── styles
│       └── global.css
└── tsconfig.json

And here are the main pages:

Give it a go!

I really enjoyed putting this project together, and it’s been a fun way to explore what Astro can do. If you’re also experimenting with Astro or just curious, feel free to check it out, play around with it, or modify it for your own projects. Keep in mind that this is result of my learning experience and that many things can be improved here. Components can be laid out way better here and I’m sure you could streamline the styling with Tailwind CSS, if that’s your thing. As always, I’m happy to receive your pull requests!

I’d love to hear your thoughts or see what you do with it! Did you use Astro already? Would love to hear your opinion and what you’ve built with it!