DEV Community

Cover image for The Open Source Directory Boilerplate
Indie Maker Hu
Indie Maker Hu

Posted on

The Open Source Directory Boilerplate

Hi, indie makers!

Creating a directory website can be a time-consuming and technically demanding task. That’s why I’ve developed and open-sourced a directory website template that simplifies the process of building a professional, feature-rich directory site. Whether you’re looking to create a tool directory, a product showcase, or a community resource hub, this template provides everything you need to get started.

Check out the demo and source code here:
• Website: https://free-directory-web.vercel.app
• GitHub: https://github.com/javayhu/free-directory-boilerplate

Features
This template is packed with essential features to cater to both developers and end-users:

  1. Listings for Tools and Products

Easily create and manage lists of tools, products, or any other resources you want to showcase.

  1. Item Detail Pages

Provide detailed information about each listing with dedicated item pages.

  1. Categories & Tags

Organize your listings effectively with categories and tags, making it easy for users to find what they’re looking for.

  1. Authentication (GitHub and Google)

Built-in authentication lets users log in seamlessly using their GitHub or Google accounts.

  1. Submission System

Enable users to submit their own tools or products for listing directly on your site.

  1. Sanity Studio Integration

Manage your content effortlessly with the built-in CMS powered by Sanity Studio.

  1. Blog & Documentation

The template includes hidden blog and documentation sections, ready to be enabled when needed.

  1. Analytics

Track user interactions and traffic with Umami and Google Analytics integration.

  1. SEO Optimization

Improve visibility with built-in SEO features like a sitemap and Open Graph metadata.

  1. Modern UI Design

Built with Shadcn UI, the template offers a sleek and modern interface.

  1. Responsive & Accessible

Fully responsive design ensures your site looks great on any device.

  1. Multi-Language & Multi-Theme

Support for English and Chinese out of the box, along with light and dark themes to cater to different user preferences.

Tech Stack
This project leverages a cutting-edge tech stack to ensure performance, scalability, and ease of use:
• Next.js 14: Powerful and flexible framework for web application.
• NextAuth: Seamless authentication system for user login.
• PostgreSQL: A robust database for handling data efficiently.
• Tailwind CSS: Utility-first CSS framework for fast and responsive styling.
• Shadcn UI & Lucide Icons: Modern components and icons for a professional UI.
• Contentlayer: Type-safe content integration for blogs and documentation.
• Sanity: A headless CMS for easy content management.
• Vercel: Blazing-fast deployment and hosting platform.

Why Use This Template?
Building a directory site from scratch can take weeks, but with this template, you can launch a fully functional and visually appealing site in just a few hours. It’s open-source, highly customizable, and designed with indie makers in mind.

Whether you’re a solo creator or part of a team, this template provides the tools and flexibility needed to bring your ideas to life.

Get Started Today
Ready to build your directory website? Check out the demo to see it in action, and head over to the GitHub repository to start customizing your site.

While the Open Source Directory Boilerplate is a great starting point, Mkdirs takes things to the next level. It’s packed with advanced features like paid submissions, newsletter, and built-in CMS capabilities, along with seamless integrations for analytics, SEO, and email notifications, making it ideal for building scalable and monetizable directory websites. Whether you’re showcasing tools, products, services, or any other resources, Mkdirs provides the functionality, flexibility, and modern design to bring your vision to life.

Let me know what you think, and feel free to contribute or share your feedback. Happy building! 🚀

Top comments (0)