https://github.com/anabartos/calorie-tracker-react--ts
This project is an application that allows users to record activities, either related to food or exercise, and track the calories consumed and burned. Users can also add, edit, and delete activities through an interactive form.
https://github.com/anabartos/calorie-tracker-react--ts
calories-tracker javascript reactjs tailwindcss typescript
Last synced: 2 months ago
JSON representation
This project is an application that allows users to record activities, either related to food or exercise, and track the calories consumed and burned. Users can also add, edit, and delete activities through an interactive form.
- Host: GitHub
- URL: https://github.com/anabartos/calorie-tracker-react--ts
- Owner: anabartos
- Created: 2024-11-15T11:54:38.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-29T11:33:40.000Z (7 months ago)
- Last Synced: 2025-02-07T14:22:20.736Z (4 months ago)
- Topics: calories-tracker, javascript, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://calorie-tracker-app-react-typescript.netlify.app
- Size: 827 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Calorie Tracker
This project is an application that allows users to record activities, either related to **food** or **exercise**, and track the calories consumed and burned. Users can also add, edit, and delete activities through an interactive form.
## Features
- Record food and exercise activities.
- View calories consumed, burned, and the difference.
- Add, edit, and delete activities.
- Persistent storage of activities in `localStorage`.
## Technologies
- **React**: JavaScript library for building user interfaces.
- **TypeScript**: A superset of JavaScript that adds static typing.
- **Tailwind CSS**: A utility-first CSS framework for creating fast, modern interfaces.
- **UUID**: A library to generate unique identifiers for activities.
## Installation
### 1. Clone the repository
```bash
git clone https://github.com/anabartos/Calorie-tracker-react--ts
cd calorie-tracker-recat--ts
```
### 2. Install dependencies
```bash
npm install
```
### 3. Run the development server
To start the project in development mode, use the following command:
```bash
npm run dev
```
The project will be available at http://localhost:3000.
## Usage
Once you open the app, you will see an interface that allows you to:
- **Add an activity**: Choose the category (Food or Exercise), enter the activity name, and the associated calories.
- **View the calorie summary**: At the top, you will see a summary of calories consumed, burned, and the difference.
- **Edit an activity**: Click the pencil icon to modify an existing activity.
- **Delete an activity**: Click the X icon to delete an activity.
## Project Structure
The basic structure of the project is as follows:
bash
src/
├── components/
│ ├── ActivityList.tsx
│ ├── CalorieTracker.tsx
│ ├── Form.tsx
│ └── CalorieDisplay.tsx
├── data/
│ └── categories.ts
├── reducer/
│ ├── activityReducer.ts
│ └── activityActions.ts
├── types/
│ └── index.ts
└── App.tsx
## Contributing
Contributions are welcome. If you would like to improve the project or add new features, follow these steps:
Fork the repository.
Create a new branch (git checkout -b feature-new-feature).
Make your changes and commit them (git commit -am 'Add new feature').
Submit a pull request.