Recycling Game for Children (Ages 4-6)

This is a fun and educational recycling game designed for children aged 4-6 years old! Our game aims to teach young children the importance of recycling in an engaging and interactive way. By playing the game, children will learn how to properly sort different types of waste, understand the benefits of recycling, and develop eco-friendly habits from an early age.

Screenshots

Waste Sorting ♻️

Waste Puzzle 🧩

Recycling Game Widget

Embeddable Recycling Game as a Web Component built with React. You can embed this widget on any platform WordPress, Wix, plain HTML, or other web apps—and configure its width and height.

Getting Started

This project was created with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits, and you will also see any lint errors in the console.

npm test

Launches the test runner in interactive watch mode. See the section about running tests for more information.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed! See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back! This command will remove the single build dependency from your project. It will copy all the configuration files and dependencies (Webpack, Babel, ESLint, etc.) right into your project so you have full control over them.

Using as a Web Component

You can embed the Recycling Game widget on any website using either npm or a CDN.

Option 1: Install via npm

npm install recycling-game-widget

<script type="module">
  import 'recycling-game-widget';
</script>

<!-- Default size -->
<recycling-game-widget></recycling-game-widget>

<!-- Custom size -->
<recycling-game-widget width="500" height="700"></recycling-game-widget>

Option 2: Use the widget via unpkg CDN

No npm or bundler required. Just include the UMD bundle directly in your HTML:

<!-- Embeddable widget -->
<recycling-game-widget width="500" height="700"></recycling-game-widget>

<!-- UMD Bundle from unpkg -->
<script src="https://unpkg.com/[email protected]/dist/recycling-game-widget.js"></script>

• Replace width and height attributes to customize the widget size.
• This method works on any platform: plain HTML, WordPress, Wix, etc.
• Replace 0.0.4 with the latest version of the package to use the most up-to-date release.

Props

| Attribute | Type | Default | Description | |-----------|--------|---------|----------------------------------| | width | Number | 400 | Width of the widget in pixels | | height | Number | 600 | Height of the widget in pixels |

Development Notes

• The widget uses react-to-webcomponent to convert the React app into a standard Web Component.
• CRA is configured to build a single JS bundle (dist/recycling-game-widget.js) for easy embedding.
• The widget maintains BrowserRouter support internally, so routing inside the game still works.

Learn More

• Create React App documentation
• React documentation

Additional Resources

• Code Splitting
• Analyzing the Bundle Size
• Making a Progressive Web App
• Advanced Configuration
• Deployment
• Troubleshooting Build Errors

Acknowledgment

This project is detached from fac18 recycling-game.