Sugar Counter App

A simple React-based application for tracking and managing daily sugar intake by adding sweet items.

Table of Contents

• Introduction
• Features
• Usage
• Installation
• Dependencies
• Development
• Contribution

Introduction

This application allows users to monitor their daily sugar consumption by selecting sweets from a predefined list and creating custom items. Users can search for specific items, add them to their daily count, and view the total sugar intake.

Features

• Search for sweets
• Add selected items to daily count
• Remove items from the count
• Modal for adding custom items and additional details on each sweet

Usage

1. View Total Sugar Count: The main screen displays the total sugar intake in grams.

2. Search for Sweets: Use the search bar to find specific sweet items.

3. Add and Remove Items: Click on sweets to add them to the daily count. Click again to remove them.

4. Customize Items using Modal:

   • Click on the three dots button on a sweet to open the menu.
   • Click on the "Edit" button to open the edit modal.

5. Edit Items:

   • Modify the item name, description, grams of sugar per item, and the number of items consumed.
   • Click the "Save" button to apply changes or "Cancel" to discard them.

Installation

1. Clone the repository: git clone <repository-url>
2. Install dependencies: npm install
3. Run the application: npm start

Dependencies

• React
• React Query
• Redux Toolkit

Development

For local development, follow the installation steps and run the development server using npm start.

Contribution

Contributions are welcome! Feel free to submit issues or pull requests.

---