{"id":49592638,"url":"https://github.com/siyabuilds/react-counter","last_synced_at":"2026-05-04T01:39:29.796Z","repository":{"id":262163922,"uuid":"886398496","full_name":"siyabuilds/react-counter","owner":"siyabuilds","description":"The React Counter is a simple project where I practiced working with React's state management and effects. It includes features like a dark mode toggle, which enhances the UI, and persistence through local storage, ensuring the counter and theme settings stay saved even after refreshing the page. ","archived":false,"fork":false,"pushed_at":"2025-10-02T13:39:57.000Z","size":993,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-04T01:39:08.413Z","etag":null,"topics":["dark-mode","react","usestate"],"latest_commit_sha":null,"homepage":"https://markuptitan.github.io/react-counter/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siyabuilds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-10T22:13:18.000Z","updated_at":"2025-10-02T13:40:01.000Z","dependencies_parsed_at":"2024-11-10T23:31:10.177Z","dependency_job_id":"6a95a625-1da3-4ad5-aa76-50d38d67e710","html_url":"https://github.com/siyabuilds/react-counter","commit_stats":null,"previous_names":["markuptitan/react-counter","siyabuilds/react-counter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siyabuilds/react-counter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Freact-counter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Freact-counter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Freact-counter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Freact-counter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siyabuilds","download_url":"https://codeload.github.com/siyabuilds/react-counter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siyabuilds%2Freact-counter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32591603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"ssl_error","status_checked_at":"2026-05-03T22:09:10.534Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dark-mode","react","usestate"],"created_at":"2026-05-04T01:39:28.973Z","updated_at":"2026-05-04T01:39:29.784Z","avatar_url":"https://github.com/siyabuilds.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Counter App\n\nThis is a simple counter application built with **React**, featuring **increment** and **decrement** functionality. The app allows users to interact with a counter, demonstrating key React concepts like **state management**, **event handling**, and **theme toggling**.\n\n## Table of Contents\n\n- [Features](#features)\n- [Technologies Used](#technologies-used)\n- [Installation](#installation)\n- [Usage](#usage)\n- [App Structure](#app-structure)\n- [Future Implementations](#future-implementations)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n\n- **Increment**: Increases the counter by 1.\n- **Decrement**: Decreases the counter by 1.\n- **Dark Mode Toggle**: Allows users to toggle between light and dark themes.\n\nThese features serve as a good introduction to React, focusing on state management, user interaction, and theme customization.\n\n## Technologies Used\n\n- **React**: JavaScript library for building user interfaces.\n- **React Hooks**: `useState` for managing the counter state and theme.\n- **react-toggle-dark-mode**: A lightweight library for creating a dark mode toggle switch.\n- **CSS**: For basic styling.\n\nThis project is designed to showcase fundamental React concepts and is easily extendable for more features.\n\n## Installation\n\nFollow these steps to get the app up and running locally:\n\n1. **Clone the repository**:\n\n   ```bash\n   git clone https://github.com/markuptitan/react-counter\n   ```\n\n2. **Navigate into the project directory**:\n\n   ```bash\n   cd react-counter\n   ```\n\n3. **Install project dependencies**:\n\n   ```bash\n   npm install\n   ```\n\n4. **Start the development server**:\n\n   ```bash\n   npm start\n   ```\n\n   Once the app is running, open your browser and go to `http://localhost:3000` to see the counter in action.\n\n## Usage\n\nOnce the app is running:\n\n- **Increment**: Click the **Increase** button to increase the counter by 1.\n- **Decrement**: Click the **Decrease** button to decrease the counter by 1.\n- **Dark Mode Toggle**: Use the toggle switch to switch between light and dark themes.\n\nThe app is interactive, and you can use these buttons to test the counter's functionality and theme toggle.\n\n## App Structure\n\nThe project structure is simple, designed to keep things modular and clean:\n\n```\n/react-counter\n├── /public\n│   ├── index.html\n│   ├── favicon.svg\n├── /src\n│   ├── Counter.js\n│   ├── Header.js\n│   ├── App.js\n│   ├── App.css\n│   ├── index.js\n└── package.json\n```\n\n### Key Files:\n\n- `Counter.js`: Contains the logic for managing the counter (increment and decrement).\n- `Header.js`: Contains the theme toggle switch and header title.\n- `App.js`: The main React component that renders `Counter.js` and `Header.js`.\n- `App.css`: The file where you define your app's styles.\n- `favicon.svg`: The app icon used in the browser tab.\n\n## Future Implementations\n\nThere is just one future feature and improvement planned for this app:\n\n- **Accessibility Enhancements**: Improve accessibility by adding keyboard navigation and support for screen readers.\n\n## Support\n\nIf you found this project useful, please consider giving it a star! Your support would be greatly appreciated and helps others discover the project. Thank you for your contribution to making this project better!\n\n## Contributing\n\nIf you'd like to contribute, feel free to fork the repository and submit a pull request. You can contribute by:\n\n- Adding new features\n- Fixing bugs\n- Improving documentation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiyabuilds%2Freact-counter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiyabuilds%2Freact-counter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiyabuilds%2Freact-counter/lists"}