examples.json

{
  "$schema": "https://raw.githubusercontent.com/nanlabs/awesome-nan/main/examples.schema.json",
  "list": [
    {
      "name": "Storybook Playground",
      "description": "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.",
      "url": "https://github.com/nanlabs/nancy.js/tree/main/apps/playground/",
      "tags": ["Apps and Boilerplates"],
      "labels": ["React", "Storybook", "Nancy.js"]
    },
    {
      "name": "@nanlabs/react-hooks",
      "description": "This package contains different React hooks that can be used in different projects.",
      "url": "https://www.npmjs.com/package/@nanlabs/react-hooks",
      "tags": ["Node Packages"],
      "labels": ["React", "Hooks", "Custom Hooks"]
    },
    {
      "name": "@nanlabs/react-ui",
      "description": "This library provides a set of React components that can be used in any React application",
      "url": "https://www.npmjs.com/package/@nanlabs/react-ui",
      "tags": ["Node Packages"],
      "labels": ["React", "Components", "UI", "Design System"]
    },
    {
      "name": "@nanlabs/react-thirdparty",
      "description": "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!",
      "url": "https://www.npmjs.com/package/@nanlabs/react-thirdparty",
      "tags": ["Node Packages"],
      "labels": ["React", "Components", "UI", "Design System", "Third Party"]
    },
    {
      "name": "@nanlabs/thirdparty",
      "description": "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!",
      "url": "https://www.npmjs.com/package/@nanlabs/thirdparty",
      "tags": ["Node Packages"],
      "labels": ["Third Party"]
    },
    {
      "name": "@nanlabs/fp",
      "description": "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!",
      "url": "https://www.npmjs.com/package/@nanlabs/fp",
      "tags": ["Node Packages"],
      "labels": ["Functional Programming", "TypeScript"]
    },
    {
      "name": "@nanlabs/eslint-config",
      "description": "This eslint config is used in our projects to enforce a consistent code style.",
      "url": "https://www.npmjs.com/package/@nanlabs/eslint-config",
      "tags": ["Node Packages"],
      "labels": ["ESLint"]
    },
    {
      "name": "@nanlabs/eslint-config-ts",
      "description": "This eslint config is used in our projects to enforce a consistent code style for TypeScript projects.",
      "url": "https://www.npmjs.com/package/@nanlabs/eslint-config-ts",
      "tags": ["Node Packages"],
      "labels": ["ESLint", "TypeScript"]
    },
    {
      "name": "@nanlabs/eslint-config-react",
      "description": "This eslint config is used in our projects to enforce a consistent code style for React projects.",
      "url": "https://www.npmjs.com/package/@nanlabs/eslint-config-react",
      "tags": ["Node Packages"],
      "labels": ["ESLint", "React", "TypeScript"]
    },
    {
      "name": "@nanlabs/eslint-config-next",
      "description": "This eslint config is used in our projects to enforce a consistent code style for Next.js projects.",
      "url": "https://www.npmjs.com/package/@nanlabs/eslint-config-next",
      "tags": ["Node Packages"],
      "labels": ["ESLint", "Next.js", "TypeScript"]
    },
    {
      "name": "React Boilerplate",
      "description": "A simple but powerful boilerplate to start a React project powered by Vite. Boilerplate generated using [create-awesome-node-app](https://www.npmjs.com/package/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.",
      "url": "https://github.com/nanlabs/react-boilerplate",
      "tags": ["Apps and Boilerplates"],
      "labels": ["React"]
    },
    {
      "name": "TypeScript Monorepo Boilerplate",
      "description": "A simple but powerful boilerplate to start a TypeScript monorepo project powered Turborepo.",
      "url": "https://github.com/nanlabs/ts-monorepo-boilerplate",
      "tags": ["Apps and Boilerplates"],
      "labels": [
        "TypeScript",
        "Turborepo",
        "Monorepo",
        "Boilerplate",
        "React",
        "NPM Workspaces",
        "Changesets",
        "ESLint",
        "Prettier",
        "Jest",
        "Nest.js",
        "Storybook"
      ]
    },
    {
      "name": "Supercharge Your Website with Core Web Vitals",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/seo-and-core-web-vitals",
      "description": "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.",
      "tags": [
        "Guides, Tutorials and Best Practices",
        "Examples > Frontend > Website Optimization and Performance"
      ],
      "labels": [
        "Core Web Vitals",
        "SEO",
        "Website Performance",
        "User Experience",
        "Google PageSpeed Insights",
        "Lighthouse",
        "Web Vitals Extension"
      ]
    },
    {
      "name": "Prop Drilling",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/hooks-prop-drilling/",
      "description": "This example shows how to pass data from a parent component to a child component using props.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React"]
    },
    {
      "name": "Context",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/hooks-context/",
      "description": "This example shows how to use React Context to share data between components.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React"]
    },
    {
      "name": "Global State",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/hooks-global-state/",
      "description": "This example shows how to use a global state using React Hooks.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React"]
    },
    {
      "name": "Hookstate",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/hooks-hookstate/",
      "description": "This example shows how to use Hookstate to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React"]
    },
    {
      "name": "Teaful",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/hooks-teaful/",
      "description": "This example shows how to use Teaful to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React"]
    },
    {
      "name": "XState",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/fsm-xstate/",
      "description": "This example shows how to use XState to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "XState"]
    },
    {
      "name": "React Query",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/api-react-query/",
      "description": "This example shows how to use React Query to fetch data from an API.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "React Query"]
    },
    {
      "name": "Effector",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/reactive-effector/",
      "description": "This example shows how to use Effector to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Effector"]
    },
    {
      "name": "Akita",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/reactive-akita/",
      "description": "This example shows how to use Akita to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Akita"]
    },
    {
      "name": "Rxjs",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/reactive-rxjs/",
      "description": "This example shows how to use Rxjs to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Rxjs"]
    },
    {
      "name": "Storeon",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/reactive-storeon/",
      "description": "This example shows how to use Storeon to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Storeon"]
    },
    {
      "name": "Jotai",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/atomic-jotai/",
      "description": "This example shows how to use Jotai to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Jotai"]
    },
    {
      "name": "Recoil",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/atomic-recoil/",
      "description": "This example shows how to use Recoil to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Recoil"]
    },
    {
      "name": "AgileTs",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/atomic-agilets/",
      "description": "This example shows how to use AgileTs to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "AgileTs"]
    },
    {
      "name": "Zustand",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/unidirectional-zustand/",
      "description": "This example shows how to use Zustand to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Zustand"]
    },
    {
      "name": "Redux Toolkit",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/unidirectional-redux-toolkit/",
      "description": "This example shows how to use Redux Toolkit to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Redux Toolkit"]
    },
    {
      "name": "Rematch",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/unidirectional-rematch/",
      "description": "This example shows how to use Rematch to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Rematch"]
    },
    {
      "name": "Unistore",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/unidirectional-unistore/",
      "description": "This example shows how to use Unistore to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Unistore"]
    },
    {
      "name": "MobX",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/bidirectional-mobx/",
      "description": "This example shows how to use MobX to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "MobX"]
    },
    {
      "name": "Valtio",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/bidirectional-valtio/",
      "description": "This example shows how to use Valtio to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "Valtio"]
    },
    {
      "name": "MobX State Tree",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/bidirectional-mobx-state-tree/",
      "description": "This example shows how to use MobX State Tree to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "MobX State Tree"]
    },
    {
      "name": "React Easy State",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/bidirectional-easy-state/",
      "description": "This example shows how to use React Easy State to manage state.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "React Easy State"]
    },
    {
      "name": "Microfrontend with Shared React Router and React Components",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/microfrontend-react-app-react-components/",
      "description": "This example has a microfrontend project that demonstrates the usage of a shared router in a React application",
      "tags": ["Examples > Frontend > Microfrontend"],
      "labels": [
        "React",
        "Vue",
        "Module federation",
        "Vite",
        "Webpack",
        "Shared router",
        "Microfrontend"
      ]
    },
    {
      "name": "Microfrontend with Shared React Router and React Application",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/microfrontend-react-shell-react-app-shared-routing/",
      "description": "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",
      "tags": ["Examples > Frontend > Microfrontend"],
      "labels": [
        "React",
        "Vue",
        "Module federation",
        "Vite",
        "Webpack",
        "Shared router",
        "Microfrontend"
      ]
    },
    {
      "name": "Microfrontend with Shared React Router and Vue Application",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/microfrontend-react-shell-react-vue-app/",
      "description": "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",
      "tags": ["Examples > Frontend > Microfrontend"],
      "labels": [
        "React",
        "Vue",
        "Module federation",
        "Vite",
        "Webpack",
        "Shared router",
        "Microfrontend"
      ]
    },
    {
      "name": "Comparative Analysis between styled-components and Tailwind CSS",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/styled-components-vs-tailwindcss/",
      "description": "Article that presents a comparative analysis of styled-components and Tailwind CSS, focusing on practical implementations of a UI Challenge using both libraries.",
      "tags": [
        "Guides, Tutorials and Best Practices",
        "Examples > Frontend > Styling and CSS"
      ],
      "labels": [
        "styled-components",
        "Tailwind CSS",
        "CSS",
        "CSS-in-JS",
        "Analysis"
      ]
    },
    {
      "name": "Proof of Concept: Million, The Virtual DOM Replacement for React.",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/million-poc-performance/",
      "description": "This is a POC that shows how to use Million and comparative analysis of Performance between Million and React.",
      "tags": ["Examples > Frontend > Virtual Dom"],
      "labels": ["Performance", "React", "Virtual Dom", "Rendering", "Million"]
    },
    {
      "name": "React Security Best Practices Guide",
      "description": "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.",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/react-security-best-practices",
      "tags": [
        "Guides, Tutorials and Best Practices",
        "Examples > Frontend > Security Best Practices"
      ],
      "labels": [
        "React",
        "Security",
        "Best Practices",
        "Frontend",
        "Automated Testing",
        "Security Issues"
      ]
    },
    {
      "name": "NextJS with SWR",
      "description": "This example shows how to use SWR with NextJS for data fetch and mutate.",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/nextjs-with-swr-example",
      "tags": [
        "Examples > Frontend > React State Management",
        "Examples > Frontend > NextJs"
      ],
      "labels": ["NextJS", "SWR", "React", "TypeScript"]
    },
    {
      "name": "SWR",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/state-management/examples/api-swr/",
      "description": "This example shows how to use SWR to fetch data from an API.",
      "tags": ["Examples > Frontend > React State Management"],
      "labels": ["React", "SWR"]
    },
    {
      "name": "React Native with expo router",
      "description": "This example shows how to use expo router with React Native.",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/react-native-expo-router/",
      "tags": ["Examples > Frontend > React Native > Expo"],
      "labels": ["React Native", "Expo", "React"]
    },
    {
      "name": "React Native with expo router and shared routes",
      "description": "This example shows how to use expo router with React Native and shared routes.",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/react-native-expo-router-with-shared-routes/",
      "tags": ["Examples > Frontend > React Native > Expo"],
      "labels": ["React Native", "Expo", "React"]
    },
    {
      "name": "The Ultimate React State Management Framework",
      "description": "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!",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/the-ultimate-react-state-management-framework",
      "tags": [
        "Guides, Tutorials and Best Practices",
        "Examples > Frontend > React State Management"
      ],
      "labels": [
        "React",
        "State Management",
        "Framework",
        "Best Practices",
        "Frontend"
      ]
    },
    {
      "name": "Navigator Clipboard API Integration Guide",
      "description": "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.",
      "url": "https://github.com/nanlabs/frontend-reference/tree/main/examples/navigator-clipboard-api-integration",
      "tags": [
        "Guides, Tutorials and Best Practices",
        "Examples > Frontend > Clipboard Integration"
      ],
      "labels": [
        "Clipboard API",
        "JavaScript",
        "HTML5",
        "User Experience",
        "Frontend Development",
        "Interactivity",
        "Content Sharing",
        "Web Standards",
        "Accessibility",
        "CSS3"
      ]
    }
  ]
}