Skip to main content

[ Intro ] Nutracker, ReactJS application Step By Step









I worked before on learning angular 2+, and made a sample functioning app that tracks calories &  macros, called it NUtracker.


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 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.

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-nutracker

Series Parts


Comments

Popular posts from this blog

Android RecyclerView - Adding Empty View

So RecyclerView was introduced to replace List view and it's optimized to reuse existing views and so it's faster and more efficient as stated in the documentation: https://developer.android.com/training/material/lists-cards.html While using it, I faced the issue of missing a useful functionality that is implemented in ListView. that feature is setting an empty view in case there was no records. In ListView it was as simple as this View emptyView = findViewById(R.id.mylist_empty_view); ListView  myList = .... myList.setEmptyView(emptyView); but this method doesn't exist for recycler view so we need a work around until android team fixes this. and here are the screen shots of both list view and recycler view fix List view : Recycler view : here is how I fixed it: here is the content of empty_view, it can be anything. Enjoy.

[PART 5] NuTracker ReactJS app - Add Login & Profile using Router

In the previous part we finished the dashboard read functionality, now we want to add the skeleton for other pages: - Login   In this page the user will be able to login to their account and the dashboard won't show unless the user is logged in. - Profile In this page the user will be able to update their daily nutrition goals that they can track in the dashboard. to be able to have multiple 'pages' in react and navigate from one to one, we need something that can switch the rendered content based on what we want, we can do that with if statements in the App components and store some location state, but why invent the wheel. React Router every major single page app web framework has the routing concept and functionality to interact with the usual browser urls and switch the content based what user should see. for example on the profile page I want the url path to be /profile, and for login to be /login and so on. in more advanced cases you want the users

Microservices 101, Docker & spring boot sample [Windows 10, home]

This is a very simplistic article :) if you are looking for a deep dive in microservices, see my state-of-the-art microservices full archeticture here: http://dev.basharallabadi.com/2019/03/part-1-spring-state-of-art.html   What are micro services? It's an architectural model for web services that basically requires each service** to be completely independent and loosely coupled from other consumer services, or services that it depends on. and it's not a new idea but it's catching pace in today large scale web applications. ** (by service we mean a component that controls and implements the business logic in a self contained manner, like orders service, products catalog service, accounts management service, all of these have their domain and can be clearly separated)   Why micro services emerged ? 1- Easy to scale services: if you have a single application and all the services share the same code base and war (package) then if you receive high demand on one