NPM Registry Explorer

Welcome to the NPM Registry Explorer, a React-based web application designed to explore and display packages from the NPM registry. This project demonstrates the use of React Router for seamless navigation, along with clean, responsive UI components. It's a great addition to your portfolio showcasing modern web development practices.

🚀 Features

🌟 Home Page

• Displays featured packages fetched from the NPM registry.
• Provides quick access to detailed views of these packages.

🔍 Search Functionality

• Integrated search bar in the header to find NPM packages by name or keyword.
• Displays a list of matching packages with descriptions, keywords, and actions.

📦 Package Details

• A dedicated page for each package with in-depth information:
  • Name and description
  • License type
  • Author details
  • Number of maintainers

⚙️ Advanced Features

• Dynamic Routing: Implemented with React Router to enable:
  • Browsing individual package details (/packages/:name)
  • Searching packages (/search?term=your_query)
• Reusable Components: Modular components such as SearchInput, Header, and PackageListItem ensure scalability and maintainability.
• State Management: Managed search inputs and navigation using useState and useNavigate.

🛠️ Technologies Used

• React: For building the UI.
• React Router: For implementing routing and navigation.
• TypeScript: To add type safety and better development experience.
• TailwindCSS: For responsive and modern styling.
• NPM Registry API: For fetching package data.

🗂️ File Structure

src/
├── api/ # API-related functionality
│   ├── queries/ # API query files
│   │   ├── getFeaturedPackages.ts # Fetches featured packages
│   │   ├── getPackage.ts # Fetches details for a single package
│   │   └── searchPackages.ts # Performs a search for packages
│   └── types/ # Type definitions for API responses
│       ├── packageDetails.ts # Type for package details
│       └── packageSummary.ts # Type for package summary
├── components/ # Reusable UI components
│   ├── Header.tsx # Header component with navigation and search
│   ├── PackageListItem.tsx # List item for displaying package summary
│   └── SearchInput.tsx # Search input component
├── pages/ # Page components for routing
│   ├── Root.tsx # Root layout with shared elements
│   ├── details/ # Package details page
│   │   ├── DetailsPage.tsx # Component for displaying package details
│   │   └── detailsLoader.ts # Loader for fetching package details
│   ├── home/ # Home page
│   │   ├── HomePage.tsx # Home page component
│   │   └── homeLoader.ts # Loader for fetching featured packages
│   └── search/ # Search results page
│       ├── SearchPage.tsx # Component for displaying search results
│       ├── searchLoader.ts # Loader for fetching search results
│       └── searchResults.tsx # (Optional) Component for individual search results
├── App.tsx # Main application entry component
├── main.tsx # Application bootstrap and router setup
└── index.css # Tailwind CSS for styling

📸 Screenshots

Home Page

Search Results

Package Details