9 small React projects using React Query, React Framer Motion, React Spring, React Testing Library, Material-UI and Storybook.
| # | Project | Description |
|---|---|---|
| 01 | Food Delivery App | A food delivery app to understand React Framer Motion basics. |
| 02 | Star Wars Info | A web app about Star Wars to understand React Query basics. |
| 03 | Skeleton Screens | A small project to learn how to generate content placeholders with React. |
| 04 | Material Note | A note-taking app to discover Material-UI framework. |
| 05 | Testing React App | A simple project using React Testing Library. |
| 06 | My Component Library | An introduction to design systems with styled-components, React Spring and Storybook. |
| 07 | Taskbox | A quick intro to learn to create UI components with React and Storybook. |
| 08 | Design System | A tutorial to learn how to build design systems. |
| 09 | Microfrontends | A microfrontend architecture using React, Vue and Webpack. |
A food delivery app to understand React Framer Motion basics.
- setting up a React project with Framer Motion.
- animating elements, handling initial animation state and transition options.
- creating hover animations with whileHover.
- structuring code and leveraging inheritance with variants.
- generating keyframes and repeating animations with yoyo.
- adding animations between screens with AnimatePresence.
- building a modal animation and playing with an inline SVG.
- making a loader and shifting between predefined animations with useCycle.
- enabling draggable elements with drag.
Based on Framer Motion (for React) by Shaun Pelling - The Net Ninja (2020).
A web app about Star Wars to understand React Query basics.
- setting up a React project with React Query 3.
- using QueryClientProvider as a wrapper.
- fetching data from Swapi with useQuery.
- handling query variables and pagination with keepPreviousData.
- debugging with React Query Devtools.
Based on React Query Tutorial by Shaun Pelling - The Net Ninja (2020).
A small project to learn how to generate content placeholders with React.
- fetching dummy data from JSON Placeholder API.
- creating and styling a base skeleton component for title, text, avatar and thumbnail.
- building a skeleton template for loading articles and loading profile.
- handling light and dark themes.
- adding a shimmer animation.
Based on React Skeleton Screen Tutorial by Shaun Pelling - The Net Ninja (2020).
A note-taking app to discover Material-UI framework.
- understanding Material-UI key components: Typography, Buttons and Icons.
- creating a custom theme and using makeStyles hook.
- generating a form to add new notes with text fields and radio buttons.
- using a local JSON Server to save, fetch and delete notes.
- working with the grid system and the Card component.
- building a layout with a permanent drawer, a menu list and an app bar.
- displaying avatars for the user and for each note category.
- styling the grid with React Masonry CSS.
- migrating from Material-UI v4 to v5.
- customizing Material-UI components with styled.
Based on Material UI Tutorial by Shaun Pelling - The Net Ninja (2021).
A simple project using React Testing Library.
- setting up tests with React Testing Library.
- understanding differences between query methods: getBy, findBy, queryBy, getAllBy, findAllBy, queryAllBy.
- using attributes by priority to mimic user behavior.
- exploring assertions and organizing tests blocks with describe.
- triggering events with fireEvent.
- creating integration tests on a parent component.
- mocking external requests and finding async elements.
- using beforeEach, beforeAll, afterEach and afterAll hooks.
Based on React Testing Library Tutorial by Laith Harb for The Net Ninja (2021).
An introduction to design systems with styled-components, React Spring and Storybook.
See my-component-library folder
- creating a design system in Figma for colors, typography and buttons.
- setting up a custom theme and building buttons with styled-components.
- handling button variations with styled-components-modifiers.
- using a theme provider to enable dark mode.
- building and animating a modal with React Spring.
- documenting components, adding controls and handling actions with Storybook.
- using decorators and creating a context to provide our theme.
- testing accessibility with @storybook/addon-a11y.
- customizing Storybook theme with @storybook/addons and @storybook/theming.
- deploying on Netlify.
Based on Design Systems with Storybook & React by Emma Bostian (2020).
A quick intro to learn to create UI components with React and Storybook.
See demo deployed on Chromatic
- setting up Storybook with React.
- building a simple Task component in isolation.
- catching accessibility issues.
- assembling a composite TaskList component.
- learning how to wire in data with Redux.
- constructing a screen with a remote API.
- mocking API services with Mock Service Worker.
- writing an interaction test.
- deploying on Chromatic.
- testing UI components.
- using the Controls addon.
Based on Storybook for React tutorial by Chromatic (2022).
A tutorial to learn how to build design systems.
See demo deployed on Chromatic
- setting up Storybook to build and catalog design system components.
- collaborating with continuous integration and visual review on Chromatic.
- testing design system appearance, functionality, and accessibility.
- driving design system adoption with MDX documentation.
- packaging and importing a design system into other apps.
- adding a new component AvatarList to repeat the workflow.
Based on Design Systems for Developers tutorial by Dominic Nguyen and Tom Coleman (2022).
A microfrontend architecture using React, Vue and Webpack.
A small project to understand the basics of microfrontends.
See microfrontends/01-ecommerce folder
- understanding build-time and run-time integrations.
- setting up Webpack.
- generating products with Faker.
- scaffolding the container.
- implementing module federation.
- scaffolding the cart.
- using shared modules.
- consuming remote modules.
A project to learn to link React and Vue apps together.
See microfrontends/02-saas folder
- choosing an architecture based on requirements.
- setting up Webpack for development and production.
- creating and merging development config.
- wiring up React.
- assembling the App component and the Container.
- integrating the Marketing App with the mount function.
- delegating shared module selection.
- implementing a CICD pipeline with GitHub Actions.
- setting up a S3 bucket, configuring Cloudfront and deploying to AWS.
- creating and assigning access keys.
- automating cache invalidation.
- handling CSS in microfrontends.
- implementing multi-tier navigation.
- using memory history and syncing history objects.
- creating the Auth app, adding signin and signup forms.
- integrating Auth into the Container.
- adding a loading bar and lazily loading subapps.
- communicating Auth changes.
- allowing signout.
- setting up a Vue dashboard.
- protecting access to the dashboard.
Based on Microfrontends with React: A Complete Developer's Guide by Stephen Grider (2021).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent