This repository contains different Frontend related resources like applications, examples, libraries, tools, etc.
| 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 |
| 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 |
| 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 |
| Navigator Clipboard API Integration Guide | Delve into our detailed guide to integrate the Navigator Clipboard API into your web applications. Learn to implement seamless content sharing through copying text, images, and HTML directly to the clipboard, enhancing user experience and productivity. | Clipboard API, JavaScript, HTML5, User Experience, Frontend Development, Interactivity, Content Sharing, Web Standards, Accessibility, CSS3 |
| 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 |
| The Ultimate React State Management Framework | This article presents a step-by-step framework will lead you to make informed decisions, ensuring your app is both robust and maintainable. Let's enhance your tech stack! | React, State Management, Framework, Best Practices, Frontend |
| 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 |
| 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 |
| The Ultimate React State Management Framework | This article presents a step-by-step framework will lead you to make informed decisions, ensuring your app is both robust and maintainable. Let's enhance your tech stack! | React, State Management, Framework, Best Practices, Frontend |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| Name | Description | Keywords |
|---|---|---|
| NextJS with SWR | This example shows how to use SWR with NextJS for data fetch and mutate. | NextJS, SWR, React, TypeScript |
| Name | Description | Keywords |
|---|---|---|
| React Native with expo router | This example shows how to use expo router with React Native. | React Native, Expo, React |
| React Native with expo router and shared routes | This example shows how to use expo router with React Native and shared routes. | React Native, Expo, React |
| Name | Description | Keywords |
|---|---|---|
| Navigator Clipboard API Integration Guide | Delve into our detailed guide to integrate the Navigator Clipboard API into your web applications. Learn to implement seamless content sharing through copying text, images, and HTML directly to the clipboard, enhancing user experience and productivity. | Clipboard API, JavaScript, HTML5, User Experience, Frontend Development, Interactivity, Content Sharing, Web Standards, Accessibility, CSS3 |
- 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.
Made with contributors-img.