Code Monkey home page Code Monkey logo

mealfulness's Introduction

MealFulness

(Under development)

https://mealfulness.vercel.app/

Test account credentials:

(Settings on this account have been disabled to prevent changing credentials. Dashboard functionality fully works.)

Motivation - Why am I creating this app?

I became interested in understanding my daily nutritional intake when I returned to the gym. I wanted to monitor my meals to gauge the amount of protein and calories I was consuming. Additionally, some of my family members and friends expressed interest in using an app like this, but they couldn't find a free and satisfactory option. This motivated me to develop my own app that would cater to our specific requirements.

Project Overview

Dynamic meal tracking platform seamlessly integrated with nutrition data from external APIs. Enhanced with AI capabilities for personalized meal guidance, the platform facilitates effortless monitoring of weekly nutrition charts. Designed with streamlined efficiency in mind, it offers intuitive tools for effective meal management.

Features

  • Meal Tracking: Easily create meals with customized nutrition profiles and seamlessly add them to your calendar for convenient tracking.

  • Ingredient-based Search: Effortlessly discover detailed nutrition information for any meal by inputting the grams of its ingredients, empowering you to make informed dietary choices.

  • Weekly Nutrition Stats: Visualize your weekly consumption of selected nutrients through an intuitive line chart, providing valuable insights into your dietary habits and goals.

image

  • AI-Powered Assistant: Access an intelligent AI chat overlay that offers comprehensive assistance on meal planning, nutrition inquiries, and recipe recommendations, enhancing your overall user experience with valuable insights and guidance.

image

Settings Panel

Users can change few things here due to their account like:

  • Their names.
  • Email,
  • Password.
  • Avatar.

Feature with avatar was bit tricky and fun to do and also really teaching. I used AWS S3 Bucket to keep all images which user upload. I generate url for the image which is stored in S3 and I keep it in db. For optimizing all of this, I rezise image down to improve performance and avoid uploading large resolution images just for avatar picture.

image

How to use? - IMPORTANT

To utilize the platform, registration is required. No need for concern; you can input any email and password without requiring email confirmation. Additionally, passwords are encrypted in the database. After registration, you will be redirected to the dashboard containing all content. However, without proper authorization, you won't be able to access the functionality.

  • To search for ingredients you need to provide amout of that ingredient and its name, for example: 200g chicken
  • To search for multiple ingredients you follow the same rule, for example: 200g chicken 100g rice 150g vegetables

Technologies

  • Typescript
  • Next.js
  • TailwindCSS
  • PostgreSQL
  • Shadcn
  • Zod
  • Next-Auth
  • Zustand
  • React Query
  • React Hook Form
  • Redis
  • Jest
  • React Testing Library
  • AWS S3

Other functionalities

  • User Authentication.
  • Session Management.
  • Page Protection.
  • Implemented Paraller Routing to make Dashboard.
  • Used Suspense for each Paraller Route to improve user experience by avoiding long page load.
  • Created message rate limit with Redis to prevent spams to OpenAI API.
  • Hasing passowrds before inserting it to DB.
  • Stream AI responses to the user to enchance UX.

mealfulness's People

Contributors

aoitechdev avatar

Watchers

 avatar

mealfulness's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.