{"id":30678115,"url":"https://github.com/shade-solutions/free-for-devs-ui","last_synced_at":"2025-09-01T13:09:56.473Z","repository":{"id":300902451,"uuid":"1007522122","full_name":"shade-solutions/free-for-devs-ui","owner":"shade-solutions","description":"Real-time synchronized database of free tools and services for developers. From APIs to hosting, find everything you need to build your next project.","archived":false,"fork":false,"pushed_at":"2025-06-24T07:09:33.000Z","size":558,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-24T07:27:53.797Z","etag":null,"topics":["free-for-dev","free-for-developers"],"latest_commit_sha":null,"homepage":"https://free-on.pages.dev","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/shade-solutions.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-06-24T06:10:47.000Z","updated_at":"2025-06-24T07:09:36.000Z","dependencies_parsed_at":"2025-06-24T07:38:08.893Z","dependency_job_id":null,"html_url":"https://github.com/shade-solutions/free-for-devs-ui","commit_stats":null,"previous_names":["shade-solutions/free-for-devs-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shade-solutions/free-for-devs-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shade-solutions%2Ffree-for-devs-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shade-solutions%2Ffree-for-devs-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shade-solutions%2Ffree-for-devs-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shade-solutions%2Ffree-for-devs-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shade-solutions","download_url":"https://codeload.github.com/shade-solutions/free-for-devs-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shade-solutions%2Ffree-for-devs-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273129651,"owners_count":25050791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"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":["free-for-dev","free-for-developers"],"created_at":"2025-09-01T13:09:54.944Z","updated_at":"2025-09-01T13:09:56.459Z","avatar_url":"https://github.com/shade-solutions.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Free for Developers - Real-time Tool Discovery Platform\n\nA beautiful, modern web application that fetches the GitHub README of [free-for-dev](https://github.com/ripienaar/free-for-dev) in real time, parses it as a JSON database, and provides both a stunning UI and public API for developers to discover amazing free tools and services.\n\n## 🚀 Key Features\n\n### Real-time GitHub Integration\n- **Live Data Sync**: Automatically fetches and parses the latest README from the free-for-dev repository\n- **Smart Caching**: 1-hour cache with automatic refresh when repository updates\n- **Fallback System**: Local backup ensures the app works even if GitHub is unavailable\n\n### Advanced Search \u0026 Filtering\n- 🔍 **Intelligent Search** - Search through tools by name, description, or features  \n- 🏷️ **Smart Categorization** - Tools organized by categories like APIs, Hosting, Analytics, etc.\n- 💰 **Pricing Filters** - Filter by Free, Freemium, Paid, or Trial offerings\n- ⚡ **Real-time Results** - Instant filtering as you type\n\n### Public API Access\n- **RESTful Endpoints**: Access parsed data programmatically\n- **CORS Enabled**: Use directly from frontend applications\n- **No Authentication**: Free and open access for all developers\n- **Real-time Updates**: API data stays in sync with GitHub repository\n\n### Modern User Experience\n- 📱 **Responsive Design** - Works perfectly on desktop, tablet, and mobile\n- 🎨 **Modern UI** - Clean, minimalistic design with dark mode support\n- ⚡ **Fast Performance** - Built with Next.js 15 and optimized for speed\n- 🔗 **Status Monitoring** - Real-time website status indicators\n- 📊 **Live Statistics** - Overview of available tools and categories\n\n## 🌐 API Endpoints\n\n### Get All Tools\n```\nGET /api/tools\n```\nReturns the complete parsed dataset with all tools and categories in JSON format.\n\n### Get Statistics  \n```\nGET /api/stats\n```\nReturns metadata including tool counts and last update timestamp.\n\n## 📊 Data Source\n\nThis application provides real-time access to the amazing [free-for-dev](https://github.com/ripienaar/free-for-dev) repository by R.I. Pienaar, which is a curated list of free services for developers maintained by the community.\n\n## 💡 The Story Behind This Project\n\n**Five years ago**, I was searching for free development and deployment tools for my projects when I discovered the incredible free-for-dev repository. **But there was a problem** - the original website was literally just a markdown file with a basic list. No search functionality, no images, no proper categorization, no status indicators - nothing that made it feel like I was actually searching for tools. It was just a giant wall of text that you had to scroll through manually.\n\n**Fast forward to today** - while exploring the internet recently, I rediscovered this treasure trove and thought: *\"What if I could build a proper UI for this?\"*\n\n**The vision was clear:**\n- Fetch the GitHub README in real-time using their raw API\n- Parse it with JavaScript and regular expressions into a structured JSON database  \n- Create a beautiful, searchable interface that developers would actually enjoy using\n- Provide a public API so other developers could build their own UIs or integrate it into their applications\n- Add visual enhancements like website favicons (Google Favicon API) and live status badges (Shield.io)\n\n**The result?** A modern, real-time tool discovery platform that transforms a simple markdown file into an interactive database that developers can actually enjoy exploring. Plus, with the public API, anyone can build upon this foundation to create even better experiences.\n\n## Technology Stack\n\n- **Framework**: Next.js 15 with App Router\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS 4\n- **Deployment**: Cloudflare Pages (via OpenNext)\n- **Icons**: Heroicons \u0026 Shield.io badges\n- **Logos**: Google Favicon API\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+ \n- pnpm (recommended) or npm\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone \u003crepository-url\u003e\ncd free-for-dev\n```\n\n2. Install dependencies:\n```bash\npnpm install\n```\n\n3. Start the development server:\n```bash\npnpm dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Project Structure\n\n```\nsrc/\n├── app/                    # Next.js App Router\n│   ├── layout.tsx         # Root layout\n│   ├── page.tsx           # Home page\n│   └── globals.css        # Global styles\n├── components/            # React components\n│   ├── Header.tsx         # Main header\n│   ├── SearchBar.tsx      # Search functionality\n│   ├── FilterSidebar.tsx  # Desktop filters\n│   ├── MobileFilter.tsx   # Mobile filters\n│   ├── ToolCard.tsx       # Individual tool cards\n│   ├── ToolGrid.tsx       # Grid layout for tools\n│   ├── Stats.tsx          # Statistics display\n│   └── LoadingSpinner.tsx # Loading component\n├── types/                 # TypeScript type definitions\n│   └── index.ts\n└── utils/                 # Utility functions\n    └── parser.ts          # Markdown parsing logic\n```\n\n## Features in Detail\n\n### Smart Parsing\nThe application intelligently parses the free-for-dev markdown file to extract:\n- Tool names and descriptions\n- Pricing models (Free, Freemium, Trial, Paid)\n- Key features and capabilities\n- Categories and tags\n- Website URLs and domains\n\n### Advanced Filtering\n- **Text Search**: Search across tool names, descriptions, and tags\n- **Category Filter**: Filter by service categories\n- **Pricing Filter**: Multiple pricing model selection\n- **Real-time Results**: Instant filtering without page reloads\n\n### Responsive Design\n- Desktop-first design with comprehensive mobile support\n- Collapsible sidebar for mobile devices\n- Touch-friendly interfaces\n- Optimized layouts for all screen sizes\n\n### Visual Enhancements\n- Website favicons using Google's favicon API\n- Real-time status badges via Shield.io\n- Hover effects and smooth transitions\n- Dark mode support\n- Custom scrollbars\n\n## Deployment\n\nThe application is configured for deployment on Cloudflare Pages using OpenNext:\n\n```bash\npnpm run deploy\n```\n\n## 👨‍💻 About the Developer\n\nThis project is created and maintained by **Shaswat Raj** ([@sh20raj](https://github.com/sh20raj)).\n\n### Connect with me:\n- 🐱 **GitHub**: [@sh20raj](https://github.com/sh20raj)\n- 💼 **LinkedIn**: [@sh20raj](https://linkedin.com/in/sh20raj) \n- 🐦 **Twitter**: [@sh20raj](https://twitter.com/sh20raj)\n\n### Repository\n- 📂 **Source Code**: [github.com/shade-solutions/free-for-devs-ui](https://github.com/shade-solutions/free-for-devs-ui)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🙏 Acknowledgments\n\n- **R.I. Pienaar** and all contributors to the [free-for-dev](https://github.com/ripienaar/free-for-dev) repository\n- The amazing developer community for curating these resources\n- All the service providers who offer free tiers for developers\n\n---\n\n**Made with ❤️ by [@sh20raj](https://github.com/sh20raj)**\n\n## 📱 Social Media \u0026 Portfolio Suggestions\n\nHere are some great content ideas for sharing this project:\n\n### For Twitter/X (@sh20raj)\n```\n🚀 Just built a real-time UI for the famous free-for-dev GitHub repo!\n\n✨ What it does:\n• Fetches GitHub README in real-time\n• Parses 1000+ free dev tools with JS/RegEx\n• Beautiful search \u0026 filtering interface  \n• Public API for developers\n• Live status badges \u0026 favicons\n\n🔗 Check it out: https://free-on.pages.dev\n💻 Source: https://github.com/shade-solutions/free-for-devs-ui\n\n#webdev #opensource #freebies #developers\n```\n\n### For LinkedIn (/in/sh20raj)\n```\n🎯 Turning a Simple Markdown File into a Modern Web Application\n\nI recently transformed the popular \"free-for-dev\" GitHub repository (10k+ tools) into a real-time, searchable web platform.\n\n🔧 Technical Implementation:\n→ Real-time GitHub API integration\n→ Custom markdown parser with RegEx\n→ Next.js 15 with TypeScript\n→ Public RESTful API\n→ Live status monitoring\n\n💡 The Problem: The original was just a text list - hard to search, no images, no categorization\n\n✅ The Solution: Built a modern UI that developers actually enjoy using, plus a public API for others to build upon\n\n🌐 Live Demo: https://free-on.pages.dev\n📂 Open Source: https://github.com/shade-solutions/free-for-devs-ui\n\nWhat started as personal frustration became a tool that helps the entire developer community discover free resources more effectively.\n\n#WebDevelopment #OpenSource #DeveloperTools #NextJS #TypeScript\n```\n\n### For Your Portfolio (shaswat.live)\n```\n## Free for Developers - Real-time Tool Discovery Platform\n\nA modern web application that transforms the popular free-for-dev GitHub repository into an interactive, searchable database with real-time synchronization.\n\n**Key Features:**\n- Real-time GitHub integration with smart caching\n- Advanced search and filtering capabilities  \n- Public API with CORS support\n- Live status monitoring for 1000+ tools\n- Beautiful, responsive UI with dark mode\n\n**Tech Stack:** Next.js 15, TypeScript, Tailwind CSS, Cloudflare Pages\n\n**Impact:** Transforms a simple markdown list into a developer-friendly platform used by developers worldwide to discover free tools and services.\n\n🔗 [Live Demo](https://free-on.pages.dev) | 📂 [Source Code](https://github.com/shade-solutions/free-for-devs-ui)\n```\n\n### For GitHub README\nAdd this to your GitHub profile README:\n```\n🌟 **Latest Project:** [Free for Developers UI](https://free-on.pages.dev) - Real-time tool discovery platform with 1000+ free developer resources\n```\n\nThe application fetches data from the `free-for-dev/README.md` file. To update the data:\n\n1. Update the source file in the `free-for-dev/` directory\n2. The application will automatically parse and display the new data\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## Acknowledgments\n\n- [free-for-dev](https://github.com/ripienaar/free-for-dev) - The amazing community-maintained list of free services\n- [Next.js](https://nextjs.org/) - The React framework for production\n- [Tailwind CSS](https://tailwindcss.com/) - The utility-first CSS framework\n- [Heroicons](https://heroicons.com/) - Beautiful hand-crafted SVG icons\n\n## Support\n\nIf you find this project helpful, please consider:\n- ⭐ Starring the repository\n- 🐛 Reporting bugs\n- 💡 Suggesting new features\n- 🤝 Contributing to the codebase\n\n---\n\nBuilt with ❤️ for the developer community\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshade-solutions%2Ffree-for-devs-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshade-solutions%2Ffree-for-devs-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshade-solutions%2Ffree-for-devs-ui/lists"}