Skip to content

Latest commit

 

History

History
164 lines (126 loc) · 27.4 KB

README.md

File metadata and controls

164 lines (126 loc) · 27.4 KB

Frontend Reference

Changelog | Contributing

Awesome Continious Integration License: MIT

This repository contains different Frontend related resources like applications, examples, libraries, tools, etc.

Contents

Apps and Boilerplates

Name Description Keywords
React Boilerplate A simple but powerful boilerplate to start a React project powered by Vite. Boilerplate generated using create-awesome-node-app contains full CI/CD setup with GitHub Actions and Docker. It also contains a full local development setup with hot reload and production ready setup with minification and optimization. It also contains a full test setup with Jest and React Testing Library. React
Storybook Playground This app was created with the goal to have examples of ours React components, hooks and libraries that are created in different packages in the repository Nancy.js. React, Storybook, Nancy.js
TypeScript Monorepo Boilerplate A simple but powerful boilerplate to start a TypeScript monorepo project powered Turborepo. TypeScript, Turborepo, Monorepo, Boilerplate, React, NPM Workspaces, Changesets, ESLint, Prettier, Jest, Nest.js, Storybook

Node Packages

Name Description Keywords
@nanlabs/eslint-config This eslint config is used in our projects to enforce a consistent code style. ESLint
@nanlabs/eslint-config-next This eslint config is used in our projects to enforce a consistent code style for Next.js projects. ESLint, Next.js, TypeScript
@nanlabs/eslint-config-react This eslint config is used in our projects to enforce a consistent code style for React projects. ESLint, React, TypeScript
@nanlabs/eslint-config-ts This eslint config is used in our projects to enforce a consistent code style for TypeScript projects. ESLint, TypeScript
@nanlabs/fp This library provides a set of tools to help you write functional code in TypeScript. It includes tools for type guards, error handling, and more! Functional Programming, TypeScript
@nanlabs/react-hooks This package contains different React hooks that can be used in different projects. React, Hooks, Custom Hooks
@nanlabs/react-thirdparty This library provides a set of React components that can be used in any React application. It provides integrations with third party libraries like Google ReCaptcha and more! React, Components, UI, Design System, Third Party
@nanlabs/react-ui This library provides a set of React components that can be used in any React application React, Components, UI, Design System
@nanlabs/thirdparty This library provides a set of tools that can be used in any web application. It provides integrations with third party libraries like Google ReCaptcha and more! Third Party

Guides, Tutorials and Best Practices

Name Description Keywords
Comparative Analysis between styled-components and Tailwind CSS Article that presents a comparative analysis of styled-components and Tailwind CSS, focusing on practical implementations of a UI Challenge using both libraries. styled-components, Tailwind CSS, CSS, CSS-in-JS, Analysis
React Security Best Practices Guide This checklist provides React security best practices to assist you and your team in identifying and addressing security issues within your React applications. Additionally, it includes guidance on how to automate security testing for your React code and automatically remedy any security-related issues. React, Security, Best Practices, Frontend, Automated Testing, Security Issues
Supercharge Your Website with Core Web Vitals Learn how to optimize your website's performance and improve SEO using Core Web Vitals. Discover the key metrics, tools, and techniques to deliver an exceptional user experience. Core Web Vitals, SEO, Website Performance, User Experience, Google PageSpeed Insights, Lighthouse, Web Vitals Extension

Examples

Frontend

Website Optimization and Performance

Name Description Keywords
Supercharge Your Website with Core Web Vitals Learn how to optimize your website's performance and improve SEO using Core Web Vitals. Discover the key metrics, tools, and techniques to deliver an exceptional user experience. Core Web Vitals, SEO, Website Performance, User Experience, Google PageSpeed Insights, Lighthouse, Web Vitals Extension

React State Management

Name Description Keywords
AgileTs This example shows how to use AgileTs to manage state. React, AgileTs
Akita This example shows how to use Akita to manage state. React, Akita
Context This example shows how to use React Context to share data between components. React
Effector This example shows how to use Effector to manage state. React, Effector
Global State This example shows how to use a global state using React Hooks. React
Hookstate This example shows how to use Hookstate to manage state. React
Jotai This example shows how to use Jotai to manage state. React, Jotai
MobX This example shows how to use MobX to manage state. React, MobX
MobX State Tree This example shows how to use MobX State Tree to manage state. React, MobX State Tree
NextJS with SWR This example shows how to use SWR with NextJS for data fetch and mutate. NextJS, SWR, React, TypeScript
Prop Drilling This example shows how to pass data from a parent component to a child component using props. React
React Easy State This example shows how to use React Easy State to manage state. React, React Easy State
React Query This example shows how to use React Query to fetch data from an API. React, React Query
Recoil This example shows how to use Recoil to manage state. React, Recoil
Redux Toolkit This example shows how to use Redux Toolkit to manage state. React, Redux Toolkit
Rematch This example shows how to use Rematch to manage state. React, Rematch
Rxjs This example shows how to use Rxjs to manage state. React, Rxjs
Storeon This example shows how to use Storeon to manage state. React, Storeon
SWR This example shows how to use SWR to fetch data from an API. React, SWR
Teaful This example shows how to use Teaful to manage state. React
Unistore This example shows how to use Unistore to manage state. React, Unistore
Valtio This example shows how to use Valtio to manage state. React, Valtio
XState This example shows how to use XState to manage state. React, XState
Zustand This example shows how to use Zustand to manage state. React, Zustand

Microfrontend

Name Description Keywords
Microfrontend with Shared React Router and React Application project that demonstrates the usage of a shared router in a container application made with React and an independent application made with React and Vite React, Vue, Module federation, Vite, Webpack, Shared router, Microfrontend
Microfrontend with Shared React Router and React Components This example has a microfrontend project that demonstrates the usage of a shared router in a React application React, Vue, Module federation, Vite, Webpack, Shared router, Microfrontend
Microfrontend with Shared React Router and Vue Application This example has a microfrontend project that demonstrates the usage of a shared router in a container application made with React and an independent application made with Vue and Vite React, Vue, Module federation, Vite, Webpack, Shared router, Microfrontend

Styling and CSS

Name Description Keywords
Comparative Analysis between styled-components and Tailwind CSS Article that presents a comparative analysis of styled-components and Tailwind CSS, focusing on practical implementations of a UI Challenge using both libraries. styled-components, Tailwind CSS, CSS, CSS-in-JS, Analysis

Virtual Dom

Name Description Keywords
Proof of Concept: Million, The Virtual DOM Replacement for React. This is a POC that shows how to use Million and comparative analysis of Performance between Million and React. Performance, React, Virtual Dom, Rendering, Million

Security Best Practices

Name Description Keywords
React Security Best Practices Guide This checklist provides React security best practices to assist you and your team in identifying and addressing security issues within your React applications. Additionally, it includes guidance on how to automate security testing for your React code and automatically remedy any security-related issues. React, Security, Best Practices, Frontend, Automated Testing, Security Issues

NextJs

Name Description Keywords
NextJS with SWR This example shows how to use SWR with NextJS for data fetch and mutate. NextJS, SWR, React, TypeScript

Contributing

  • Contributions make the open source community such an amazing place to learn, inspire, and create.
  • Any contributions you make are truly appreciated.
  • Check out our contribution guidelines for more information.

Contributors

Made with contributors-img.