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

1. Overview

   -Objective

   - challenges

   -preview

   -Links

2. Deep Dive

   - Thought Process

   -Built with

   -Some codes to see

3. Road Blocks

4. Experienced Gained

5. Useful Resources

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