https://github.com/shade-solutions/free-for-devs-ui
Real-time synchronized database of free tools and services for developers. From APIs to hosting, find everything you need to build your next project.
https://github.com/shade-solutions/free-for-devs-ui
free-for-dev free-for-developers
Last synced: 10 months ago
JSON representation
Real-time synchronized database of free tools and services for developers. From APIs to hosting, find everything you need to build your next project.
- Host: GitHub
- URL: https://github.com/shade-solutions/free-for-devs-ui
- Owner: shade-solutions
- Created: 2025-06-24T06:10:47.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-24T07:09:33.000Z (12 months ago)
- Last Synced: 2025-06-24T07:27:53.797Z (12 months ago)
- Topics: free-for-dev, free-for-developers
- Language: TypeScript
- Homepage: https://free-on.pages.dev
- Size: 545 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Free for Developers - Real-time Tool Discovery Platform
A 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.
## 🚀 Key Features
### Real-time GitHub Integration
- **Live Data Sync**: Automatically fetches and parses the latest README from the free-for-dev repository
- **Smart Caching**: 1-hour cache with automatic refresh when repository updates
- **Fallback System**: Local backup ensures the app works even if GitHub is unavailable
### Advanced Search & Filtering
- 🔍 **Intelligent Search** - Search through tools by name, description, or features
- 🏷️ **Smart Categorization** - Tools organized by categories like APIs, Hosting, Analytics, etc.
- 💰 **Pricing Filters** - Filter by Free, Freemium, Paid, or Trial offerings
- ⚡ **Real-time Results** - Instant filtering as you type
### Public API Access
- **RESTful Endpoints**: Access parsed data programmatically
- **CORS Enabled**: Use directly from frontend applications
- **No Authentication**: Free and open access for all developers
- **Real-time Updates**: API data stays in sync with GitHub repository
### Modern User Experience
- 📱 **Responsive Design** - Works perfectly on desktop, tablet, and mobile
- 🎨 **Modern UI** - Clean, minimalistic design with dark mode support
- ⚡ **Fast Performance** - Built with Next.js 15 and optimized for speed
- 🔗 **Status Monitoring** - Real-time website status indicators
- 📊 **Live Statistics** - Overview of available tools and categories
## 🌐 API Endpoints
### Get All Tools
```
GET /api/tools
```
Returns the complete parsed dataset with all tools and categories in JSON format.
### Get Statistics
```
GET /api/stats
```
Returns metadata including tool counts and last update timestamp.
## 📊 Data Source
This 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.
## 💡 The Story Behind This Project
**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.
**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?"*
**The vision was clear:**
- Fetch the GitHub README in real-time using their raw API
- Parse it with JavaScript and regular expressions into a structured JSON database
- Create a beautiful, searchable interface that developers would actually enjoy using
- Provide a public API so other developers could build their own UIs or integrate it into their applications
- Add visual enhancements like website favicons (Google Favicon API) and live status badges (Shield.io)
**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.
## Technology Stack
- **Framework**: Next.js 15 with App Router
- **Language**: TypeScript
- **Styling**: Tailwind CSS 4
- **Deployment**: Cloudflare Pages (via OpenNext)
- **Icons**: Heroicons & Shield.io badges
- **Logos**: Google Favicon API
## Getting Started
### Prerequisites
- Node.js 18+
- pnpm (recommended) or npm
### Installation
1. Clone the repository:
```bash
git clone
cd free-for-dev
```
2. Install dependencies:
```bash
pnpm install
```
3. Start the development server:
```bash
pnpm dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
## Project Structure
```
src/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── Header.tsx # Main header
│ ├── SearchBar.tsx # Search functionality
│ ├── FilterSidebar.tsx # Desktop filters
│ ├── MobileFilter.tsx # Mobile filters
│ ├── ToolCard.tsx # Individual tool cards
│ ├── ToolGrid.tsx # Grid layout for tools
│ ├── Stats.tsx # Statistics display
│ └── LoadingSpinner.tsx # Loading component
├── types/ # TypeScript type definitions
│ └── index.ts
└── utils/ # Utility functions
└── parser.ts # Markdown parsing logic
```
## Features in Detail
### Smart Parsing
The application intelligently parses the free-for-dev markdown file to extract:
- Tool names and descriptions
- Pricing models (Free, Freemium, Trial, Paid)
- Key features and capabilities
- Categories and tags
- Website URLs and domains
### Advanced Filtering
- **Text Search**: Search across tool names, descriptions, and tags
- **Category Filter**: Filter by service categories
- **Pricing Filter**: Multiple pricing model selection
- **Real-time Results**: Instant filtering without page reloads
### Responsive Design
- Desktop-first design with comprehensive mobile support
- Collapsible sidebar for mobile devices
- Touch-friendly interfaces
- Optimized layouts for all screen sizes
### Visual Enhancements
- Website favicons using Google's favicon API
- Real-time status badges via Shield.io
- Hover effects and smooth transitions
- Dark mode support
- Custom scrollbars
## Deployment
The application is configured for deployment on Cloudflare Pages using OpenNext:
```bash
pnpm run deploy
```
## 👨💻 About the Developer
This project is created and maintained by **Shaswat Raj** ([@sh20raj](https://github.com/sh20raj)).
### Connect with me:
- 🐱 **GitHub**: [@sh20raj](https://github.com/sh20raj)
- 💼 **LinkedIn**: [@sh20raj](https://linkedin.com/in/sh20raj)
- 🐦 **Twitter**: [@sh20raj](https://twitter.com/sh20raj)
### Repository
- 📂 **Source Code**: [github.com/shade-solutions/free-for-devs-ui](https://github.com/shade-solutions/free-for-devs-ui)
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
## 🙏 Acknowledgments
- **R.I. Pienaar** and all contributors to the [free-for-dev](https://github.com/ripienaar/free-for-dev) repository
- The amazing developer community for curating these resources
- All the service providers who offer free tiers for developers
---
**Made with ❤️ by [@sh20raj](https://github.com/sh20raj)**
## 📱 Social Media & Portfolio Suggestions
Here are some great content ideas for sharing this project:
### For Twitter/X (@sh20raj)
```
🚀 Just built a real-time UI for the famous free-for-dev GitHub repo!
✨ What it does:
• Fetches GitHub README in real-time
• Parses 1000+ free dev tools with JS/RegEx
• Beautiful search & filtering interface
• Public API for developers
• Live status badges & favicons
🔗 Check it out: https://free-on.pages.dev
💻 Source: https://github.com/shade-solutions/free-for-devs-ui
#webdev #opensource #freebies #developers
```
### For LinkedIn (/in/sh20raj)
```
🎯 Turning a Simple Markdown File into a Modern Web Application
I recently transformed the popular "free-for-dev" GitHub repository (10k+ tools) into a real-time, searchable web platform.
🔧 Technical Implementation:
→ Real-time GitHub API integration
→ Custom markdown parser with RegEx
→ Next.js 15 with TypeScript
→ Public RESTful API
→ Live status monitoring
💡 The Problem: The original was just a text list - hard to search, no images, no categorization
✅ The Solution: Built a modern UI that developers actually enjoy using, plus a public API for others to build upon
🌐 Live Demo: https://free-on.pages.dev
📂 Open Source: https://github.com/shade-solutions/free-for-devs-ui
What started as personal frustration became a tool that helps the entire developer community discover free resources more effectively.
#WebDevelopment #OpenSource #DeveloperTools #NextJS #TypeScript
```
### For Your Portfolio (shaswat.live)
```
## Free for Developers - Real-time Tool Discovery Platform
A modern web application that transforms the popular free-for-dev GitHub repository into an interactive, searchable database with real-time synchronization.
**Key Features:**
- Real-time GitHub integration with smart caching
- Advanced search and filtering capabilities
- Public API with CORS support
- Live status monitoring for 1000+ tools
- Beautiful, responsive UI with dark mode
**Tech Stack:** Next.js 15, TypeScript, Tailwind CSS, Cloudflare Pages
**Impact:** Transforms a simple markdown list into a developer-friendly platform used by developers worldwide to discover free tools and services.
🔗 [Live Demo](https://free-on.pages.dev) | 📂 [Source Code](https://github.com/shade-solutions/free-for-devs-ui)
```
### For GitHub README
Add this to your GitHub profile README:
```
🌟 **Latest Project:** [Free for Developers UI](https://free-on.pages.dev) - Real-time tool discovery platform with 1000+ free developer resources
```
The application fetches data from the `free-for-dev/README.md` file. To update the data:
1. Update the source file in the `free-for-dev/` directory
2. The application will automatically parse and display the new data
## License
This project is open source and available under the [MIT License](LICENSE).
## Acknowledgments
- [free-for-dev](https://github.com/ripienaar/free-for-dev) - The amazing community-maintained list of free services
- [Next.js](https://nextjs.org/) - The React framework for production
- [Tailwind CSS](https://tailwindcss.com/) - The utility-first CSS framework
- [Heroicons](https://heroicons.com/) - Beautiful hand-crafted SVG icons
## Support
If you find this project helpful, please consider:
- ⭐ Starring the repository
- 🐛 Reporting bugs
- 💡 Suggesting new features
- 🤝 Contributing to the codebase
---
Built with ❤️ for the developer community