jherr/micro-fes-beginner-to-expert

Stars
265
Rank 154,577 (Top 4 %)
Language
JavaScript
Created about 3 years ago
Updated about 1 year ago

jherr/micro-fes-beginner-to-expert

jherr

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Code for "Micro Frontends From Beginner to Expert"

Full Site Federation eCommerce Example

An example eCommerce app Module Federation in a Full Site Federation configuration, using react-router-dom to manage the routing.

Installation

In these five directories; addtocart, cart, home, pdp and server run these commands:

yarn && yarn start

In a different terminal window for each app.

The visit the home page.

create-mf-app

CLI app to create Module Federation applications

fast-react-context

depth-of-field

Depth of field simulator

which-react-state-manager

Code for choosing a state manager for React

no-bs-ts

No BS TS (Typescript) example code

nextjs-state-management

nextjs-state-management video code

trpc-on-the-app-router

Code for the tRPC on the App Router video

fcc-state

Code for the Freecodecamp state video

wp5-and-single-spa

Single SPA on Federated Modules

wp5-starter-react

Webpack 5 Start Kit for React

app-router-auth-using-next-auth

Code for a Next-Auth on App Router video

nextjs-declarative-routing

Declarative routing demo for NextJS

chat-o-matic

Example code for a real time chat system with GraphQL subscriptions

next-gql-dogs

next-gql-dogs code for the NextJS + GraphQL + Typescript Blueprint video

notetaker

vite-mod-fed

Code for the Vite Module Federation introduction video.

wp5-intro-video-code

WP5 Federated Module intro video code

ts-hooks

Typescript for hooks in React

nextjs13-pokemon

A Redux/NextJS 13 example using the App directory

todos-many-ways

Todo lists four ways

ts-react-testing

Code for the TypeScript React Testing Video

generic-streaming

Streaming server actions without the AI

nextjs13-state-zustand

Code for Did NextJS 13 Break State Management?

mf-router6

Example code for MFE routing, shared state, build-time & runtime deploy video

syncexternalstore

legend-state-next

Legend State on NextJS

pokemon-next-three-ways

CSR, SSR and SSG on NextJS

taming-useeffect

Taming the useEffect hook video code

wp5-full-site-federation

Non-federated and Federated e-Commerce applications.

game-zone

Game zone MFE demonstration

compiler-repl

rtk-query-vs-rq

Redux Toolkit Query vs React Query video source code

chrome-extension-boilerplate-solid

Solid Chrome Extension template

micro-fes-in-10-minutes

Code for Micro-Frontend in 10 minutes

module-federation-state-management

Code for the state management for Module Federation video

ts-patterns

Code for Five Essential Design Patterns in Typescript

payload-3.0-movies

Movies example with Payload 3.0

react-vs-solid-fight

Code for React vs Solid comparison video

jotai-rebuild

trpc-intro

Introduction to tRPC code

mastering-context

Code for the mastering context video

htmx-for-react-devs

HTMX Demo for React Devs

qwik-voting

A simple Qwik voting application to demonstrate Qwiks features

nextjs-pokemon-modes

nextjs-pokemon-modes demo

ahat-wordle

Astro, HTMX, Alpine and Tailwind Wordle

micro-fes-simplified-done

Completed code for Micro-FEs Simplified

five-clever-rq-and-swr-hacks

Code for the Five Clever Hacks for React-Query and SWR video

ui-lib-architecture

ui-lib-architecture

intro-to-react-by-day

Every day of the Introduction to React course

njs13-server-actions

NextJS 13.4 Server Actions video code

portable-react-apps

Code for a video on how to write portable React apps

local-state-with-state-mgrs

Code for local state management alternatives for React

nextjs-killed-react

Code for the video on whether or not NextJS "killed" React

tw2panda-cli

Command line utility to convert Tailwind code coming in on STDIN to Panda on STDOUT

nextjs-to-astro

Code for NextJS to Astro video

react-streaming

react-streaming video code

next-auth-v5

Code for a video on Next-Auth v5 beta.

remix-speedrun-pokemon

Remix speed run - Pokemon

rxjs-pokemon

React + RxJS video code

practical-module-federation-20

Code for Practical Module Federation 2.x

wp5-dashboard

Pie chart dashboard using Webpack 5 Federated Modules

single-spa-pdp

PDP example in Single Spa

ai-image-bot

mockup-converter

A converter to take Bootstrap mockups and turn them into reactstrap code

graphql-jwt-speedrun

Code for the GraphQL-JWT Speed Run video

wp5-extension-template

Webpack 5 chome extension template

tanstack-router-streaming-movies

Streaming movies example

clerk-5-roles-and-perms

Demo code for Clerk v5 Roles and Permissions

cheap-ai

Code for a video on using NextJS, Ollama, and Vercel's AI library to develop AI apps for free

van-turbo-repo

Vanilla-Extract Turborepo Design System Guide

streaming-sa-spotify

Streaming server actions to show Spotify albums

saga-vs-rtk

Code for the Redux Sagas vs Redux Toolkit Query video

htmx-nextjs-ai

HTMX and NextJS Streaming AI examples

fresh-pokemon

fresh-pokemon code

wp5-starter-react-ts

Webpack 5 starter kit for Typescript

bcc-home-page

New home page for Blue Collar Coder

reactive-pokemon

Created with CodeSandbox

nx-with-exp-nextjs

Code for NX Monorepo with Express and NextJS

container-queries

Source for a video on container queries

next13-use-warning

Code for the NextJS 13 use warning video

server-actions-vs-apis

A comparative look at server actions vs APIs

bun-vs-node-2

Bun vs Node performance comparison - part 2

astro-htmx-spotify

njs13-n-plus-one

Fixing NextJS 13's N+1 Problem code

astro-2-video-code

Code to support the Astro-2.0 intro video

todo-base

Starting point for Todo state manager comparison videos

solid-spectrum-graph

Audio spectrum analyzer in Solid-JS

esbuild-swc-worth-your-time

Are ESBuild and SWC worth your time?

github-openai-defer

Example project using GitHub, OpenAI and Defer

jmusic

Javascript Music project

better-rscs

Code for the video on better architecture options for RSCs

nextjs-14-lego-example

astro-youtube-catalog

Static/dynamic YouTube catalog based on Astro 2

supabase-chat

Realtime chat with Supabase is Supa-easy

growlers-vue-finished

Finished code for Micro-FEs Simplified on Vue

unpkg-mf-react-finished

Finished version of the video code

Module-Federation-FAQ

arrays-made-easy

Arrays made easy series code

gigantic-components

Attack of the gigantic react components

warp-themes

Sci-Fi themes for the Warp terminal app