0

Building a course landing page with NextJS and React

 1 year ago
source link: https://dev.to/github20k/building-a-course-landing-page-with-nextjs-and-react-56kc
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK