Sidemenu with Context API and useEffect

This is a Stripe web clone built with ReactJS. The app features a sidebar menu with submenus that are displayed when hovering over the buttons on the navigation menu. The state management is achieved using the Context API and useEffect hook.

How It's Made

The app is developed using ReactJS. The sidebar menu and submenus are rendered conditionally based on the state managed by the Context API. The useEffect hook is used to handle side effects, such as updating the state or subscribing to events, when the component mounts or certain dependencies change.

Tech used

ReactJS Context API useEffect hook

Functionality

The Stripe web clone provides the following functionality:

Sidebar Menu: The app features a sidebar menu that displays various buttons representing different sections of the web application.

Submenus: Hovering over the buttons on the navigation menu triggers the display of submenus, providing additional options or categories related to the selected section.

Context API: The state management of the sidebar menu and submenus is achieved using the Context API. The state is shared among components, enabling seamless communication and updates.

useEffect Hook: The useEffect hook is utilized to handle side effects, such as updating the state or subscribing to events, when the component mounts or specific dependencies change.

What I Have Learned

During the development of this Stripe web clone, I have gained valuable knowledge and experience in the following areas:

ReactJS: I have furthered my understanding of ReactJS and its component-based architecture.

Context API: I have utilized the Context API to manage global state and enable communication between components.

useEffect Hook: I have leveraged the useEffect hook to handle side effects and manage component lifecycle events.