Skip to content

nanlabs/frontend-reference

Repository files navigation

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 robust boilerplate for starting React projects with Vite, featuring CI/CD setup, Docker integration, hot reload for development, and production-ready optimizations. React, Boilerplate, Vite, CI/CD, Docker
Storybook Playground An application showcasing examples of React components, hooks, and libraries developed in the Nancy.js repository. It serves as a playground for testing and demonstrating these features using Storybook. React, Storybook, Nancy.js, Component Library
TypeScript Monorepo Boilerplate A boilerplate for creating TypeScript monorepo projects using Turborepo, with support for NPM workspaces, Changesets, and a complete development setup. TypeScript, Turborepo, Monorepo, Boilerplate, React, NPM Workspaces, Changesets, ESLint, Prettier, Jest, Nest.js, Storybook

Node Packages

Name Description Keywords
@nanlabs/eslint-config A shared ESLint configuration to enforce consistent coding standards across JavaScript projects. ESLint, Code Style, JavaScript
@nanlabs/eslint-config-next An ESLint configuration designed for Next.js projects, ensuring adherence to best practices and consistent coding standards. ESLint, Next.js, TypeScript, Code Style
@nanlabs/eslint-config-react An ESLint configuration optimized for React projects, promoting best practices and consistent code style. ESLint, React, TypeScript, Code Style
@nanlabs/eslint-config-ts An ESLint configuration tailored for TypeScript projects, ensuring consistent and error-free TypeScript code. ESLint, TypeScript, Code Style
@nanlabs/fp A TypeScript library offering functional programming utilities, including type guards, error handling, and other tools to write cleaner, more maintainable code. Functional Programming, TypeScript, Utilities, Error Handling
@nanlabs/react-hooks A collection of reusable React hooks designed to simplify state management, side effects, and other common patterns in React applications. React, Hooks, Custom Hooks, State Management
@nanlabs/react-thirdparty A React library offering components that integrate with third-party services like Google ReCaptcha, enabling seamless external integrations. React, Components, Third-Party Integrations, Google ReCaptcha
@nanlabs/react-ui A comprehensive library of React components designed to accelerate UI development with a consistent design system. React, Components, UI, Design System, Reusable
@nanlabs/thirdparty A utility library providing tools for integrating third-party services into web applications, including support for APIs like Google ReCaptcha. Third-Party Tools, Integrations, Web Development

Guides, Tutorials and Best Practices

Name Description Keywords
Comparative Analysis between styled-components and Tailwind CSS An article presenting a comparative analysis of styled-components and Tailwind CSS, focusing on practical implementations of a UI challenge using both libraries. CSS, styled-components, Tailwind CSS, UI Challenge
Navigator Clipboard API Integration Guide A detailed guide to integrating the Navigator Clipboard API into web applications for seamless content sharing and enhanced user experience. Clipboard API, Integration, User Experience
React Router Types Guide A guide comparing BrowserRouter, HashRouter, and MemoryRouter with practical React Router usage snippets and deployment/testing caveats. React, React Router, Routing, BrowserRouter, HashRouter, MemoryRouter
React Security Best Practices Guide A checklist providing React security best practices to identify and address security issues, with guidance on automating security testing. React, Security, Best Practices, Automated Testing
Supercharge Your Website with Core Web Vitals A guide to optimizing website performance and SEO using Core Web Vitals, with practical tips and tools for delivering exceptional user experiences. Core Web Vitals, SEO, Performance, User Experience
The Ultimate React State Management Framework An article presenting a step-by-step framework for making informed decisions in React state management, ensuring robust and maintainable applications. React, State Management, Framework, Best Practices

Examples

Frontend

Website Optimization and Performance

Name Description Keywords
Supercharge Your Website with Core Web Vitals A guide to optimizing website performance and SEO using Core Web Vitals, with practical tips and tools for delivering exceptional user experiences. Core Web Vitals, SEO, Performance, User Experience

React State Management

Name Description Keywords
AgileTs An example showcasing the use of AgileTs for scalable and maintainable state management in React applications. React, AgileTs, State Management
Akita An example illustrating the use of Akita for state management in React applications. React, Akita, State Management
Context An example showcasing the use of React Context to share data between components efficiently. React, Context API, State Management
Effector An example showcasing the use of Effector for reactive state management in React applications. React, Effector, State Management
Global State An example illustrating how to implement a global state using React Hooks for centralized state management. React, Global State, State Management
Hookstate An example demonstrating the use of Hookstate for efficient and scalable state management in React applications. React, Hookstate, State Management
Jotai An example illustrating the use of Jotai for atomic state management in React applications. React, Jotai, State Management
MobX An example demonstrating the use of MobX for bidirectional state management in React applications. React, MobX, State Management
MobX State Tree An example illustrating the use of MobX State Tree for bidirectional state management in React applications. React, MobX State Tree, State Management
NextJS with SWR An example demonstrating the use of SWR with NextJS for efficient data fetching and mutation. NextJS, SWR, React, Data Fetching
Prop Drilling An example demonstrating how to pass data from a parent component to a child component using props in React. React, Props, State Management
React Easy State An example demonstrating the use of React Easy State for bidirectional state management in React applications. React, React Easy State, State Management
React Query An example demonstrating the use of React Query for efficient data fetching and caching in React applications. React, React Query, Data Fetching
Recoil An example demonstrating the use of Recoil for efficient state management in React applications. React, Recoil, State Management
Redux Toolkit An example demonstrating the use of Redux Toolkit for unidirectional state management in React applications. React, Redux Toolkit, State Management
Rematch An example showcasing the use of Rematch for unidirectional state management in React applications. React, Rematch, State Management
Rxjs An example demonstrating the use of Rxjs for reactive programming and state management in React applications. React, Rxjs, Reactive Programming
Storeon An example showcasing the use of Storeon for lightweight state management in React applications. React, Storeon, State Management
SWR An example showcasing the use of SWR for efficient data fetching and caching in React applications. React, SWR, Data Fetching
Teaful An example showcasing the use of Teaful for lightweight and simple state management in React applications. React, Teaful, State Management
The Ultimate React State Management Framework An article presenting a step-by-step framework for making informed decisions in React state management, ensuring robust and maintainable applications. React, State Management, Framework, Best Practices
Unistore An example illustrating the use of Unistore for unidirectional state management in React applications. React, Unistore, State Management
Valtio An example showcasing the use of Valtio for bidirectional state management in React applications. React, Valtio, State Management
XState An example illustrating the use of XState for managing state with finite state machines in React applications. React, XState, State Management
Zustand An example illustrating the use of Zustand for unidirectional state management in React applications. React, Zustand, State Management

Microfrontend

Name Description Keywords
Microfrontend with Shared React Router and React Application An example demonstrating a microfrontend project with shared React Router in a container application and independent React application. React, Microfrontend, Shared Router, Integration
Microfrontend with Shared React Router and React Components An example showcasing a microfrontend project with shared React Router and React components for seamless integration. React, Microfrontend, Shared Router, Integration
Microfrontend with Shared React Router and Vue Application An example showcasing a microfrontend project with shared React Router in a container application and independent Vue application. React, Vue, Microfrontend, Shared Router, Integration

Styling and CSS

Name Description Keywords
Comparative Analysis between styled-components and Tailwind CSS An article presenting a comparative analysis of styled-components and Tailwind CSS, focusing on practical implementations of a UI challenge using both libraries. CSS, styled-components, Tailwind CSS, UI Challenge

Virtual Dom

Name Description Keywords
Proof of Concept: Million, The Virtual DOM Replacement for React. A proof of concept showcasing Million as a virtual DOM replacement for React, with comparative performance analysis. React, Million, Virtual DOM, Performance

Security Best Practices

Name Description Keywords
React Security Best Practices Guide A checklist providing React security best practices to identify and address security issues, with guidance on automating security testing. React, Security, Best Practices, Automated Testing

NextJs

Name Description Keywords
NextJS with SWR An example demonstrating the use of SWR with NextJS for efficient data fetching and mutation. NextJS, SWR, React, Data Fetching

React Native

Expo
Name Description Keywords
React Native with expo router An example demonstrating the use of expo router for efficient navigation in React Native applications. React Native, Expo, Navigation
React Native with expo router and shared routes An example showcasing the use of expo router with shared routes for seamless navigation in React Native applications. React Native, Expo, Shared Routes

Clipboard Integration

Name Description Keywords
Navigator Clipboard API Integration Guide A detailed guide to integrating the Navigator Clipboard API into web applications for seamless content sharing and enhanced user experience. Clipboard API, Integration, User Experience

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.

About

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

Topics

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

Sponsor this project

Packages

Used by

Contributors

Languages