https://github.com/aimarbustamante/calorie-tracker

Web application where you can keep track of your consumed calories along with the calories burned through physical activity.
https://github.com/aimarbustamante/calorie-tracker

calories calories-tracker react tailwincss typescript vite

Last synced: about 1 month ago
JSON representation

Web application where you can keep track of your consumed calories along with the calories burned through physical activity.

• Host: GitHub
• URL: https://github.com/aimarbustamante/calorie-tracker
• Owner: AimarBustamante
• Created: 2024-06-25T01:42:18.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-25T01:53:05.000Z (6 months ago)
• Last Synced: 2024-06-25T02:57:07.549Z (6 months ago)
• Topics: calories, calories-tracker, react, tailwincss, typescript, vite
• Language: TypeScript
• Homepage: https://calorie-tracker-04.netlify.app
• Size: 809 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📊 Calorie Tracker

![Mockup](public/mockup-browser.png)

![Mockup](public/mockup-browser-2.png)

## 📖 Project Description

Calorie Tracker is a web application where you can keep track of your consumed calories along with the calories burned through physical activity. Additionally, you can view the difference, helping you determine if you are in a caloric deficit or surplus.

## 💻 Technologies Used

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) 

![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

![Vite](https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge&logo=vite&logoColor=FFD62E)

![Tailwind_CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

## 📚 What I Learned

This is my first project using forms in React. In this project, I learned to read user data through a form, process it, and perform various operations such as validation and more. Additionally, I learned about `useReducer` to manage complex states in my apps.

## 📫 Contact Information

[![My_Portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://aimarbusta.netlify.app/)

[![LinkedIn](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/aimarbustamante/)

[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/aimarbusta.dev/) 

[![Email](https://img.shields.io/badge/Microsoft_Outlook-0078D4?style=for-the-badge&logo=microsoft-outlook&logoColor=white)](mailto:[email protected]) 

[![WhatsApp](https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge&logo=whatsapp&logoColor=white)](https://wa.me/65167602) 

[![Frontend_Mentor](https://img.shields.io/badge/Frontend_Mentor-3F54A3?style=for-the-badge&logo=frontendmentor&logoColor=white)](https://www.frontendmentor.io/profile/AimarBustamante)