AI Tool Recommender + Directory Template

A beautiful, animated, dual-purpose web app with a personalized quiz and a filterable directory of genuinely good free AI tools.

Written by noCode Human (nocodehuman.ai)

---

What This Is

This is a complete, production-ready template for an "AI Tool Recommender"

It includes:

• A 4-question quiz that gives 3 smart, personalized tool recommendations
• A rich, searchable Directory of 42+ high-quality free (or strong free-tier) AI tools
• Beautiful shareable X card with PNG export
• Smooth animated machine/space background (fully customizable)
• Clean, modern design that feels premium

Perfect as a lead magnet or portfolio piece.

---

Getting Started (Beginner Friendly)

Follow these steps:

1. Get the files

• Download the zip from the YouTube video description, or
• Clone the repo

2. Install dependencies

Open your terminal in the project folder and run:

npm install

3. Run it locally

npm run dev

Open the link shown in your terminal (usually http://localhost:4321).

You should see the animated background and the working Quiz + Directory.

4. Make it yours (Important!)

Open the project in your code editor (VS Code recommended).

Key files you'll edit:

• src/data/tools.ts — This is where all the tools live. Add, remove, or edit tools here.
• src/components/ToolRecommender.tsx — The main React component. Change quiz questions, scoring logic, and UI text here.
• src/styles/global.css — Colors, animations, and overall look.
• src/pages/index.astro — Page title, meta description, and basic structure.

Pro tip: Start by changing the tool names, descriptions, and the quiz questions to match your own niche.

5. Deploy it (Free)

The easiest way is Vercel:

1. Push the project to GitHub
2. Go to vercel.com → Import GitHub repo
3. Deploy

It will be live in under 2 minutes.

---

Customization Ideas

• Change the entire tool list to fit your audience (coding tools, design tools, AI for creators, etc.)
• Edit the 4 quiz questions
• Change the background animation intensity or colors
• Add your own branding / logo
• Connect real email capture (Beehiiv, ConvertKit, Resend, etc.)
• Add more tabs or features

---

Tech Stack (Simple & Modern)

• Astro — Fast static site generator
• React — For the interactive quiz and directory
• Tailwind CSS — Styling
• Canvas — For the beautiful animated background
• html-to-image — For the shareable X card

No backend required. Everything runs in the browser.

---

Folder Structure (What to Ignore)

When you zip or share this template, do not include:

• node_modules/ folder
• .astro/ folder
• dist/ folder
• Any .env files
• Backup files (like *.backup*)

The .gitignore file already handles most of this.

---

Made with ❤️ by noCode Human