Free React landing page template

#react #opensource #webdev #javascript

Introduction

As you may have already guessed from the title, I'm going to go over my most recent React landing page template.

I have published my first open source library just a while ago, and you guys seemed to have loved it. As a token of appreciation, I'm posting about my second project.

Limited templates

React resources and landing page templates as a whole, are quite difficult to find on the internet, especially the ones that are not outdated or don't have a performance issue.

For that reason, I have used some of the most popular libraries to create this project. Including, but not limited to, ant design and styled-components for developing the UI, i18next for localization and react-reveal for making some subtle animations, I know this might sound a lot, but I plan on expanding this project in the future.

Google Lighthouse

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

Features

Landy is a free React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project. This project is also great for beginner developers, who are learning React or Frontend Development in general, as you are going to come across some of the most basic principles in this project.

This React template comes with multi-lingual support, smooth animations, contact form built with React Hooks and error validations, set of ready to use sections and most importantly, all of the content is stored in the JSON files, so that you can manage the texts and images without having any prior knowledge in React.js.

What's included?

🎁 Modern – Template created using the latest features of React (State management using Hooks, Code-Splitting to reduce the bundle size)

🏷 Responsive – Highly responsive and reusable UI components, that change depending on the provided props

🚀 Fast – Buttery smooth experience thanks to the implementation of best practices and no third party dependencies, resulting in PERFECT Google Lighthouse scores

🌍 Internationalization - Prebuilt standalone file that works in every environment and doesn't require reloading the page to translate the content

🛸 Routing - Each file inside the src/pages directory will generate its own route, so you don't have to manually handle the routing

🤙 Contact Form - Contact form written in React Hooks, with uncontrolled form validation to reduce unnecessary performance penalty. You just need to provide the endpoint

⚙️ Maintenance - All of the content is stored in the JSON files, so that you can easily manage the content of the website

About the project

You can view the live demo or check the source code.

Top comments (17)

frank martinez • Nov 28 '20

Well done Lasha.

It's odd how few LP templates are available for React; yet CRA is where founders I work with often start, to build their first products. And then they get stuck because CRA doesn't offer any opinions on setting up CTAs, testing workflows, collecting emails.

Lasha Kakabadze • Nov 28 '20 • Edited

You are absolutely correct.

This is an initial landing page I created in just a few days, since as you mentioned, there are only a few free LP templates available on the internet.

It's stil far from perfect, so I plan on expanding it in the future, adding some additional functionalities and sections, so that the startups can grow their business quicker.

hellosfo • Dec 31 '20

Great job Lasha,
i clone the repo to my vscode..
After npm start:
missing script:start
?? what i'm doing wrong?
can you do a tut about Templete for JS beginners...you may wanna start a youtube channel ...you be a great teach..!!

hellosfo • Dec 31 '20

medium.com/javascript-training/int...

some things like that will be good..
Thanks

Jon Randy 🎖️ • Nov 27 '20 • Edited

Looks like a prime example of the type of page/site that doesn't need React if I ever saw one

Lasha Kakabadze • Nov 27 '20

You don't have to limit this template to a landing page, you can also expand it to add more content, implement lazy-loading, add more pages with your needs using built in, declarative routing.