DEV Community: Yoav Sabag

I built a simple fitness tracker to fix my own problem — here’s the stack I used

Yoav Sabag — Wed, 14 May 2025 20:00:52 +0000

I recently launched RepsRise.app — a minimal app to track calisthenics workouts (pushups, pullups, dips, etc.). I built it because I kept forgetting how many reps I did and had no idea if I was actually progressing.

Right now it's still an MVP, but it works. I kept the tech simple to move fast:

HTML + JS — just enough to build what I need
TailwindCSS — for quick styling without thinking too hard
DaisyUI — great for fast UI components that don’t look like garbage
localStorage — to persist workouts for now (may switch to Firebase later)

The goal was to ship something useful fast. I do what I call "vibe coding" — no strict plan, just building in flow.

I’ve also been using Cursor AI as my editor lately, which actually fits that style. It doesn’t overtake the process, just helps me move faster when I get stuck or bored.

It’s not perfect, but it’s live, and it’s already helping me stay consistent with training. If you're into calisthenics or like seeing small web apps, feel free to check it out:

👉 https://RepsRise.app

Would love thoughts, feedback, or ideas if you’ve built something similar!

React Redux

Yoav Sabag — Thu, 22 Dec 2022 16:21:44 +0000

This post was originally posted on my blog @ easy-code.blog

Redux is a popular state management tool that can be used in conjunction with React to manage the state of an application. It works by implementing a unidirectional data flow, in which actions are dispatched to a central store, which then updates the state of the application and sends the updated state back to the components that need it.

Here's a high-level overview of how Redux works with React:

The user interacts with the React components in the application, triggering an action to be dispatched.
The action is a JavaScript object that describes the change that needs to be made to the application state. It is sent to the Redux store.
The Redux store receives the action and uses a reducer function to update the state of the application based on the action. The reducer function is a pure function that takes in the current state and the action, and returns the updated state.
The updated state is sent back to the React components, which use the new state to re-render and display the updated data to the user.

Using Redux with React can help you manage the state of your application in a centralized and predictable way, making it easier to reason about and debug your code. It also enforces a strict unidirectional data flow, which can make your application easier to test and maintain.

Before we start

Add the Redux Toolkit and React Redux packages to your project:

npm install @reduxjs/toolkit react-redux

Some code to understand:

In this example, I will show how to use Redux on a counter application. For that, we need the following:

createSlice() is a function that get a name, initial state and reducers.

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
    name: 'easyCounter',
    initialState: {
        counterValue: 0
    },
    reducers: {
        incrementValue: (state) => { 
            state.counterValue++
        },
        decrementValue: (state) => {
            state.counterValue--
        },
        addByAmount: (state, action) => {
            state.counterValue += action.payload
        }
    }
});

export const { incrementValue, decrementValue, addByAmount } = counterSlice.actions;
export const selectCount = (state) => state.easyCounter.counterValue;

export default counterSlice.reducer;

configureStore() which will holds the state of the application. Changing the state is allowed through dispatch(action).


import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Usage in the Components Now we can read the data from the our store using the useSelector() hook, and to update new values using the useDispatch()

import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { incrementValue, decrementValue, addByAmount, selectCount } from './counterSlice'

export function EasyCounter() {
    const count = useSelector(selectCount);
    const dispatch = useDispatch();
    const [inputValue, setInputValue] = useState('10') ;

    return (
        <div>
            <h1>Counter value: {count}</h1>
            <button onClick={() => dispatch(incrementValue())}>Plus 1</button>
            <button onClick={() => dispatch(decrementValue())}>Minus 1</button>
            <div>
                <input 
                    value={inputValue}
                    onChange={e => setInputValue(Number(inputValue))}/>
                    <button onClick={() => dispatch(addByAmount(Number(inputValue)))}>Add value By Amount</button>
            </div>
        </div>
    );
}

Use <Provider> and provide the the Redux store so the it will be available to our React components. Open your index.js file and add the <Provider> as the following example:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'

import store from './app/store'
import { Provider } from 'react-redux'


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Some practices

We all agree that the better way to really understand code or framework is get your hand dirty. So you are welcome to do that, but for now I picked up some GitHub projects that use React Redux.

Tetris - This project is a Tetris classic game

Spotify Client - This project is a client that communicates with the Spotify API.

Fakeflix - This project is inspired from Netflix. The project is mid-level complexity.

Last note:

It's important to note that Redux is just one of many options for global state management in a React application. Other popular options include MobX and the React context API.context API](https://reactjs.org/docs/context.html).

Happy Coding 👨🏼‍💻👩‍💻

React best practices

Yoav Sabag — Sun, 18 Dec 2022 12:26:50 +0000

This post was originally posted on my blog @ easy-code.blog

As React is the most popular web framework according to Stackoverflow survey for 2022 I would like to show you some code best practices to improve your coding.

Arrow Functions:

An arrow function is the compact alternative to function expression and can let your code be cleaner.

//Instead of doing that:
function addNumbers(x, y) {
    return x + y;
}

// Better to use:
const addNumbers = (x, y) => x + y;

// With block body, explicit "return" needed
const addNumbers = (x, y) => {
    return x + y;
}

Object destructuring assignment:

The destructuring assignment syntax is an expression that makes it possible to unpack properties from objects, into distinct variables.

var myData = {
    date: new Date('2022-11-18T22:12:03.284Z'),
    data: 'This is my data',
    dataCounter: 42
}

const {date, data, dataCounter} = myData;
// Now your object is separate into distinct variables.
console.log(date, data, dataCounter);

Avoid "CSS-in-JS" or "Inline Styling" patterns:

"CSS-in-JS" or "Inline Styling" refers to a pattern where CSS is composed using JavaScript instead of defined in external files.
for example:

const myTitle = '{easy-code} blog'
const TitleText = <div style={{fontSize: 1em}}>{myTitle}</div>

Those patterns will makes your JSX code not clean and harder to maintenance, if you often find yourself writing code like this, better to export your styles into different css file. Doing this will allow you reuse your styling without duplicate your code and your component will be smaller and easily to understand and use.
For example:

const myTitle = '{easy-code} blog'
const TitleText = <div className='title'>{myTitle}</div>

The css should look like this:

.title {
    font-size: 1em,
    font-weight: bold;
}

Add Keys to the elements inside the array:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
for example:

const users = [{id: 1, name: ''}, {id: 1, name: ''}];
const IdxItems = <ul>{
    users.map((user) => 
        <li key={user.id}>{user.name}</li>
    )}
    </ul>;

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Therefore, use IDs from your data would be a good key choose.
But when you don't have stable IDs and unique so React will render your items correctly, you can use the item index as a key.
For example:

const users = [{name: ''}, {name: ''}];
const IdxItems = <ul>{
    users.map((user, index) => 
        <li key={index}>{user.name}</li>
    )}
    </ul>;

Be aware!

It is not recommended to use indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.
If you’re interested in learning more, you can find more details Here.

Always destructuring your Props

Using Props allow you component to reusable which will make your code clean. Therefore, again destructuring object come to help you.

const Header = ({title, iconSrc}) => {
    return (
        <div>
            <h1>{title}</h1>
            <img src={iconSrc}/>
        </div>
    );
}

Use equality (==) and avoid strict equality (===)

While you compare your objects, try avoiding the strict equality (===) operator as is could lead to misleading evaluation.
For example:

const result = '32' === 32 // false

const result = '32' == 32 // true

The reason is that the strict operator checks whether its two operands are equal, returning a Boolean result. The strict operator will return True only if the operands have the same type. Unlike the equality operator (==) which will compare the values without consider the operands type.

You can find another advantage to use equality (==) with objects.
For example, if you have some null object and you need to compare it to undefined object which most of the time handle with the same logic.

const obj1 = null;
const obj2 = undefined;

const result = obj1 === obj2 // false

const result = obj1 == obj2 // true

Now you can go and start coding better, hope you enjoy! 🙏🏻

Happy Debugging 👨🏼‍💻👩‍💻

React custom hook

Yoav Sabag — Sun, 18 Dec 2022 12:13:18 +0000

This post was originally posted on my blog @ easy-code.blog

Hooks are a new addition in React 16.8 and above. They let you use state and other React features without writing a class.

Building your own Hooks lets you extract component logic into reusable functions.

Let's take a look into this simple hook example:

import React, {useState} from 'react';

const CounterApp = () => {
     // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);

    return (
        <div>
            <h1>Your number is {count}</h1>
            <button onClick={() => increment()}>
             Increment 
            </button>
            <button onClick={() => decrement()}>
             Decrement 
            </button>
        </div>
    );
};

export default CounterApp;

In the above example you will notice that when logic will have more cases it will be difficult and unable to reuse.

Extracting a Custom Hook:

When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too!

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. For example, useCounter below is our first custom Hook:

import React, {useState} from 'react';

const useCounter(value? : number) {
    // use parameter value or init with 0 value.
    const [count, setCount] = useState(value || 0);

    const incrementCounter = () => setCount(count + 1);
    const decrementCounter = () => setCount(count - 1);

    return {
        count,
        setCount,
        incrementCounter,
        decrementCounter
    }
}

export default useCounter;

Using the Counter Hook:

import React, {useState} from 'react';
import {useCounter} from './my-counter-hook'

const CounterApp = () => {
     // Declare my Counter hook
    const [count, setCount, incrementCounter, decrementCounter] = useCounter(0);

    // extend for reuse
    const reset = () => setCount(0);
    return (
        <div>
            <h1>Your number is {count}</h1>
            <button onClick={incrementCounter()}>
             Increment 
            </button>
            <button onClick={() => decrementCounter()}>
             Decrement 
            </button>
        </div>
    );
};

export default CounterApp;

useYourImagination()

Custom Hooks offer the flexibility of sharing logic that wasn’t possible in React components before. You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven’t considered.

Happy Debugging 👨🏼‍💻👩‍💻