DEV Community

Cover image for Building a course landing page with NextJS and Tailwind
Nevo David Subscriber for Gitroom

Posted on • Updated on

Building a course landing page with NextJS and Tailwind

TL;DR

I have been working for Novu over the last year and have gained crazy growth
Can you believe that we got 20,000 stars in just one year? 🀩

It got me thinking about how to help other people grow their GitHub libraries, so I created the GitHub 20k course.

But that's boring. The important part is that I open-sourced it
https://github.com/github-20k/super-star

And I want to tell you how I did it :)

The office I did it

Architecture

First, I had to decide about the tech. I wanted to make it as easy as possible for any developer to use it for their personal use.

So I decided to go for NextJS because I can use NextJS backend - instead of a separate project or a mono repo.

And also with Tailwind so that CSS won't be necessary.

There is no database, everything is stored in JSONs, and I created multiple providers so people could make what they need for themselves or contribute to the project.

The flow

I wanted to make the easiest possible way to create a sales page.

So all we have is three stages.

  1. You go to the sales page
  2. You go to a checkout
  3. you trigger multiple services

UML

When I completed it, I said, why not have a blog?
So I added a blog based on headless WordPress, but I wrapped everything up so you can use any other service such as Sanity.

When you go to the blog, you can see it was not a designer that made it 🀣

I actually used ChatGPT to draw some grids because I am so bad with them.

Blog

Design

One of the hardest things to find usually is, designers.
There are many, but most of their work usually looks the same.
I had to scan Dribbble many times to find something I liked.

Design

Some might say it could be more graphical, and people can't focus on the page's content, but I like it.

I like it

If you want to use the landing page and are not sure how, just read the docs, made with Docusaurus

Can you help me out?

I have been working super hard to make it available for everyone needing a landing page. I love this community so much ❀️
Be a friend, and help me with a star
https://github.com/github-20k/super-star

Check also How to get GitHub stars

Top comments (11)

Collapse
 
mikekamilos profile image
Michael Kamilos

Awesome work!

Collapse
 
jeffsalive profile image
Jeffrey Nwankwo

Welcome to the Community Michael! We are glad to have you here.

Collapse
 
nevodavid profile image
Nevo David

Thank you so much!

Collapse
 
chukshon profile image
Honour

Nice work

Thread Thread
 
nevodavid profile image
Nevo David

Thank you =)

Collapse
 
thekalderon profile image
Kwaku Duah

Nice one, I will check it out too, hope there's a great README attached..

Collapse
 
nevodavid profile image
Nevo David

There are also docs :)

Collapse
 
ghalbeyou profile image
Arash

πŸ‘great!

Collapse
 
webalb profile image
Gurama Auwal Umar

The great work

1

Collapse
 
hezronbwareng profile image
Hezron Bett

Just checked went through it, awesome work!

Collapse
 
prosperdev profile image
Chukwunonso prosper

This is nice