- Lightning Rails
- Posts
- Building a Rails mini-app with Lightning Rails: Setup, branding and landing page (1/3)
Building a Rails mini-app with Lightning Rails: Setup, branding and landing page (1/3)
Follow me as I build GitGarden with Lightning Rails Boilerplate
Daniel Rodriguez
November 14, 2024
If you haven’t read it yet, check out my latest article From paper to product: How I turn an idea into a product that sells.
In this article series, I will take you on a step by step journey towards building Git Garden.
A mini-app that allows GitHub users to turn their activity into a beautiful visualization where each commit grows unique trees based on their programming languages. Because let's face it, our code deserves better than just being a green square on a calendar!
Let’s start building!
1. Project Setup
First and foremost I will clone the repository, give it a new name, and complete the few lines of setup available in the Lightningrails documentation.
I can now open my development environment at https://localhost:8000
and see the default LightningRails Landing page:
Default LightningRails project Banner
2. Choose a theme
Before LightningRails and its integration with DaisyUI I would spend hours creating a brand, choosing colors and fonts, for a project that might never see the light of day.
Now I choose from a theme library and skip the hassle:
DaisyUI themes available in Lightning Rails
My app will be themed around Forests, did you spot it? There is a Forest Theme 🌲!
I just need to change the theme on the application.html.erb
<html data-theme="forest">
And Voila!
Lightning Rails Banner with new Forest theme from DaisyUI
3. Logo
In the same mindset as not spending hours working on a brand. Let’s create a quick Logo with Logo Fast, Marc Lou’s Logo maker.
New Logo in dark
New Logo in Light
This took me literally 40 seconds.
Logos don’t add any value to the user in an MVP so I won’t spend more time than this. Time to add it to my project:
mv ~danielrodriguez/Desktop/icon-dark.png app/assets/images
The new logo on my navbar
What do you think? Not bad for a 2 mins setup no?
4. Landing Page Copy
Before jumping into this app, I did my homework and turned an idea into an actual pitch.
Here is the Pitch:
For: Web Developers using Github
Who need: To show their skills
And Want to: Do it in a fun and visual way
They Choose: GitGarden
Because: They will grow a beautiful garden of trees assigned to different coding languages at every github contribution which can be embedded in their portfolio website.
Unlike: sharing a simple github link
I can then turn this pitch into the “perfect” Landing page copy 🤝
But before that, let’s create a cool illustration for the banner. For this, I will prompt Chat GPT to create isometric illustrations and combine them on canva.com.
Prompt for getting illustrations
Combining a few examples of trees on Canva:
Adding trees together
If you don’t have Canva Pro, you can remove the backgrounds with remove.bg.
Here is the result of my 20 mins landing page:
V1 landing page for Git Garden
In the next Article, we will jump into building the actual code and logic. The last article will handle the launch of the app and it’s first days promoting it.
Stay tuned!
Reply