A content-directory style web application that helps users discover, explore, and navigate AI tools based on category and pricing. Built using Next.js App Router, TypeScript, Tailwind CSS, and static data with Static Site Generation (SSG).
https://aitools-soham.vercel.app/
A short video walkthrough explaining the project structure, features, and approach used while building the AI Tools Directory application.
This project is a modern AI tools directory where users can browse AI tools, search and filter them, view detailed information, and explore tools based on pricing models such as Free, Freemium, and Paid.
The application uses static JSON data and programmatically generates pages using Next.js App Router with Static Site Generation for performance and SEO.
- Search, filter, and sort AI tools on the listing page
- Dynamic detail pages generated for each tool
- Pricing-based pages for Free, Paid, and Freemium tools
- Responsive design with dark mode support
- SEO-ready metadata and sitemap generation
- Reusable component-based UI architecture
The dataset is a curated collection of AI tools inspired by public references including:
The dataset includes tool name, description, category, pricing model, and official website URL.
The dataset was manually curated and normalized using public references. AI tools were used to assist with formatting, categorization, and conversion into a structured JSON format. The final dataset is stored as a static file (data/tools.json) and used for static generation.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: lucide-react
- Data Handling: Static JSON
- Deployment: Vercel
- Linting: ESLint + Prettier
The project follows a modular architecture:
- app/ – Contains routes, layout, and page-level logic
- components/ – Reusable UI components
- data/ – Static dataset in JSON format
- lib/ – Helper functions for data handling
Pages are generated using Static Site Generation to ensure performance and SEO optimization.
- Generate a clean JSON dataset of AI tools with name, category, pricing, description, and website
- Normalize pricing labels into Free, Freemium, and Paid
- Suggest UI layout ideas for a modern AI tools directory using Tailwind CSS
- Add category-based navigation and pages
- Add pagination for larger datasets
- Add Open Graph metadata for social sharing
- Enhance filtering UX with multi-select filters
- Add unit tests for utility functions
To run this project locally:
1. Clone the repository
git clone https://github.com/SohamDas00/AiTools.git
2. Navigate to the project folder
cd AiTools
3. Install dependencies
npm install
4. Run the development server
npm run dev
Open in browser:
http://localhost:3000
The application is deployed on Vercel using static site generation. All pages are pre-rendered for fast performance and SEO readiness.
Production URL: https://aitools-soham.vercel.app/
Soham Das
GitHub