NPM Navigator is a React application designed to provide a smooth experience for searching and viewing package details from the NPM Registry. Built with React, TypeScript, Redux Toolkit, and Axios, it offers structured state management and efficient API communication.
This project allows users to:
- Search NPM packages and get relevant information.
- See package details like description, number of maintainers, and license.
- Use Redux Toolkit for optimized state management.
- Handle API requests asynchronously using Axios.
- Enjoy a responsive and clean UI built with Material UI.
It is a good example of how modern frontend tools work together to create user-friendly applications for data exploration.
- React: Component-based user interface.
- Vite: Fast build tool and development server.
- Redux Toolkit: Simplified global state management.
- React Redux: Official React bindings for Redux.
- Axios: HTTP client to fetch data from APIs.
- Material UI: UI components and styling framework.
- TypeScript: Strong typing for better code quality and maintainability.
Follow these steps to run the project locally:
-
Clone the repository:
git clone https://github.com/maitepv87/npm-navigator.git cd npm-navigator
-
Install dependencies:
npm install
-
Set up environment variables in a .env file:
VITE_API_URL=https://registry.npmjs.org
-
Start the development server:
npm run dev
Then open http://localhost:3000 in your browser.