Counter App

Am so happy and motivated as I write my first official blog, this will be the 1st of many to come, am a frontend Engineer, did I just say that yeah!! I did, am a student of At school Africa in the FrontEnd track hoping to be a badass developer someday, I built a counter App during my Second-Semester Examination

This project is really exciting for me. It contains interesting features that could serve as a practice project for anyone trying to get their hands dirty with react, without further ado let's delve right in.

Content

Overview

-Objective

- challenges

-preview

-Links
Deep Dive

- Thought Process

-Built with

-Some codes to see
Road Blocks
Experienced Gained
Useful Resources
Acknowledgement

Overview

Objective

The people counter app can be used to count occupants in a building or an organisation, it can also be used offline or connected to a dashboard that can report entrances, exists, building capacity and real-time occupancy.

Preview

I created my counter app project with React.js

I also created files in my component folders such as

-Home page

-custom counter page

-Reducer hooks

-Error Boundary page

The counter app shows the implementation of custom hooks and use Reducer with increment, decrement and set Value rendered in different pages in the component and also the Error boundary page

Challenges

I faced some challenges while creating Counter App, I was asked to implement a combination of state with use reducer, and I was able to solve the problem by doing further research on use reducer and also reading react documentation.

Links

link to the GitHub repository

The people counter App Repo

Some codes to see (useReducer)
```
 const initialState = { count: 0}
 const reducer = (
   state = initialState,
 ) => {
   switch (action.type) {
     case "increment":
       return { count: state.count + 1 };
     case "decrement":
       return { count: state.count - 1 };
     case "reset":
       return {count: 0}
       default:
         return state
   }
```
continuation of the codes
```
 const userReducer = () => {
   const[state,dispatch] = useReducer(reducer, initialState)
   const increment = () =>{
     dispatch({type:"increment"})

   }
   const decrement = () =>{
     dispatch({type:"decrement"})

   }
   const setValue = () =>{
     dispatch({type:"setvalue"})

   }

   return (
     <div>
       count: {state.count}
       <br> </br>
       <button onClick={increment}>Increment</button>
       <br> </br>
       <button onClick={decrement}>Decrement</button>
       <br> </br>
       <button onClick={setValue}>setValue</button>

     </div>
   )
   };
```
Experienced Gained

During the making of the counter project, I learnt and grew to a great extent in my software journey @ AltSchool Africa

I had a better understanding of some React.js concepts such as components, hooks etc

Useful Resources

Stackoverflow

youtube Tutorials

AltSchool LMS

React Documentation

Acknowledgement

Special thanks to AltSchool Africa for creating the medium and giving me a platform to realize my dreams of becoming a world-class developer, connecting with wonderful people and being taught by some of the brightest minds in Tech such as Setemi Ojo, Maye Edwin

special thanks to our program manager Uke Jerry and our dearest community manager Tabitha Kavyu

In conclusion, I hope this article has been able to share my experience, hard work and story on how the 2022 AltSchool Africa Counter App project was created.

Tinuola Boroni's Blog

Counter App