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 ReactI mainly learned react (serious learning) from this book: Full Stack React
the 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.
- 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.
- 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.