NPM Clone

This app is a clone of the npm website with search functionality, package detail pages, and the ability to download npm packages as tar files.

Note: The Townie folder is for reference only and should be deleted manually.

• Search Page: Search for npm packages with infinite scrolling
• Package Detail Page: View package details and README
• Package Download: Download npm packages as tar files
• Caching: Search results, package details, and package tars are cached using Val Town's blob storage
• Responsive Design: Looks good on all screen sizes
• Markdown Support: Package descriptions and READMEs are rendered as markdown
• Realistic Content: Generated packages focus on practical, realistic use cases

• Frontend: React with TypeScript
• Backend: Hono server
• Infinite Scrolling: Using react-infinite-scroll-component
• Data Validation: Using Zod schemas
• Caching: Using Val Town's blob storage
• Package Generation: Dynamically generates npm packages with TypeScript support
• Markdown Rendering: Using marked library to render markdown content

• /: The main search page
• /package/:name: Package detail page
• /api/search: API endpoint for searching packages
• /api/package: API endpoint for getting package details
• /api/npm-package/:packageName: API endpoint for downloading npm packages as tar files

The app allows you to download any package as a tar file. These packages:

1. Are generated dynamically based on the package name
2. Feature a multi-file structure with proper directory organization
3. Use modern ESM imports/exports (not CommonJS)
4. Include both TypeScript and JavaScript implementations
5. Have proper package.json, README, and type definitions
6. Include tests, license, and other standard npm package files
7. Are cached in Val Town's blob storage for faster subsequent downloads
8. Can be installed via npm by extracting the tar file

This project is built on Val Town's React Hono Starter template.

• The entrypoint is /backend/index.ts. That's the backend HTTP server, which also serves all the frontend assets.

• The client-side entrypoint is /frontend/index.html, which in turn imports /frontend/index.tsx, which renders either the SearchPage or PackageDetail component.