Giter Club home page Giter Club logo

harshu878 / nutrimeter Goto Github PK

View Code? Open in Web Editor NEW
11.0 1.0 1.0 9.25 MB

Nutrimeter is a one stop solution for all health related information and to track your daily calories so It helps you to focus on your nutrition as a whole. it's a dynamic and responsive, full stack website built with react js, mongodb, express and nodejs .

Home Page: https://nutrimeter.vercel.app/

HTML 0.70% CSS 0.60% JavaScript 98.65% Shell 0.04%
blogs calories-tracker chakra-ui expressjs form-validation fullstack masai-school masaiproject mongodb mongoose

nutrimeter's Introduction

Nutrimeter

Nutrimeter is a one stop solution for all health related information and to track your daily calories so It helps you to focus on your nutrition as a whole. it's a dynamic and responsive, full stack website built with react js, mongodb, express and nodejs.

๐Ÿš€ About us

Hi, we as a team of 5 members studied from Masai School, learning full stack development and this project was built by us in cunstruct week to put all the skills in practice. All team members name:

Demo

https://nutrimeter.vercel.app/

Below are some of the Screenshots with features:

  • HomePage App Screenshot

  • For Healthcare Professionals Page: App Screenshot

  • Blog page: App Screenshot

  • Support page: App Screenshot

  • Signup page:-> it contain sign up fuctionality done with nodeJs and stored data in mongo db. App Screenshot

  • Login page:-> it contain Login fuctionality done with nodeJs and stored data in mongo db. App Screenshot

  • It is the heart of Nutrimeter where user can track his daywise calores by creating custom nutritious diet:

  • Main page of Calorie tracker App Screenshot

  • Has more than 5,000 products to be added in day wise diet to manage weight: App Screenshot

  • amount of Carb, protein, and fat will be displayed at the time of adding product in diet bucket App Screenshot

Added product in daily diet bucket: App Screenshot

Graphical analysis of total daily calories added in bucket App Screenshot

  • total calories consumed and rquired for that day with other macro nutrients present in diet: App Screenshot

  • Some micro and macro nutrients presents in whole diet for that particular day. App Screenshot

  • Sepration of data from seprate users--->

User1

App Screenshot

User2

  • Sepration of data from seprate users. App Screenshot

  • Help Page. App Screenshot

  • plan page. App Screenshot

Tech Stack

  • Client: React, Styled-Components and Chakra-UI for Styles

  • Server: NodeJS, Express, Mongo-DB for database

Features

  • Token based authentication.

  • Each user has seprate data connected to his/her profile.

  • Total amount of calories will saved day wise and displayed in graphical format.

  • Displayed macro and micro nutrients composition.

  • Complete Rest-API for authentication, login, signup functionality and rest other things.

Author

Feedback

If you have any feedback, please reach out to us at [email protected]

nutrimeter's People

Contributors

amandk5 avatar ghanishtkhurana avatar harshu878 avatar madhavi-teegireddy avatar shrikantjawla avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

shrikantjawla

nutrimeter's Issues

fw20_0220_day-3

  • Home Page
  • Sections for nutrition
  • Healthy habits sections
  • Responsiveness

diary-I

  • Dairy-layout
  • calender-column

day3_issue2

  • made input responsive group
  • adjust with navbar responsiveness

Day-II

  1. Blog Page
  • create layout for blog page
  1. Blog Post
  • create cards for blog post
  1. Blog Post Data
  • create the objects including blog image,title etc.

Backend for diary Page

  • set MongoDB database
  • add food items data to the database
  • make rest-API for the dairy page
    -[ ] add all crud operations like deleting and adding and changing the amount of serving through API

Day-III

  1. Blog Archives
  • work on the search the blog archives section
  • add search functionality
  1. Blog Category Page
  • create a separate page for displaying the blog category
  • create category objects including image and info

Day-IV

  1. Single Blog Page
  • create separate page to display a particular blog post
  • create objects for all the blog post
  • create the layout and fill all the info

Project Review

#Functionality Wise

Pros

  • Good job on client side data validation
  • Wireframing looks good.
  • Good job on using API's to fetch the data for website ionstead of just static content

cons

  • After login, all the tabs show the same page.
  • On a meta level , Always remeber if certain feature you haven't implemented properly then just remove it. A Website with few working features is more
    interesting and functional than a website with n different things out of which only few works.

#Coding

  • UI

  • Pros

    • UI looks good , looks attractive , good job on that part .
    • The wireframe looks great overall.
    • The navigation is smooth on the site.
    • latency is within limits on event fires.
    • Functionality those are included works fine although some enhancements could've done .
    • Redux arch is used properly , kudos on that .
    • Hooks understanding is also on point .
    • Standard Coding practices are used .
  • Cons

    • Some links are broken(e.g. the Trends tab after login)
    • No comments in code / Always include comments
  • Backend

    • Good job on data validation.
    • Good job on authentication.
    • Use of API's for fetching data on website.

Day-V

  1. Plans Page
  • create the layout for the plans page including the components required
  • fill in all the information to be displayed over there

Diary-IV

  • fetch data using Axios
  • check responsiveness and other functioning
  • final check

Diary-III

  • create an energy summary table
  • circle progress bar components
  • macronutrient target table
  • nutritional score table
  • highlighted nutrients table

DAY-2 harsh

  • creating back-end for signup
  • creating mongo database

Diary-II

  • Dairy add food navbar
  • added food display table
  • pop-up to add food items with serving amount
  • connect it with serving API

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.