Arsentau/frontend-reference

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

Frontend Reference

Changelog | Contributing

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

Contents

• Apps and Boilerplates

• Node Packages

• Examples

  • Frontend
    • Website Optimization and Performance
    • React State Management
    • Microfrontend
    • Styling and CSS
    • Virtual Dom
    • Security Best Practices
    • NextJs

• Contributing

• Contributors

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

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
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.