React - Redux-Rtk calculator mimicing the Windows calculators dynamic flow

Hello there 👋

Building upon my knowledge of Redux and Redux Toolkit (RTK), I embarked on the creation of a feature-rich calculator application. This project leverages a combination of React's useState hook and Redux-RTK for robust state management.

To elevate the user experience, I meticulously replicated the logic of the Windows calculator, encompassing functionalities such as calculation history and dynamic ongoing calculations. Moreover, the application boasts a range of customization options, including theme and sound settings.

For a distinctive touch, I designed a unique theme and visual style for the calculator. Additionally, I incorporated sound effects to enhance user interaction and integrated an API to display motivating action hero images featuring the legendary Chuck Norris, adding a touch of humor to the experience.

To learn more about this project, be sure to explore the 'Apps About' and 'Moreabout' sections.

Key Features

• Windows Calculator Logic - Replicates the core Windows calculator functionality, including real-time calculations and history.
• Persistent Settings - Saves and restores theme and sound preferences using local storage.
• Custom Themes - Allows users to switch between light and dark themes for a personalized look.
• Customizable Sound Effects - Adds button sound effects via use-sound, with an option to turn them off.
• Dynamic Font Resizing - Automatically adjusts font size for long calculations using react-textfit.
• API integration - Fetches random images from chucknorris.io for added fun.

Packages used

• redux-toolkit - Efficient state management for complex calculations.
• use-local-storage - Persists theme and sound settings for a personalized user experience across sessions.
• use-sound - Adds a nostalgic tapping sound effect to enrich user interaction.
• axios - Communication with the chucknorris.io API for fetching Chuck Norris-themed images (a fun addition!).
• react-textfit - Dynamically adjusts font size based on the length of the calculation, ensuring optimal display on the calculator screen.

Run 🚀

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Start with cloning this repo on your local machine via cli or github-desktop:

$ git clone https://github.com/AndrasE/React-redux-calculator
$ cd PROJECTNAME

To install and set up the library, run:

$ npm install -S myLib

Serving the app:

$ npm start