Photo by Ryland Dean on Unsplash

contrary to the text on the cover, there were bad moments in this project.

Intro...

Hello, I'm Nasirullah. This is my first time writing a technical article, and probably your first time reading an article I authored. I hope I'm able to complete a straightforward and informative article. looks like this is going to be a long read, let's go!

Now, let's skip to the good part. I developed a React JS app recently as an exam project for my second semester of study at AltSchool Africa, a one-year diploma online school focused on building software engineers in Africa. The project was to build a counter app that implemented the following concepts:

• Custom counter hook (with increment, decrement, reset, and setValue functions)

• Combination of states with a useReducer hook that implements a counter with the four evident features in the custom hook

• Pages for the custom hook, useReducer , 404, and a page to test error-boudary

• Good UI and SEO

I used vanilla CSS for the styling as one of my instructors encouraged, but I plan to take up one or two styling libraries soon.

My solution and the issues it shipped

After a series of classes, it was time to put my skill and retention to the test. I didn't find the task easy from the start, as a second-year student at the university preparing for resumption after industrial action by the ASUU. I just started React a few months ago, and I didn't have time to build projects while learning "I started projects but couldn't finish them, I plan to finish them all and send them to my GitHub repo this year" since I was helping out while I was home and barely managed to keep up with classes, but I trusted my brain to 'show up'.

I used Stackblitz online IDE and started with the basic React app structure. Then I created the component folder📂 and the following components to implement pages and functionality of the app;

• Navbar📂➡️ Navbar.jsx and Navbar.css

• Home 📂➡️Home.jsx and Home.css

• HookCounter📂➡️ useCounter.jsx, HookCounter.jsx and HookCounter.css

• ReducerCounter📂➡️ ReducerCounter.jsx and ReducerCounter.css

• NotFound📂➡️ ErrorFallback.jsx, NotFound.jsx and NotFound.css

In the src 📂 I created an ErrorBoundary styled component named Error.jsx and created a probably not working ErrorBoundary, as I couldn't get the hang of testing it and had to push it before the deadline alongside aggressive classes at my school (FUT Minna).

I finished working on the capabilities, even with glitches and a not-so-good UI, you can see it here; My First Code. I had several days and hours of frustration here since my mentor got busier, but then I discovered that I had tenacity when I calm down.

Improved and interactive UI counter app

After a stressful first half of FUT's and AltSchool's semester. During the holidays, I had to work on two projects a vanilla HTML and CSS project and improve my Counter App.

The vanilla HTML project was a walk in the park since I had mastered the art of writing markup in HTML. Before I begin working on my counter app I went back to the React Docs to understand the React framework much better with emphasis on Hooks which I had a hard time understanding, adding to my resource was YouTube to see the implementation of unfamiliar but useful Hooks useRef and useContext. I used them in the improved code.

I revamped my app by improving the functionality for the setValue functions that weren't working earlier, also improved the app to show an error message when you input any value other than a number. Starting with the custom hook I created a useCounter component which we will use in HookCounter. Under the useCounter function I created the error states to track the error

const [error, setError] = useState('0');

To catch when you input any value other than a number and display an error message for 30 secs,

// Add a function to set the error message and start a timer to clear it
  const setErrorMessage = (message) => {
    setError(message);
    setTimeout(() => {
      setError('');
    }, 30000);
  };

  // Add an event listener to the window object to listen for the "error" event
  useEffect(() => {
    window.addEventListener('error', (event) => {
      setErrorMessage(event.error.message);
    });
  }, []);

To setValue from inputValue I did this.

const set = (inputValue) => {
    const value = Number(inputValue);
    if (isNaN(value)) {
      // Value is not a number, throw an error
      throw new Error('Value is not a number');
    }
    setCount(value);
  };

Then in the HookCounter, using the useRef hook and event handling handleSetClick I catch the input value & error, then use it to set the initialCount of the counter and set the error message to display when the error is caught.

const handleSetClick = () => {
    const value = inputRef.current.value;
    try {
      set(value);
    } catch (error) {
      setErrorMessage(error.message);
    }
  };

The app is now better (functionality and UI), though with a bug that throws an error after a while which I should be able to work on before the end of the week. You can check it out yourself: preview <> the-repo.

The landing page follows a simple approach with the hero and features sections.

Moving forward

We just started Vue. It looks easy as my mentor told me since I have known another framework (React).

Building this project has exposed me to several features of React and I now plan to build at least one project based on React every month for the year, joining the #coding360challenge on Twitter, which also means you can watch out for more articles like this, though not this long😌. I'm also working on my portfolio based on React watch out

Thanks for reading until here, Softcruder♥️.