For live running version (angular) : here. (buggy as it's just prototype, after registration set your profile goals first otherwise it will look broken).
Main functionalities:
- search for foods from a db- add new food to the db
- add them as daily entries
- calculate the total daily intake of calories, carbs, fats & protein with respect to the daily goals
- users can set the goals in their profile screen.
- login/registration screen.
- move back and to see other days entries.
- edit/remove entries
Why?
in this series of blogs I'll try to replicate this angular project in react, for two reasons:1- get a sense of both framework and compare them to each other apple to apple.
2- apply what I learn about react & it's eco-system in a project and solve the problems I face.
The main goal of this blogs series is
To document how an app starts and evolves overtime and how to handle real case needs step by step*
* by step-by-step i don't mean line by line of code, but rather steps in the project and adding functionalities, so each part I'll be talking about a commit or two that aimed to fulfill a need or implement a specific functionality while trying to be focused on new things and not repeating, so you will need to figure out some details. I won't suggest following my exact example but rather build your own app wit this as an example of how and what to expect.
Learn React
I mainly learned react (serious learning) from this book: Full Stack Reactthe good thing about books is that you get a good foundation and intuition of how things work and why in more details than other sources, However, you can learn reactJS basics anywhere in 1 hour or so which can be enough to follow this series.
Prerequisites:
- you know html , css, javascript ES6+, bootstrap- you know what npm is and what package.json and got NodeJS installed.
- you know what reactJS is as framework and the basic concepts (state, props, reactivity, render( ), JSX, components) but didn't necessarily worked with react in a project.
Repository
https://github.com/blabadi/react-nutrackerSeries Parts
- Part1: Creating the project and adding the first component.
- Part 2: Adding redux foundation.
- Part 3: Adding the first async call action by using redux-thunk middleware.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.