{"id":14961336,"url":"https://github.com/solygambas/react-projects","last_synced_at":"2025-10-24T20:31:59.912Z","repository":{"id":61748856,"uuid":"365679082","full_name":"solygambas/react-projects","owner":"solygambas","description":"9 small React projects using React Query, React Framer Motion, React Spring, React Testing Library, Material-UI and Storybook.","archived":false,"fork":false,"pushed_at":"2023-03-09T13:01:48.000Z","size":7033,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T04:23:44.498Z","etag":null,"topics":["framer-motion","javascript","material-ui","react","react-admin","react-query","react-spring","react-testing-library","reactjs","storybook"],"latest_commit_sha":null,"homepage":"https://main--634d833943e511bf6506f771.chromatic.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solygambas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-09T05:58:28.000Z","updated_at":"2025-01-16T12:11:33.000Z","dependencies_parsed_at":"2023-01-29T17:00:49.260Z","dependency_job_id":null,"html_url":"https://github.com/solygambas/react-projects","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Freact-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Freact-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Freact-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Freact-projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solygambas","download_url":"https://codeload.github.com/solygambas/react-projects/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238035385,"owners_count":19405682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","javascript","material-ui","react","react-admin","react-query","react-spring","react-testing-library","reactjs","storybook"],"created_at":"2024-09-24T13:24:50.577Z","updated_at":"2025-10-24T20:31:49.892Z","avatar_url":"https://github.com/solygambas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Projects\n\n9 small React projects using React Query, React Framer Motion, React Spring, React Testing Library, Material-UI and Storybook.\n\n| #   | Project                                       | Description                                                                           |\n| --- | --------------------------------------------- | ------------------------------------------------------------------------------------- |\n| 01  | [**Food Delivery App**](#food)                | A food delivery app to understand React Framer Motion basics.                         |\n| 02  | [**Star Wars Info**](#starwars)               | A web app about Star Wars to understand React Query basics.                           |\n| 03  | [**Skeleton Screens**](#skeleton)             | A small project to learn how to generate content placeholders with React.             |\n| 04  | [**Material Note**](#materialnote)            | A note-taking app to discover Material-UI framework.                                  |\n| 05  | [**Testing React App**](#testing)             | A simple project using React Testing Library.                                         |\n| 06  | [**My Component Library**](#componentlibrary) | An introduction to design systems with styled-components, React Spring and Storybook. |\n| 07  | [**Taskbox**](#taskbox)                       | A quick intro to learn to create UI components with React and Storybook.              |\n| 08  | [**Design System**](#designsystem)            | A tutorial to learn how to build design systems.                                      |\n| 09  | [**Microfrontends**](#microfrontends)         | A microfrontend architecture using React, Vue and Webpack.                            |\n\n## \u003ca name=\"food\"\u003e\u003c/a\u003e1) Food Delivery App\n\nA food delivery app to understand React Framer Motion basics.\n\n[See food-delivery folder](food-delivery)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"food-delivery\"\u003e\n        \u003cimg src=\"food-delivery/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- setting up a React project with Framer Motion.\n- animating elements, handling initial animation state and transition options.\n- creating hover animations with whileHover.\n- structuring code and leveraging inheritance with variants.\n- generating keyframes and repeating animations with yoyo.\n- adding animations between screens with AnimatePresence.\n- building a modal animation and playing with an inline SVG.\n- making a loader and shifting between predefined animations with useCycle.\n- enabling draggable elements with drag.\n\nBased on [Framer Motion (for React)](https://www.youtube.com/watch?v=2V1WK-3HQNk\u0026list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i\u0026index=1) by Shaun Pelling - The Net Ninja (2020).\n\n## \u003ca name=\"starwars\"\u003e\u003c/a\u003e2) Star Wars Info\n\nA web app about Star Wars to understand React Query basics.\n\n[See star-wars folder](star-wars)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"star-wars\"\u003e\n        \u003cimg src=\"star-wars/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- setting up a React project with React Query 3.\n- using QueryClientProvider as a wrapper.\n- fetching data from Swapi with useQuery.\n- handling query variables and pagination with keepPreviousData.\n- debugging with React Query Devtools.\n\nBased on [React Query Tutorial](https://www.youtube.com/watch?v=x1rQ61otgtU\u0026list=PL4cUxeGkcC9jpi7Ptjl5b50p9gLjOFani) by Shaun Pelling - The Net Ninja (2020).\n\n## \u003ca name=\"skeleton\"\u003e\u003c/a\u003e3) Skeleton Screens\n\nA small project to learn how to generate content placeholders with React.\n\n[See skeleton-screens folder](skeleton-screens)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"skeleton-screens\"\u003e\n        \u003cimg src=\"skeleton-screens/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- fetching dummy data from JSON Placeholder API.\n- creating and styling a base skeleton component for title, text, avatar and thumbnail.\n- building a skeleton template for loading articles and loading profile.\n- handling light and dark themes.\n- adding a shimmer animation.\n\nBased on [React Skeleton Screen Tutorial](https://www.youtube.com/watch?v=cg_tmJBisp8\u0026list=PL4cUxeGkcC9i6bZhMuAzQpC6YgLmB4k4-) by Shaun Pelling - The Net Ninja (2020).\n\n## \u003ca name=\"materialnote\"\u003e\u003c/a\u003e4) Material Note\n\nA note-taking app to discover Material-UI framework.\n\n[See material-note folder](material-note)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"material-note\"\u003e\n        \u003cimg src=\"material-note/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- understanding Material-UI key components: Typography, Buttons and Icons.\n- creating a custom theme and using makeStyles hook.\n- generating a form to add new notes with text fields and radio buttons.\n- using a local JSON Server to save, fetch and delete notes.\n- working with the grid system and the Card component.\n- building a layout with a permanent drawer, a menu list and an app bar.\n- displaying avatars for the user and for each note category.\n- styling the grid with React Masonry CSS.\n- migrating from Material-UI v4 to v5.\n- customizing Material-UI components with styled.\n\nBased on [Material UI Tutorial](https://www.youtube.com/watch?v=0KEpWHtG10M\u0026list=PL4cUxeGkcC9gjxLvV4VEkZ6H6H4yWuS58) by Shaun Pelling - The Net Ninja (2021).\n\n## \u003ca name=\"testing\"\u003e\u003c/a\u003e5) Testing React App\n\nA simple project using React Testing Library.\n\n[See testing-react-app folder](testing-react-app)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"testing-react-app\"\u003e\n        \u003cimg src=\"testing-react-app/screenshot.jpg\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- setting up tests with React Testing Library.\n- understanding differences between query methods: getBy, findBy, queryBy, getAllBy, findAllBy, queryAllBy.\n- using attributes by priority to mimic user behavior.\n- exploring assertions and organizing tests blocks with describe.\n- triggering events with fireEvent.\n- creating integration tests on a parent component.\n- mocking external requests and finding async elements.\n- using beforeEach, beforeAll, afterEach and afterAll hooks.\n\nBased on [React Testing Library Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gm4_-5UsNmLqMosM-dzuvQ) by\nLaith Harb for The Net Ninja (2021).\n\n## \u003ca name=\"componentlibrary\"\u003e\u003c/a\u003e6) My Component Library\n\nAn introduction to design systems with styled-components, React Spring and Storybook.\n\n[See my-component-library folder](my-component-library)\n\n[See demo deployed on Vercel](https://my-component-library.vercel.app/)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"my-component-library\"\u003e\n        \u003cimg src=\"my-component-library/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- creating a design system in Figma for colors, typography and buttons.\n- setting up a custom theme and building buttons with styled-components.\n- handling button variations with styled-components-modifiers.\n- using a theme provider to enable dark mode.\n- building and animating a modal with React Spring.\n- documenting components, adding controls and handling actions with Storybook.\n- using decorators and creating a context to provide our theme.\n- testing accessibility with @storybook/addon-a11y.\n- customizing Storybook theme with @storybook/addons and @storybook/theming.\n- deploying on Netlify.\n\nBased on [Design Systems with Storybook \u0026 React](https://frontendmasters.com/workshops/design-systems-storybook/) by\nEmma Bostian (2020).\n\n## \u003ca name=\"taskbox\"\u003e\u003c/a\u003e7) Taskbox\n\nA quick intro to learn to create UI components with React and Storybook.\n\n[See taskbox folder](taskbox)\n\n[See demo deployed on Chromatic](https://main--634d833943e511bf6506f771.chromatic.com/)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"taskbox\"\u003e\n        \u003cimg src=\"taskbox/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- setting up Storybook with React.\n- building a simple Task component in isolation.\n- catching accessibility issues.\n- assembling a composite TaskList component.\n- learning how to wire in data with Redux.\n- constructing a screen with a remote API.\n- mocking API services with Mock Service Worker.\n- writing an interaction test.\n- deploying on Chromatic.\n- testing UI components.\n- using the Controls addon.\n\nBased on [Storybook for React tutorial](https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/) by Chromatic (2022).\n\n## \u003ca name=\"designsystem\"\u003e\u003c/a\u003e8) Design System\n\nA tutorial to learn how to build design systems.\n\n[See design-system folder](design-system)\n\n[See demo deployed on Chromatic](https://main--634fb5a44afef8aae1b84965.chromatic.com/)\n\n[See package published on NPM](https://www.npmjs.com/package/@solygambas/learnstorybook-design-system)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"design-system\"\u003e\n        \u003cimg src=\"design-system/screenshot.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- setting up Storybook to build and catalog design system components.\n- collaborating with continuous integration and visual review on Chromatic.\n- testing design system appearance, functionality, and accessibility.\n- driving design system adoption with MDX documentation.\n- packaging and importing a design system into other apps.\n- adding a new component AvatarList to repeat the workflow.\n\nBased on [Design Systems for Developers tutorial](https://storybook.js.org/tutorials/design-systems-for-developers/) by Dominic Nguyen and Tom Coleman (2022).\n\n## \u003ca name=\"microfrontends\"\u003e\u003c/a\u003e9) Microfrontends\n\nA microfrontend architecture using React, Vue and Webpack.\n\n### Ecommerce\n\nA small project to understand the basics of microfrontends.\n\n[See microfrontends/01-ecommerce folder](microfrontends/01-ecommerce)\n\n#### Features\n\n- understanding build-time and run-time integrations.\n- setting up Webpack.\n- generating products with Faker.\n- scaffolding the container.\n- implementing module federation.\n- scaffolding the cart.\n- using shared modules.\n- consuming remote modules.\n\n## SaaS\n\nA project to learn to link React and Vue apps together.\n\n[See microfrontends/02-saas folder](microfrontends/02-saas)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"microfrontends/02-saas\"\u003e\n        \u003cimg src=\"microfrontends/02-saas/screenshot.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- choosing an architecture based on requirements.\n- setting up Webpack for development and production.\n- creating and merging development config.\n- wiring up React.\n- assembling the App component and the Container.\n- integrating the Marketing App with the mount function.\n- delegating shared module selection.\n- implementing a CICD pipeline with GitHub Actions.\n- setting up a S3 bucket, configuring Cloudfront and deploying to AWS.\n- creating and assigning access keys.\n- automating cache invalidation.\n- handling CSS in microfrontends.\n- implementing multi-tier navigation.\n- using memory history and syncing history objects.\n- creating the Auth app, adding signin and signup forms.\n- integrating Auth into the Container.\n- adding a loading bar and lazily loading subapps.\n- communicating Auth changes.\n- allowing signout.\n- setting up a Vue dashboard.\n- protecting access to the dashboard.\n\nBased on [Microfrontends with React: A Complete Developer's Guide](https://www.udemy.com/course/microfrontend-course/) by Stephen Grider (2021).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolygambas%2Freact-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolygambas%2Freact-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolygambas%2Freact-projects/lists"}