https://github.com/maitepv87/npm-navigator
React-based project utilizing Redux Toolkit for state management and Axios for API integration with the NPM Registry. Includes efficient package search, structured metadata display, loading indicators, and error handling for a seamless user experience, built with Material UI for a modern interface.
https://github.com/maitepv87/npm-navigator
axios material-ui react-redux react-redux-toolkit react-router-dom
Last synced: 10 months ago
JSON representation
React-based project utilizing Redux Toolkit for state management and Axios for API integration with the NPM Registry. Includes efficient package search, structured metadata display, loading indicators, and error handling for a seamless user experience, built with Material UI for a modern interface.
- Host: GitHub
- URL: https://github.com/maitepv87/npm-navigator
- Owner: maitepv87
- Created: 2025-05-29T15:48:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-05T17:13:08.000Z (about 1 year ago)
- Last Synced: 2025-07-18T11:10:03.347Z (11 months ago)
- Topics: axios, material-ui, react-redux, react-redux-toolkit, react-router-dom
- Language: TypeScript
- Homepage: https://npm-navigator.vercel.app/
- Size: 258 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NPM Navigator
## Description
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.
## Technologies Used
- **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.
## Getting Started
### Installation & Setup
Follow these steps to run the project locally:
1. Clone the repository:
```bash
git clone https://github.com/maitepv87/npm-navigator.git
cd npm-navigator
```
2. Install dependencies:
```bash
npm install
```
3. Set up environment variables in a .env file:
```ini
VITE_API_URL=https://registry.npmjs.org
```
4. Start the development server:
```bash
npm run dev
```
Then open http://localhost:3000 in your browser.