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 🏈.
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.
So, let's get down to the features included in the starter:
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.
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
The list of pre-configured widgets on the CMS includes:
🤖 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.
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.
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:
You can access a DEMO version of the Lombardi Starter 🏈 by clicking here.
The GitHub repo can be found here.
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
and much more!
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.