This project demonstrates an effective strategy for managing custom data structures—specifically, a stack—within a Next.js application using Zustand for global state management. The goal is to explore and establish the best practices for synchronizing a custom data structure between local component state and global Zustand store, ensuring UI consistency and reactivity.
- Custom Stack Data Structure: Implementation of a classic stack data structure with methods like
push
,pop
,peek
, and more. - Zustand Store Integration: Utilizes Zustand for managing the global state of the stack, including a method for syncing the local stack state with the global store.
- React Hooks for Local State Management: Demonstrates using React hooks (
useState
,useEffect
) for handling local state of the stack within components. - Efficient State Updates: Showcases a pattern for ensuring component re-renders when the stack's state changes, leveraging cloning to handle reference-based state updates.
To get started with this project, clone the repository and install the dependencies:
git clone https://your-repository-url.git
cd your-project-directory
npm install
Make sure you have Node.js installed on your system to proceed with running the project.
To run the Next.js application:
npm run dev
This will start the development server, making the app accessible via http://localhost:3000
.
The stack is implemented in dataStructures/stack.js
and is integrated into the application via a Zustand store defined in store.js
. Components interact with the stack using a local state that is initially synchronized with the global state and provide UI controls to modify the stack.
The main component, DataViewComponent
, allows users to push random data onto the stack and pop the last entry, showcasing the stack's LIFO behavior.
Contributions to improve the project are welcome. To contribute:
- Fork the repository.
- Create a new branch for your feature (
git checkout -b feature/AmazingFeature
). - Commit your changes (
git commit -m 'Add some AmazingFeature'
). - Push to the branch (
git push origin feature/AmazingFeature
). - Open a pull request.
Distributed under the Apache 2.0 License. See LICENSE
for more information.
- Zustand for providing a minimalist yet powerful state management solution.
- Next.js for the React framework that enables server-side rendering and static site generation.