This project is a video player application developed using the React library and the ViteJS framework using Typescript. It is designed to provide a user-friendly interface for playing videos. In addition to these core technologies, Redux was initially used for state management but was later replaced with Zustand, both of which handle component state management efficiently. The Axios library was employed for making API requests. Finally, unit tests were written to ensure the proper functioning of state management in components.
- Seamless video playback experience.
- State management powered by Zustand, ensuring efficient component state handling.
- Integration with Axios for making API requests.
- Comprehensive unit tests for state management.
To get started with this project, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/your-video-player-project.git cd your-video-player-project
-
Install dependencies:
npm install
To run the application locally, use the following command:
npm run dev
This will start the development server, and you can access the application in your browser at http://localhost:5173
.
This project initially used Redux for state management, but it has been replaced with Zustand for more efficient component state management. You can find the Zustand store configurations in the src/zustand
directory. State management ensures that the application's components maintain their data consistency and synchronization.
API integration is facilitated by the Axios library and a fictitious database created using json-server. You can find the API-related code in the src/lib
directory.
The json-server library was used to emulate a server, providing a fictitious database. The file server.json
in project root directory, describe the data.
Run the following command, to execute the server:
npm run server
This allows the application to fetch data from the emulated server seamlessly, enhancing its functionality.
Unit tests have been written to ensure the proper functioning of state management within the components.
You can find these tests in *.spec.ts
files.
To run the tests, use the following command:
npm run test
Running the tests ensures the reliability and stability of the application.
Feel free to explore and further customize this project to meet your specific requirements!