Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adrinlol/landy-react-template
Landy is an open-source React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project.
https://github.com/adrinlol/landy-react-template
boilerplate boilerplate-template landy react react-boilerplate react-template reactjs styled-components typescript
Last synced: 25 days ago
JSON representation
Landy is an open-source React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project.
- Host: GitHub
- URL: https://github.com/adrinlol/landy-react-template
- Owner: Adrinlol
- License: mit
- Created: 2020-07-11T20:10:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-01T02:52:05.000Z (3 months ago)
- Last Synced: 2024-10-15T10:21:25.735Z (25 days ago)
- Topics: boilerplate, boilerplate-template, landy, react, react-boilerplate, react-template, reactjs, styled-components, typescript
- Language: TypeScript
- Homepage: https://landy-web.netlify.app/
- Size: 1.01 MB
- Stars: 1,289
- Watchers: 16
- Forks: 464
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
![landy](https://user-images.githubusercontent.com/48876996/121569479-e179db80-ca31-11eb-8a48-9c3de9b142f3.gif)
![Landy React Template License](https://img.shields.io/github/license/Adrinlol/landy-react-template)
![Landy React Template Release Date](https://img.shields.io/github/release-date/Adrinlol/landy-react-template)
![Landy React TemplateStars](https://img.shields.io/github/stars/Adrinlol/landy-react-template)
![Landy React Template Language](https://img.shields.io/github/languages/top/Adrinlol/landy-react-template)
![Landy React Template TypeScript](https://badgen.net/npm/types/tslib)## Free React landing page template
[Landy][Landy] is an open-source React landing page template written in TypeScript, designed for developers and startups, who want to create a quick and professional landing page for their business or project.
This React template comes with multi-lingual support, smooth animations, 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 without having any prior knowledge in React.js.
## Table of contents
- [Features](#features)
- [Google Lighthouse](#google-lighthouse)
- [Performance](#performance)
- [Accessibility](#accessibility)
- [Best Practices](#best-practices)
- [SEO](#seo)
- [Demo](#demo)
- [Installation](#installation)
- [Special Thanks](#special-thanks)
- [Usage](#usage)
- [License](#license)## Features
Your project will have everything you need to build a modern single-page React app:
- π **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
- π· **TypeScript support** β Landy is written in TypeScript to improve the DX
- π **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
## Google Lighthouse
![1](https://user-images.githubusercontent.com/48876996/121569366-c313e000-ca31-11eb-940c-187f556ff0d6.png)
[Google Lighthouse][Google Lighthouse] is an open-source, automated tool for measuring the quality of web pages. Google Lighthouse audits performance, accessibility and search engine optimization of web pages.
### Performance
Audits for metrics like first paint and time to interactive to determine lag.
### Accessibility
Checks for common issues that may prevent users from accessing your content.
### Best Practices
Looks for everything from HTTPS usage to correct image aspect ratios.
### SEO
Checks for best practices to ensure your site is discoverable.
## Demo
Check the live demo here ποΈ https://landy-web.netlify.app/
### Installation
Youβll need to have Node 10.16.0 or later version on your local development machine (but itβs not required on the server). I recommend using the latest LTS version.
To create a new app, you have to:
Begin by cloning this repository to establish your own local copy. This process is straightforward and ensures you have all the necessary files and resources at your fingertips. You can find step-by-step instructions in this helpful article: Cloning a [repository on GitHub.com](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository#cloning-a-repository).
## What's included
- [antd][antd] - React UI library that contains a set of high quality components.
- [react-awesome-reveal][react-awesome-reveal] - High performance library that adds reveal animations using the Intersection Observer API.
- [styled-componets][styled-componets] - Variant on βCSS-in-JSββwhich solves many of the problems with traditional CSS.
- [i18next][i18next] - Internationalization-framework written in and for JavaScript.## Special thanks
[whoooa][whoooa] - Use fantastic, handmade illustrations with easily changeable colors and different styles.
## Usage
Use it for whatever you want, and be sure to reach out to me on [Twitter](https://twitter.com/Adrinlolx) if you have any questions, or build something cool with it.
## License
Licensed under the MIT license.
[antd]: https://github.com/ant-design/ant-design
[react-awesome-reveal]: https://www.npmjs.com/package/react-awesome-reveal
[styled-componets]: https://github.com/styled-components/styled-components
[i18next]: https://github.com/i18next/i18next
[whoooa]: https://www.whoooa.rocks/
[Landy]: https://www.npmjs.com/package/cra-template-adrinlol
[Google Lighthouse]: https://developers.google.com/web/tools/lighthouse