{"id":30699716,"url":"https://github.com/dharmveer97/nextjs-typesense-search","last_synced_at":"2026-07-16T09:02:29.963Z","repository":{"id":310882404,"uuid":"1041618458","full_name":"dharmveer97/nextjs-typesense-search","owner":"dharmveer97","description":"typesense-product-search","archived":false,"fork":false,"pushed_at":"2025-08-20T19:01:21.000Z","size":213,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-02T11:24:15.996Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dharmveer97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-20T18:54:40.000Z","updated_at":"2025-08-20T19:01:25.000Z","dependencies_parsed_at":"2025-08-20T20:54:57.630Z","dependency_job_id":"6b5af8cb-bc01-44eb-96ce-cfa57d1f8c8f","html_url":"https://github.com/dharmveer97/nextjs-typesense-search","commit_stats":null,"previous_names":["dharmveer97/nextjs-typesense-search"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dharmveer97/nextjs-typesense-search","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fnextjs-typesense-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fnextjs-typesense-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fnextjs-typesense-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fnextjs-typesense-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dharmveer97","download_url":"https://codeload.github.com/dharmveer97/nextjs-typesense-search/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fnextjs-typesense-search/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35537751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-16T02:00:06.687Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-02T11:13:16.355Z","updated_at":"2026-07-16T09:02:29.944Z","avatar_url":"https://github.com/dharmveer97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔍 Next.js Typesense Search\n\nA modern e-commerce search application built with **Next.js 14**, **Typesense**, and **Tailwind CSS**. Server-side rendered with advanced search features.\n\n![Next.js](https://img.shields.io/badge/Next.js-14-black?style=flat-square\u0026logo=next.js)\n![Typesense](https://img.shields.io/badge/Typesense-Latest-blue?style=flat-square)\n![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=flat-square\u0026logo=typescript)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind-3-38B2AC?style=flat-square\u0026logo=tailwind-css)\n\n## ✨ Features\n\n- 🔍 **Fast Search** - Powered by Typesense for instant results\n- 🎯 **Smart Filters** - Category, brand, price, rating filters\n- 📱 **Mobile Responsive** - Works on all device sizes\n- ⚡ **Server-Side Rendering** - Fast page loads and SEO friendly\n- 🎨 **Modern UI** - Clean design with Tailwind CSS\n- 💾 **Mock Data Fallback** - Works offline with sample data\n- 🔧 **Easy Setup** - Simple configuration and deployment\n\n## 🚀 Quick Start\n\n### 1️⃣ Prerequisites\n\nBefore starting, make sure you have:\n\n```bash\n# Check if you have these installed\nnode --version    # Should be 18+ \nnpm --version     # Should be 8+\ndocker --version  # Should be 20+\n```\n\nIf you don't have these, install:\n- [Node.js](https://nodejs.org/) (version 18 or higher)\n- [Docker Desktop](https://www.docker.com/products/docker-desktop/)\n\n### 2️⃣ Clone Repository\n\n```bash\n# Download the code\ngit clone https://github.com/YOUR_USERNAME/nextjs-typesense-search\ncd nextjs-typesense-search\n```\n\n### 3️⃣ Install Dependencies\n\n```bash\n# Install all required packages\nnpm install\n```\n\n### 4️⃣ Start Typesense (Choose One Option)\n\n#### Option A: Using Docker (Recommended)\n\n```bash\n# Start Typesense server\ndocker run -p 8108:8108 -v/tmp/data:/data typesense/typesense:27.0 \\\n  --data-dir /data --api-key=xyz --listen-port 8108 --enable-cors\n```\n\n#### Option B: Using Typesense Cloud\n\n1. Go to [Typesense Cloud](https://cloud.typesense.org/)\n2. Create a free account\n3. Create a new cluster\n4. Get your API details\n\n### 5️⃣ Configure Environment\n\nCreate `.env.local` file:\n\n```bash\n# Copy the example file\ncp .env.example .env.local\n```\n\nEdit `.env.local`:\n\n```env\n# For Local Docker (Option A)\nTYPESENSE_HOST=localhost\nTYPESENSE_PORT=8108\nTYPESENSE_PROTOCOL=http\nTYPESENSE_API_KEY=xyz\n\n# For Typesense Cloud (Option B)\n# TYPESENSE_HOST=your-cluster.typesense.net\n# TYPESENSE_PORT=443\n# TYPESENSE_PROTOCOL=https\n# TYPESENSE_API_KEY=your-api-key\n```\n\n### 6️⃣ Start Development Server\n\n```bash\n# Start the app\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser! 🎉\n\n## 📁 Project Structure\n\n```\nnextjs-typesense-search/\n├── app/                          # Next.js App Router\n│   ├── page.tsx                 # Home page (redirects to search)\n│   ├── search/server/page.tsx   # Main search page\n│   └── globals.css              # Global styles\n├── components/\n│   └── ui/\n│       ├── skeleton.tsx         # Loading animations\n│       └── empty-state.tsx      # Empty search states\n├── lib/\n│   ├── typesense/\n│   │   ├── server.ts           # Server-side Typesense logic\n│   │   └── mock-data.ts        # Sample products for testing\n│   └── utils.ts                # Helper functions\n├── types/\n│   └── typesense.ts            # TypeScript definitions\n├── .env.example                # Environment variables template\n└── README.md                   # This file\n```\n\n## 🛠️ How It Works\n\n### 1. Search Flow\n\n```\nUser enters search → Next.js Server → Typesense → Results displayed\n```\n\n### 2. Filter Flow\n\n```\nUser clicks filter → URL updates → Server re-renders → New results shown\n```\n\n### 3. Data Flow\n\n- **First Load**: App checks if Typesense is available\n- **With Typesense**: Uses real search engine for fast results\n- **Without Typesense**: Falls back to mock data automatically\n- **Search**: Server-side rendering for fast page loads\n\n## 🔧 Configuration\n\n### Typesense Schema\n\nThe app uses this product schema:\n\n```javascript\n{\n  name: 'products',\n  fields: [\n    { name: 'name', type: 'string' },\n    { name: 'description', type: 'string' },\n    { name: 'category', type: 'string', facet: true },\n    { name: 'brand', type: 'string', facet: true },\n    { name: 'price', type: 'float', facet: true },\n    { name: 'rating', type: 'float' },\n    { name: 'in_stock', type: 'bool', facet: true },\n    // ... more fields\n  ]\n}\n```\n\n### Sample Product Data\n\nThe app includes sample products like:\n- Premium Wireless Headphones\n- Smart Watch Pro  \n- Professional Camera Lens\n- Ergonomic Office Chair\n- Mechanical Gaming Keyboard\n\n## 🐛 Troubleshooting\n\n### Problem: \"Connection failed\"\n**Solution**: Make sure Typesense is running\n```bash\n# Check if Typesense is running\ncurl http://localhost:8108/health\n```\n\n### Problem: \"No results found\"\n**Solution**: Data might not be loaded\n```bash\n# Restart the dev server\nnpm run dev\n```\n\n### Problem: \"Styles not working\"\n**Solution**: Clear Next.js cache\n```bash\nrm -rf .next\nnpm run dev\n```\n\n### Problem: \"Docker not starting\"\n**Solution**: Make sure Docker Desktop is running\n\n## 📱 Usage Examples\n\n### Basic Search\n1. Go to [http://localhost:3000](http://localhost:3000)\n2. Type \"headphones\" in search box\n3. Press Enter\n4. See instant results!\n\n### Using Filters\n1. Search for products\n2. Click category filters (Electronics, Furniture, etc.)\n3. Select price ranges\n4. Choose availability (In Stock/Out of Stock)\n5. Results update automatically\n\n### Sorting\n1. Use sort dropdown\n2. Options: Relevance, Price (Low/High), Rating, Newest\n3. Results re-order instantly\n\n## 🚢 Deployment\n\n### Deploy to Vercel (Recommended)\n\n1. Push code to GitHub\n2. Go to [Vercel](https://vercel.com)\n3. Import your repository\n4. Add environment variables\n5. Deploy!\n\n### Deploy to Netlify\n\n1. Push code to GitHub\n2. Go to [Netlify](https://netlify.com)\n3. Import your repository\n4. Add environment variables\n5. Deploy!\n\n## 🤝 Contributing\n\nWant to help improve this project?\n\n1. Fork the repository\n2. Create your branch (`git checkout -b feature/amazing-feature`)\n3. Commit changes (`git commit -m 'Add amazing feature'`)\n4. Push to branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📞 Support\n\nNeed help? Here's how to get support:\n\n- 🐛 **Bug Reports**: [Open an issue](https://github.com/YOUR_USERNAME/nextjs-typesense-search/issues)\n- 💡 **Feature Requests**: [Open an issue](https://github.com/YOUR_USERNAME/nextjs-typesense-search/issues)\n- 💬 **Questions**: [Start a discussion](https://github.com/YOUR_USERNAME/nextjs-typesense-search/discussions)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Typesense](https://typesense.org/) - Amazing search engine\n- [Next.js](https://nextjs.org/) - Fantastic React framework\n- [Tailwind CSS](https://tailwindcss.com/) - Beautiful styling\n- [Heroicons](https://heroicons.com/) - Great icons\n\n---\n\n**Made with ❤️ for developers who love great search experiences**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdharmveer97%2Fnextjs-typesense-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdharmveer97%2Fnextjs-typesense-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdharmveer97%2Fnextjs-typesense-search/lists"}