https://github.com/siyabuilds/react-counter
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.
https://github.com/siyabuilds/react-counter
dark-mode react usestate
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/siyabuilds/react-counter
- Owner: siyabuilds
- License: mit
- Created: 2024-11-10T22:13:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-02T13:39:57.000Z (9 months ago)
- Last Synced: 2026-05-04T01:39:08.413Z (about 1 month ago)
- Topics: dark-mode, react, usestate
- Language: HTML
- Homepage: https://markuptitan.github.io/react-counter/
- Size: 970 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Counter App
This 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**.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [App Structure](#app-structure)
- [Future Implementations](#future-implementations)
- [Contributing](#contributing)
- [License](#license)
## Features
- **Increment**: Increases the counter by 1.
- **Decrement**: Decreases the counter by 1.
- **Dark Mode Toggle**: Allows users to toggle between light and dark themes.
These features serve as a good introduction to React, focusing on state management, user interaction, and theme customization.
## Technologies Used
- **React**: JavaScript library for building user interfaces.
- **React Hooks**: `useState` for managing the counter state and theme.
- **react-toggle-dark-mode**: A lightweight library for creating a dark mode toggle switch.
- **CSS**: For basic styling.
This project is designed to showcase fundamental React concepts and is easily extendable for more features.
## Installation
Follow these steps to get the app up and running locally:
1. **Clone the repository**:
```bash
git clone https://github.com/markuptitan/react-counter
```
2. **Navigate into the project directory**:
```bash
cd react-counter
```
3. **Install project dependencies**:
```bash
npm install
```
4. **Start the development server**:
```bash
npm start
```
Once the app is running, open your browser and go to `http://localhost:3000` to see the counter in action.
## Usage
Once the app is running:
- **Increment**: Click the **Increase** button to increase the counter by 1.
- **Decrement**: Click the **Decrease** button to decrease the counter by 1.
- **Dark Mode Toggle**: Use the toggle switch to switch between light and dark themes.
The app is interactive, and you can use these buttons to test the counter's functionality and theme toggle.
## App Structure
The project structure is simple, designed to keep things modular and clean:
```
/react-counter
├── /public
│ ├── index.html
│ ├── favicon.svg
├── /src
│ ├── Counter.js
│ ├── Header.js
│ ├── App.js
│ ├── App.css
│ ├── index.js
└── package.json
```
### Key Files:
- `Counter.js`: Contains the logic for managing the counter (increment and decrement).
- `Header.js`: Contains the theme toggle switch and header title.
- `App.js`: The main React component that renders `Counter.js` and `Header.js`.
- `App.css`: The file where you define your app's styles.
- `favicon.svg`: The app icon used in the browser tab.
## Future Implementations
There is just one future feature and improvement planned for this app:
- **Accessibility Enhancements**: Improve accessibility by adding keyboard navigation and support for screen readers.
## Support
If 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!
## Contributing
If you'd like to contribute, feel free to fork the repository and submit a pull request. You can contribute by:
- Adding new features
- Fixing bugs
- Improving documentation