Forem: Ikem O

Upskilling In Tech (The 1 Hour Rule)

Ikem O — Tue, 01 Apr 2025 23:08:40 +0000

I’ve been in the tech space for three years. It’s a very competitive environment that requires you to constantly be on your toes, upskilling as much as possible.

Naturally I’ve developed my own way of constantly learning which took me from newbie programmer to Fullstack web and mobile app developer and future DevOps engineer. I’ve learned and mastered my tech stack to a reasonable extent which includes:

ReactJs & NextJs for web frontend
React Native for Android and IOS.
NodeJS (ExpressJS and AdonisJS) for the backend
MySQL and MongoDB for database
AWS cloud services for deployment/hosting

How did I do it?

I dedicated at least 1 hour a day to learning.

Even back in my school days, when I had to attend lectures, do assignments and study for exams and I felt too tired to work on my tech skills, I just had to remind myself “It’s just one hour”. I’ve also found that it’s best to have that 1 hour session first thing in the morning because that is when you are least tired, it’s easier for your brain to soak in new information.

Benefits of Learning for Just 1 hour a day.

1 hour of maximum focus with zero distractions is much better than 8 - 12 hours of learning that’s mixed with distractions from social media and other factors in your immediate environment.
You can happily go about the rest of your day knowing that you’ve already dedicated a whole hour to improving your skills. Since it’s such a short period of time that ends quickly, you can anticipate the next 1 hour session the following day.
1 hour is enough time to learn enough without overloading your brain with too much information. Any information you try to assimilate beyond the 1 hour mark will probably have a hard time sticking.
You are leveraging the 80/20 principle which suggests that 80% of results come from just 20% of your efforts. Someone who spends 6 - 8 hours a day learning will be most focused in only the first hour or two, the remaining time will be spent learning with distractions like social media, getting hungry or thirsty, getting tired and falling asleep, etc.
You can further boost your productivity within your 1 hour session by dividing it into two 25 - 30 min sessions with a 5 min break in between where you leave your desk and go outside, at the end of both sessions, you barely feel like you’ve done any work at all.

I’m a big believer in the 1 hour rule as a way for tech professionals to stay constantly improving, avoiding stagnating in the fast paced tech world.

My Software Development Process

Ikem O — Tue, 01 Apr 2025 22:47:26 +0000

Having built a couple of projects from start to finish. I’ve noticed a simple process that I naturally default to when it comes time to tackle a new Fullstack application project. Here it is:

Talk to the client: I first start by hopping on a call with the client so that I can listen to him explain what exactly he is trying to build. This helps me to understand what problem he is trying to solve using the software. Usually they have big ideas for their application, a whole lot of features that would take a long time to build so I try to narrow it down to the most important thing.
Requirements Document: After the call, I ask the client to prepare a document listing and explaining each individual feature that they want in the application. Most of the time, any serious client will already have this available which he sends and I take my time to read through.
Development schedule/timeline Document: One of the most important things that a client wants to know is how long the project will take to be completed. It’s difficult to just give an estimate off the top of my head, hence why the Development Schedule document is needed. All I need to do is look at each individual feature in the requirements document and assign a timeframe of 1 or 2 weeks depending on the complexity. I also throw in an extra week here and there for features that I have no experience building or have some uncertainty with. At the end, I add up all the weeks to give the total estimated time for the entire project. I also avoid trying to impress the client with short timeframes that’ll be difficult to meet up with, it’s better to give too much time and complete a feature before the deadline than to give short timeframes and miss deadlines.
Figma Designs: A client may already have designs available and we can get straight to work. If they don’t then I proceed to refer to them a designer to work with if they don’t know any.
Database Design: Now that I have both a requirements document and figma designs, the next step is to study both of them and use dbdiagrams.io to do some basic database modelling just to get an overview of what tables l need to create in the database and what their relationships are. An e-commerce site for example, will have tables for users, products, orders, transactions, carts, etc. I try to predict what queries I would need to make when I start writing my controllers and I include fields in the tables that would make the queries possible. I’ve found that it’s important to not overthink this part or try to be perfect, requirements may change mid development and you can always figure things out as you go.
Database Migration files and Models: For my backend, my go to NodeJs framework is AdonisJS. I love it because it comes with libraries for building production ready applications out of the box such as auth, emails, CORS, migrations, seeders, etc. It also uses Typescript. So, I create a basic AdonisJS app, and using my Database design, I prepare database migration files and models that match, This is easy because AdonisJS framework makes use of Lucid ORM for handling MySQL queries under the hood.
Build UI: For building the UI/frontend of the application, I use ReactJS, NextJS if SEO is important. I use Atomic Design pattern, the folder structure involves categorizing my components into Templates, Organisms, Molecules and Atoms. Basically, an atom is the most simple component usually made of just one element, example is a button. A molecule is a combination of two or more elements, example is a Search bar which is a combination of an input and button. An organism is a more complex component such as a navigation bar. Finally, organisms and molecules come together to form the template for an entire page.
Deployment and Demo: After completing the first feature on the development schedule, it’s time for a demo. If the client doesn’t have an AWS account then I deploy the backend on render.com and the frontend on netlify.com or vercel.com for free. Depending on the client’s preference, we can hop on a call where I share my screen and Demo or just do a quick loom screen recording and send the link along with the Netlify or Vercel link for the client to test. I repeat this for every other feature in the document till the project is finished.

This is my current process for ensuring a successful delivery of fullstack application projects. If you have any tips to give or anything I can start implementing to improve the process then I would like to hear it, thanks for reading!

HANDLING AUTH IN REACT APPS USING NANOSTORES AND CONTEXT API

Ikem O — Sat, 17 Aug 2024 21:41:32 +0000

In my beginner days of building full stack web apps with ReactJs, I found myself confused about how to handle authentication in the frontend. I mean, what should you do next after receiving your access token from the backend? How do you preserve login state?

Most beginners would assume “Oh, just store your token in state”. But I found out quickly that it wasn’t the best solution, nor is it even a solution at all because, as most experienced ReactJs developers know, state is temporary because it gets cleared out each time you refresh the page and we definitely can’t have user’s logging in every time they refresh.

Fast Forward to now that I've gained a little bit of experience in building full stack apps in react, studying a more experienced developer’s approach to authentication and replicating the process in two other applications, I’d like to give a guide on how I currently handle it. Some people may not think that it’s the best way but I've adopted it as my way for now and I'm open to learning other methods used by other developers.

STEP ONE

You’ve submitted your email and password (assuming you’re using basic email and password authentication) to the backend to kick off the authentication process. I will not be talking about how auth is handled in the backend because this article is about how to handle auth solely in the frontend. I will skip to the part where you have received a token in the HTTP response. Below is a code example of a simple login form component that submits the email and password to the server and receives the token and user info in the response. Now for the sake of simplicity, my form values are managed with state, it would be much better to use a robust library like formik for production apps.

import axios from 'axios'
import { useState } from "react"

export default function LoginForm() {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")

    const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo
        } catch (error) {
            throw error
        }
    }

    return(
        <form onSubmit={handleSubmit}>
            <div>
                <input name="email" onChange={(e) => setEmail(e.target.value)}/>
                <input name="password" onChange={(e) => setPassword(e.target.value)}/>
            </div>
            <div>
                <button type="submit">
                    Login
                </button>
            </div>
        </form>
    )
}

STEP TWO

Wrap your entire application, or just the parts that need access to the auth state in an Auth context provider. This is commonly done in your root App.jsx file. If you have no idea what context API is, feel free to check the Reactjs docs. The examples below show an AuthContext provider component created. It is then imported in App.jsx and used to wrap the RouterProvider returned in the App component, thereby making the auth state accessible from anywhere in the application.

import { createContext } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {

    return(
        <AuthContext.Provider>
            {children}
        </AuthContext.Provider>
    )
}

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AuthProvider from "./AuthContext";

const router = createBrowserRouter([
    // your routes here
])

function App() {
    return(
        <AuthProvider>
            <RouterProvider router={router} />
        </AuthProvider>
    )
}

export default App

STEP THREE

In the auth context, you have to initialize two state variables, “isLoggedIn” and “authenticatedUser”. The first state is a boolean type which will be initially set to ‘false’ then updated to ‘true’ once login is confirmed. The second state variable is used to store the logged in user’s info such as names, email, etc. These state variables have to be included in the value for the provider returned in the context component so they can be accessible throughout the application for conditional rendering.

import { createContext, useState } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        <AuthContext.Provider value={values}>
            {children}
        </AuthContext.Provider>
    )
}

STEP FOUR

Nanostores is a package for managing state in Javascript apps. The package provides a simple API for managing state values across multiple components by simply initializing it in a separate file and importing it in any component where you want to make use of the state or update it. But, for the purpose of storing your auth token received in the HTTP response in step one, you will be making use of nanostores/persistent. This package persists your state by storing it in localStorage, that way it doesn’t get cleared out when you refresh the page. @nanostores/react is a react specific integrations for nanostores, it makes available the useStore hook for extracting values from a nanostore state.

So now you can go ahead and:

Install the following packages: nanostores, @nanostores/persistent and @nanostores/react.
In a separate file named user.atom.js or whatever you choose to name it, initialize an ‘authToken’ store and a ‘user’ store using nanostores/persistent.
Import them into your login form component file and update the state with the token and user data received in your login response.

npm i nanostores @nanostores/persistent @nanostores/react

import { persistentMap } from '@nanostores/persistent'

export const authToken = persistentMap('token', null)

export const user = persistentMap('user', null)

import { authToken, user } from './user.atom'

 const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo

            authToken.set(token)
            user.set(userInfo)
        } catch (error) {
            throw error
        }
    }

STEP FIVE

Now, in your auth context that wraps your app, you have to make sure that the token and user states are kept updated and made available throughout your entire app. To achieve this, you have to:

Import the ‘authToken’ and ‘user’ stores.
Initialie a useEffect hook, inside of the hook, create a ‘checkLogin()’ function which will check whether the token is present in the ‘authToken’ store, if it is, run a function to check whether it’s expired. Based on your results from checking, you either redirect the user to the login page to get authenticated OR… set the ‘isLoggedIn’ state to true. Now to make sure the login state is tracked more frequently, this hook can be set to run every time the current path changes, this way, a user can get kicked out or redirected to the login page if their token expires while interacting with the app.
Initialize another useEffect hook which will contain a function for fetching the user information from the backend using the token in the authToken store every time the app is loaded or refreshed. If you receive a successful response, set the ‘isLoggedIn’ state to true and update the ‘authenticatedUser’ state and the ‘user’ store with the user info received in the response.

Below is the updated AuthProvider component file.

import { createContext, useState } from "react";
import { authToken, user } from './user.atom';
import { useStore } from "@nanostores/react";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)
    const token = useStore(authToken)
    const navigate = useNavigate()
    const { pathname } = useLocation()

    function isTokenExpired() {
        // verify token expiration and return true or false
    }

    // Hook to check if user is logged in 
    useEffect(() => {
        async function checkLogin () {
            if (token) {

              const expiredToken = isTokenExpired(token);

              if (expiredToken) {
                // clear out expired token and user from store and navigate to login page
                authToken.set(null)
                user.set(null)
                setIsLoggedIn(false);
                navigate("/login");
                return;
              }
            }
        };

        checkLogin()
    }, [pathname])

    // Hook to fetch current user info and update state
    useEffect(() => {
        async function fetchUser() {
            const response = await axios.get("/api/auth/user", {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })

            if(response?.status !== 200) {
                throw new Error("Failed to fetch user data")
            }

            setAuthenticatedUser(response?.data)
            setIsLoggedIn(true)
        }

        fetchUser()
    }, [])

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        <AuthContext.Provider value={values}>
            {children}
        </AuthContext.Provider>
    )
}

CONCLUSION

Now these two useEffect hooks created in step five are responsible for keeping your entire app’s auth state managed. Every time you do a refresh, they run to check your token in local storage, retrieve the most current user data straight from the backend and update your ‘isLoggedIn’ and ‘authenticatedUser’ state. You can use the states within any component by importing the ‘AuthContext’ and the ‘useContext’ hook from react and calling them within your component to access the values and use them for some conditional rendering.

import { useContext } from "react";
import { AuthContext } from "./AuthContext";

export default function MyLoggedInComponent() {

    const { isLoggedIn, authenticatedUser } = useContext(AuthContext)

    return(
        <>
        {
            isLoggedIn ? 
            <p>Welcome {authenticatedUser?.name}</p>
            :
            <button>Login</button>
        }
        </>
    )
}

Remember on logout, you have to clear the ‘authToken’ and ‘user’ store by setting them to null. You also need to set ‘isLoggedIn’ to false and ‘authenticatedUser’ to null.

Thanks for reading!