Banner: Launching Lombardi Starter: A Template for Football Teams

πŸ‡ΊπŸ‡Έ Launching Lombardi Starter: A Template for Football Teams

Published at: 6/20/2020

In the last couple of weeks, I decided to work on a project that has been on my head for some time now (almost a decade 😱 - since the early days of the Taubaté Big Donkeys).

When I was still involved with the team, we had our website to share announcements, promote the team and our sponsors and use it as a tool to grow our audience. For the best part of this time, we used WordPress with a few tweaks in the theme to adjust it to our look and feel.

We didn't have any optimizations in the WordPress schema to better suit our needs, we just created new pages and plugins, and hard-coded the data where we needed them. However, this is a long and tedious process and made me wonder. Why not flex those developer skills and build a starter template that already provides some custom plugins that are useful for a football team website? Enter Lombardi Starter 🏈.

Logo Lombardi Starter

Features

I decided to keep the starter simple while providing some of the basic functionalities that an amateur football team needs from their site. Another important thing was to enable users to extend it in an easy way.

While extending it isn't something that anyone can do (at this time), someone with some programming experience can customize the look and feel, tweak the plugins or create new functionalities with ease, relying on the current CMS integration.

Lombardi starter home page

So, let's get down to the features included in the starter:

πŸ“ Blog

I think this is the number 1 feature that we're looking for: a blogging mechanism. In the Lombardi Starter 🏈, the editors can write and publish the posts through the CMS interface. Which gives good flexibility since they don't need to touch a single line of code to achieve that.

The blog already comes with a comments system integration using Disqus.

Lombardi Starter: Example blog post

πŸ“§ Contact

If blogging is the number 1 feature, the number 2 is definitely having a contact form. The contact form is powered by Formspree, and all the user has to do is to create their account and add their token to the lombardi.config.js file.

πŸ›  Widgets

The list of pre-configured widgets on the CMS includes:

  • recent matches

  • standings

  • site navigation

  • main banner

  • social profiles

Lombardi Starter: Recent Matches widget

πŸ€– CMS Integration

The starter comes with a CMS integration out-of-the-box. The chosen one is Netlify CMS. From the CMS you will be able to edit the blog posts, edit the content of some institutional pages like "about us", "players list", "schedule", and the widget's contents.

🧩 Extensible

The choice for a CMS was made to enable the users to extend the site functionality as easily as possible. Netlify provides great documentation on how you can add your own custom widgets there.

Customization

The Lombardi Starter 🏈 is easily editable. Through the lombardi.config.js file you can edit the team name, contact information, and a few other settings.

To edit the colors, fonts, spacing, and other visual elements you can customize the tailwind.config.js file. To understand which options are available, check the Tailwind CSS documentation.

The tech stack

  • Gatsby: the base framework for the frontend application

  • Tailwind CSS: the CSS framework

  • Styled-components: the CSS solution to customize components. You can also extend the Tailwind classes using it.

There are a few Gatsby plugins that provide some helpful integration: gatsby-image, gatsby-plugin-google-analytics, typography + react-typography.

Demo

You can access a DEMO version of the Lombardi Starter 🏈 by clicking here.

The GitHub repo can be found here.

Roadmap

This is just the initial release of the starter, there are a few extra features planned for the future:

  • support multiple leagues

  • manage player data

  • manage practices and tryouts

  • add internationalization

  • and much more!

Contributions

Contributions are more than welcome. If you find a bug, want to see any features added, or want to discuss other ideas, just reach out to me through the GitHub repo, and let's work together.