DEV Community: Thameem Azfar Ansari

Stop Asking AI to Code. Give It a Rules File Instead.

Thameem Azfar Ansari — Sun, 14 Jun 2026 06:54:38 +0000

AI coding tools are amazing.

They can generate components, write functions, explain bugs, refactor code, create tests, and help us move faster.

But there is one problem:

Most developers are using them like this:

Build me a dashboard.

or:

Fix this bug.

or:

Add authentication to my app.

Then the AI returns a huge block of code.

It looks impressive at first.

But after a few minutes, you notice the problems:

It changed files you did not ask it to touch.
It invented functions that do not exist.
It ignored your project structure.
It used a different coding style.
It added unnecessary complexity.
It skipped edge cases.
It forgot error handling.
It gave you code that works in theory but does not fit your actual project.

The issue is not always that the AI is bad.

The issue is that the AI does not have enough rules.

We keep asking AI to code, but we do not tell it how to behave inside our codebase.

That is why one of the best things you can do is create a simple file:

AI_RULES.md

or:

AGENTS.md

or:

CONTRIBUTING_AI.md

The name is not the important part.

The important part is this:

Give AI clear rules before you ask it to write code.

AI Does Not Need More Freedom. It Needs Better Boundaries.

When people first start using AI coding tools, they usually try to make the prompt bigger.

They write things like:

Build a full-stack app with authentication, dashboard, database, admin panel, responsive UI, dark mode, settings page, and payment integration.

That sounds productive.

But it often creates a mess.

Why?

Because the AI has to guess too many things at once.

It has to guess:

your framework
your styling system
your folder structure
your naming conventions
your state management approach
your API patterns
your error handling style
your testing strategy
your security expectations
your definition of “done”

When AI has to guess, it will still give you an answer.

That is the dangerous part.

It may not say:

“I do not have enough context.”

It may just confidently produce code.

That is why AI coding should not begin with code.

It should begin with rules.

What Is an AI Rules File?

An AI rules file is a simple markdown document that tells your AI assistant how to work in your project.

It is like onboarding documentation for a new developer.

But instead of writing it only for humans, you write it in a way that AI can also follow.

A good AI rules file explains:

how the project is structured
what coding style to follow
what files should not be touched
how to handle errors
how to approach testing
what security rules matter
how the AI should respond before and after writing code

It does not have to be complicated.

In fact, simple rules are usually better.

Here Is a Simple AI Rules File You Can Copy

Create a file called AI_RULES.md in the root of your project and paste this:

# AI Coding Rules

You are helping inside an existing codebase.

Your job is not just to generate code.
Your job is to make careful, minimal, maintainable changes that fit the project.

---

## General Rules

1. Do not rewrite large parts of the project unless specifically asked.
2. Do not modify unrelated files.
3. Follow the existing project structure and coding style.
4. Prefer small, focused changes over large rewrites.
5. Reuse existing components, utilities, functions, and patterns.
6. Do not invent APIs, files, database fields, environment variables, or functions.
7. If something is unclear, ask a question before making assumptions.
8. Explain your plan before writing code.
9. After making changes, summarize what changed and why.
10. If a requested change has risks, mention them clearly.

---

## Code Quality Rules

1. Write readable code.
2. Use clear variable and function names.
3. Avoid unnecessary abstraction.
4. Avoid duplicating logic.
5. Keep functions small when possible.
6. Prefer simple solutions over clever ones.
7. Add comments only when they make the code easier to understand.
8. Do not remove existing comments unless they are incorrect.
9. Do not remove tests or error handling unless there is a clear reason.
10. Keep the code easy for another developer to review.

---

## Security Rules

1. Never expose secrets, tokens, passwords, API keys, or credentials.
2. Do not log sensitive user data.
3. Validate user input where necessary.
4. Avoid unsafe HTML injection.
5. Be careful with authentication and authorization logic.
6. Do not weaken existing security checks.
7. Explain security-sensitive changes clearly.

---

## Testing Rules

1. Add or update tests when behavior changes.
2. Do not fake passing tests.
3. Mention any tests that should be run manually.
4. Include important edge cases.
5. If tests cannot be added, explain why.

---

## Response Rules

Before writing code:

- Explain your understanding of the task.
- Give a short implementation plan.
- List the files you expect to modify.
- Mention any unclear requirements or risks.

After writing code:

- Summarize the changes.
- Explain how to test them.
- Mention anything that still needs review.

That one file can make your AI coding workflow much better.

Not perfect.

But much better.

Bad Prompt vs Better Prompt

Here is a common prompt:

Add dark mode to my app.

This is not a terrible request, but it is too open-ended.

The AI might:

create a new theme system
install a package you do not need
change every component
ignore your existing CSS
forget persistence
break your current design

A better prompt would be:

Read AI_RULES.md first.

I want to add dark mode to this app.

Before writing code:
1. Inspect the current styling approach.
2. Explain the simplest implementation.
3. List the files that need to change.
4. Do not modify unrelated files.
5. Do not install new packages unless necessary.

Wait for my approval before writing code.

This prompt is slower.

That is the point.

When using AI for real projects, speed is not just about how fast code appears on the screen.

Speed is also about avoiding bad code, broken features, and painful debugging later.

The Real Problem Is Not AI Code. It Is Unreviewed AI Code.

AI-generated code should not be treated as finished work.

It should be treated like a pull request from someone who is fast, helpful, and sometimes confidently wrong.

That means you still need to review it.

Before accepting AI code, ask:

Does this solve the actual problem?
Did it follow the existing project style?
Did it change unrelated files?
Did it duplicate existing logic?
Did it invent anything?
Did it handle errors?
Did it handle empty states?
Did it handle loading states?
Did it create security risks?
Do I understand the code?

If you do not understand the code, do not merge it.

AI can help you move faster, but it should not remove your responsibility as a developer.

My 5-Step AI Coding Workflow

Here is a safer workflow for using AI inside a real project.

1. Ask AI to Understand the Project First

Before asking it to write code, ask it to explain the project.

Read the project structure and AI_RULES.md.

Do not write code yet.

Explain:
1. What this project appears to do.
2. How the main folders are organized.
3. What patterns are being used.
4. Anything important I should know before making changes.

This helps you catch misunderstandings early.

If the AI misunderstands the project, you can correct it before it starts changing files.

2. Ask for a Plan Before Code

Do not jump straight into implementation.

Ask for a plan.

I want to add [feature].

Before writing code:
- Explain the approach.
- List the files you expect to modify.
- Mention possible risks.
- Suggest the smallest reasonable implementation.

Do not write code yet.

This is one of the most important steps.

If the plan is bad, the code will probably be bad too.

Fix the plan first.

3. Break Big Features Into Small Tasks

Bad prompt:

Build the full admin dashboard.

Better prompt:

Create only the admin dashboard layout using existing components.
Do not connect APIs yet.
Do not add charts yet.
Do not add authentication changes.

Small tasks are easier to review.

They also reduce the chance of AI making random changes across the project.

A good rule is:

If the AI response would require a massive diff, the task is probably too big.

Break it down.

4. Review the Diff Like a Pull Request

After AI makes changes, do not just run the app and move on.

Review the diff carefully.

Look for:

unrelated file changes
unnecessary dependencies
duplicated code
inconsistent naming
missing error states
missing tests
security issues
over-engineering
code that looks correct but does not match your project

AI can create clean-looking code that is still wrong.

Your job is to catch that.

5. Ask AI to Criticize Its Own Work

One of the best prompts is:

Review your own changes.

Look for:
- bugs
- missing edge cases
- security issues
- unnecessary complexity
- files changed by mistake
- better ways to follow the existing project style

Be strict.

AI often performs better when reviewing code than when generating it.

Creation mode gives you output.

Review mode gives you criticism.

Use both.

A Better Prompt Template

Here is a prompt you can reuse:

Read AI_RULES.md first.

Task:
[Describe the task clearly]

Before writing code:
- Explain your understanding.
- Give a short implementation plan.
- List files you expect to modify.
- Mention risks or unclear requirements.

Rules:
- Keep the change small.
- Follow existing project patterns.
- Do not touch unrelated files.
- Do not invent APIs, functions, or fields.
- Add or update tests if behavior changes.
- Explain how to test the change.

Wait for my approval before writing code.

This is not magic.

But it creates structure.

And structure is what most AI coding workflows are missing.

Example: Refactoring With Rules

Bad prompt:

Refactor this file.

This is too vague.

The AI might rewrite everything.

A better prompt:

Read AI_RULES.md first.

Refactor this file only for readability.

Rules:
- Do not change behavior.
- Do not rename exported functions.
- Do not modify other files.
- Keep the public API the same.
- Explain each change.
- Mention how I can verify behavior stayed the same.

Before editing, give me a plan.

This makes the task safer.

Refactoring should reduce risk, not create it.

Example: Bug Fixing With Rules

Bad prompt:

Fix the login bug.

Better prompt:

Read AI_RULES.md first.

There is a bug where users sometimes stay on the login page after submitting valid credentials.

Before writing code:
1. Explain possible causes.
2. Identify which files are likely involved.
3. Suggest a debugging plan.
4. Do not change code until the cause is clear.

This is much better because you are not asking AI to guess a fix.

You are asking it to investigate first.

That is how real debugging works.

Example: Adding Tests With Rules

Bad prompt:

Write tests for this.

Better prompt:

Read AI_RULES.md first.

Add tests for the checkout calculation logic.

Focus on:
- normal checkout
- empty cart
- discount code
- invalid discount code
- tax calculation
- rounding issues

Do not change production code unless you find a bug.
Explain any behavior that seems unclear.

Specific testing prompts produce much better results.

AI is useful for tests, but only when you define the cases clearly.

What You Should Not Put in Your Rules File

Do not make your AI rules file too long.

If it becomes huge, the important rules get buried.

Avoid rules like:

Always write perfect code.

That means nothing.

Avoid rules like:

Make the app scalable.

Too vague.

Avoid rules like:

Use best practices.

Everyone says this, but it does not tell the AI what to actually do.

Better rules are specific:

Do not modify unrelated files.

Reuse existing components before creating new ones.

Do not add new dependencies without explaining why.

Ask before changing database schema.

Specific rules beat inspirational rules.

Add Project-Specific Rules

The best rules file is not generic.

It should include details about your actual project.

For example:

## Project-Specific Rules

- This project uses TypeScript.
- This project uses React components from `/components`.
- Shared utility functions are stored in `/lib`.
- API calls should go through the existing API client.
- Do not call `fetch` directly inside components.
- Do not create new global styles unless necessary.
- Forms should use the existing form components.
- Error messages should follow the existing format.
- Do not change database schema without approval.

These rules are much more useful than saying:

Write clean code.

Because they tell AI what “clean” means in your project.

AI Should Not Replace Thinking

There is a dangerous mindset around AI coding:

“The AI wrote it, so it must be fine.”

That is not how software works.

AI can help with:

boilerplate
explanations
refactoring ideas
test cases
debugging suggestions
documentation
code review
repetitive tasks

But you are still responsible for the final result.

You still need to understand the code.

You still need to review the changes.

You still need to test the behavior.

You still need to think.

AI does not remove engineering judgment.

It makes judgment more important.

Why This Workflow Works

A rules file works because it changes the AI from a random code generator into a more disciplined assistant.

Without rules, AI optimizes for giving you an answer quickly.

With rules, AI has boundaries.

It knows:

what not to touch
what to explain
what risks to mention
what style to follow
what quality level you expect

That does not make the AI perfect.

But it makes the interaction more predictable.

And predictable is good.

In software, predictable usually beats impressive.

Quick Checklist Before Accepting AI Code

Before you accept AI-generated code, run through this checklist:

[ ] Does this solve the actual problem?
[ ] Is this the smallest reasonable change?
[ ] Did it follow existing project patterns?
[ ] Did it avoid unrelated file changes?
[ ] Did it avoid unnecessary dependencies?
[ ] Are errors handled?
[ ] Are loading and empty states handled?
[ ] Are security risks considered?
[ ] Are tests added or updated where needed?
[ ] Do I understand the code?

That last one is the most important.

If you do not understand the code, you are not done.

Final Thoughts

AI coding tools are not going away.

They are becoming part of how many developers work.

But using AI well is not just about writing better prompts.

It is about creating better systems.

A simple AI_RULES.md file gives your AI assistant context, boundaries, and expectations.

It helps you avoid random code.

It helps you get smaller diffs.

It helps you review changes more safely.

Most importantly, it reminds you that AI is not the owner of your codebase.

You are.

So the next time you want AI to build something, do not just ask:

Can you code this?

Start with:

Read the rules first.

Because the goal is not to generate more code.

The goal is to ship better software.

What rule would you add to your own AI_RULES.md file?

Running for School Pupil Leader: A Student’s Guide to Leadership, Trust, and Responsibility

Thameem Azfar Ansari — Sat, 13 Jun 2026 17:51:51 +0000

Running for School Pupil Leader is not just about making posters, giving speeches, or asking people to vote for you.

It is about proving that you are responsible enough to represent students, communicate with teachers, and help make the school environment better.

A school election is actually a lot like managing a real project. You need planning, communication, teamwork, consistency, and trust.

Here are the most important things we should do while running for School Pupil Leader.

1. Understand Why You Are Running

Before asking anyone to vote for you, you should be clear about your own reason.

Ask yourself:

Why do I want this role?
What kind of leader do I want to be?
What problems do students actually face?
How can I help in a realistic way?

A good leader does not run only for popularity. A good leader runs because they want to serve, support, and represent others.

Your reason should be clear, honest, and mature.

2. Listen Before You Speak

One of the biggest mistakes candidates make is that they start making promises without listening to students first.

Before creating your campaign, talk to different students.

Ask them:

What do you want from a Pupil Leader?
What can be improved in school?
What problems do students face?
What makes a leader trustworthy?

When students feel heard, they are more likely to trust you.

Leadership starts with listening.

3. Create a Clear Message

Your campaign should not be confusing.

Do not make too many promises. People will forget them.

Instead, focus on three strong points.

For example:

Student Voice. Better Communication. Stronger Participation.

This is simple, clear, and easy to remember.

A strong campaign message should tell people what you stand for in just a few seconds.

4. Be Realistic With Your Promises

It is easy to say things like:

“I will change everything.”

But that does not sound believable.

A responsible candidate should make realistic promises.

For example:

I will listen to student concerns.
I will help improve communication between students and teachers.
I will encourage more participation in school activities.
I will support discipline, respect, and teamwork.
I will represent students responsibly.

Realistic promises are more powerful than big fake promises.

5. Build Trust, Not Just Popularity

Popularity can help in an election, but trust is more important.

Students should feel that you are:

approachable
respectful
responsible
confident
honest
consistent

A leader should not only be known by many people. A leader should be trusted by many people.

The goal is not just to get attention. The goal is to earn respect.

6. Talk to Students from Different Groups

Do not only speak to your close friends.

Talk to:

juniors
seniors
classmates
quiet students
sports students
academic students
cultural activity students
students from different houses or groups

A good Pupil Leader represents everyone, not just one friend circle.

The more students you connect with, the stronger your campaign becomes.

7. Use Posters Smartly

Posters are important, but they should be clean and easy to read.

A good poster should include:

your name
the position you are running for
your slogan
2 or 3 main promises
a confident design

Do not overcrowd your poster with too much text.

People should be able to understand your poster in 3 seconds.

Example:

Vote [Your Name]

For Assistant Pupil Leader

Your Voice. Our School. Real Action.

8. Prepare a Strong Speech

Your speech is one of the most important parts of your campaign.

A good speech should be:

short
confident
honest
clear
respectful

Do not attack other candidates. That makes you look insecure.

Instead, focus on your own qualities, your plan, and your commitment.

A strong line to use is:

A badge does not make a leader. Actions do.

Another good line is:

I am not here to make fake promises. I am here to listen, work, and take responsibility.

9. Show Leadership Before the Election

Do not wait until you win to start acting like a leader.

You can show leadership before the election by:

helping classmates
supporting juniors
participating in school activities
being disciplined
communicating respectfully
helping teachers when needed
encouraging others to participate

When people see you already acting responsibly, they are more likely to believe in you.

10. Stay Respectful to Your Competition

Every election has competition.

But a good leader does not spread rumors, insult others, or create negativity.

Respect your opponents.

You can still be confident without being rude.

A mature candidate says:

I respect everyone running for this position, but I believe I have the responsibility, communication skills, and commitment needed for this role.

That sounds strong without being disrespectful.

11. Work With a Team

You cannot run a strong campaign alone.

You need people who support you and believe in your message.

Your team can help with:

posters
speeches
campaign ideas
talking to students
reminding people to vote
giving feedback

But your team should also behave respectfully. If your supporters act badly, it reflects on you.

A good campaign team should be positive, disciplined, and focused.

12. Be Consistent Until the End

Some candidates start strong and then become lazy.

Consistency matters.

Every day, you should:

speak to students
remind people of your message
stay visible
behave responsibly
keep your confidence
avoid drama

The final days before voting are very important. Many students decide late, so your consistency can make a big difference.

13. Remember What Leadership Really Means

Leadership is not about being above others.

Leadership is about serving others.

A good Pupil Leader should be someone students can approach and teachers can trust.

The role requires confidence, but also humility.

It requires communication, but also listening.

It requires authority, but also responsibility.

Final Thoughts

Running for School Pupil Leader is a great opportunity to learn leadership, communication, discipline, and teamwork.

Whether you win or not, the way you campaign shows your character.

The best campaign is not the loudest one.

The best campaign is the one built on trust, action, and responsibility.

So if you are running for School Pupil Leader, remember this:

Do not just ask for votes. Earn them.

Be present.

Be respectful.

Be prepared.

Be the kind of leader students can trust.

Thanks for reading.

Where’s My Masjid. Find Nearby Masjids, Qibla Direction, Jamaat Timings, and Verified Updates

Thameem Azfar Ansari — Fri, 15 May 2026 15:43:39 +0000

Where’s My Masjid. Find Nearby Masjids, Qibla Direction, Jamaat Timings, and Verified Updates

Finding a masjid should be simple.

But in many places, Muslims still face the same problems:

You search for a masjid, but the location is not always clear.
You find a pin, but you do not know if the masjid is active.
Jamaat timings are missing or outdated.
Qibla apps can be unstable on some phones.
Masjid updates are scattered across WhatsApp groups, posters, and word of mouth.

Where’s My Masjid is being built to solve that.

It is a Muslim-first app designed to help people find nearby masjids, check jamaat timings, get Qibla direction, save masjids, and receive trusted updates from verified masjid teams.

What is Where’s My Masjid?

Where’s My Masjid is a mobile-first web app for Muslims who want quick, trusted access to masjid information.

The goal is simple:

Find the nearest masjid. Know the prayer timing. Get the Qibla direction. Stay connected to verified masjid updates.

Whether you are at home, travelling, studying, working, or visiting a new city, the app helps you find nearby masjids and useful prayer-related information in one place.

Main features

Nearby masjid discovery

Search for nearby masjids using your current location or a selected area.

The app is designed to show nearby masjids clearly, with distance, navigation options, and trust status where available.

Jamaat timings

Where timings are verified, users can see jamaat times directly inside the app.

This helps answer one of the most important questions:

Can I reach the masjid before jamaat starts?

The app also separates verified timings from unverified listings, so users are not misled by uncertain information.

Qibla direction

The app includes a Qibla direction feature with a Kaaba/Makkah marker.

It supports live compass mode when the phone provides reliable compass data, and it also provides fallback options such as bearing direction and map line reference when a phone compass is unstable.

The app does not pretend every phone sensor is perfect. It is designed to be honest and reliable.

Save your masjids

Users can save masjids they visit often, making it easier to return to them later.

This is useful for:

daily prayers
Jumu’ah
Ramadan
travel
regular community visits

Missing masjid reporting

If a masjid is missing, users can report it.

This helps improve coverage and allows the app to grow with community support.

Masjid claim system

One of the most important features is the masjid claim system.

Authorized masjid representatives can request to claim their masjid through a proper verification process.

Once approved, masjid teams can help maintain their own information, including:

jamaat timings
Jumu’ah timings
announcements
contact details
facilities
Ramadan updates
temporary closure notices
important community information

This turns the app from just a masjid finder into a trusted masjid information network.

Why this matters

Masjid information should not be confusing.

A Muslim should not have to search across multiple apps, old photos, WhatsApp messages, random map listings, and word of mouth just to find basic masjid details.

Where’s My Masjid is built around one idea:

Trusted masjid information should be easy to find.

The app is designed for normal users, travellers, students, workers, families, and masjid committees.

Built for trust

The app is not only about showing map pins.

It focuses on trust.

Masjid listings can have different levels of confidence, such as:

verified masjid
claimed by masjid team
community suggested
discovered from map providers
needs verification

This helps users understand what information they can rely on.

For masjid teams, the claim system creates a proper way to keep their own details updated without giving random people control over public masjid information.

Who is this for?

Where’s My Masjid is for:

Muslims looking for nearby masjids
travellers who need prayer locations
students and workers in new areas
families looking for reliable jamaat information
masjid committees who want to manage their public information
communities that want better access to verified masjid updates

The bigger vision

The long-term goal is to build a trusted masjid network.

Not just:

“Where is the nearest masjid?”

But also:

“Is it verified?”

“What time is jamaat?”

“Can I reach on time?”

“Has the masjid updated anything today?”

“Is this information maintained by the masjid team?”

That is the future we want to build.

Try the app

App link: https://whereismymasjid.com

If you are a masjid representative and want your masjid information to be accurate, you can use the claim feature to start the verification process.

If you are a user, try finding a nearby masjid, checking Qibla, saving your regular masjid, or reporting a missing masjid.

Final note

Where’s My Masjid is an initiative to make masjid discovery, prayer timing access, and community updates easier and more trustworthy.

Built as an initiative by Wannaapps Technologies.

Developed by Thameem Azfar Ansari.

I Built a Full Website Using AI in 10 Minutes. Here’s the Exact System

Thameem Azfar Ansari — Sun, 26 Apr 2026 11:58:13 +0000

AI is no longer just a tool.
It is becoming the fastest way to build, launch, and scale real businesses.

So I decided to test something simple:

Can I build a complete, usable website using AI in under 10 minutes?
No coding. No design tools. No team.
Just AI.

Here’s exactly what happened.

What I Wanted to Build

A real business style website:
Homepage
Multiple pages
Navigation working
Clean, premium UI
Ready to show to a client

Not a demo. Not a template.
Something that actually looks real.

The Stack I Used:
AI for content generation
AI for layout and UI structure
Basic frontend setup (React / HTML)
Prompt engineering to control output

No heavy frameworks. No overengineering.

Step 1: The Prompt That Changed Everything

Instead of asking:

“Create a website”

I asked:

“Create a premium multi page SaaS website with modern UI, navigation, animations, and clean sections like hero, features, pricing, testimonials.”

That one change gave me:

Structured output
Real sections
Logical flow

Lesson: Your output quality = your prompt quality

Step 2: Generating the Structure

AI generated:

Homepage layout
Navigation bar
Multiple pages (About, Pricing, Contact)
Content blocks

At this point, it already looked like a real SaaS template.

Step 3: Making It Feel Premium

This is where most people fail.

AI gives “basic output” by default.

To upgrade it, I refined prompts like:

“Make it look like a premium SaaS landing page”
“Add smooth transitions”
“Improve spacing and typography”
“Use modern UI patterns”

Result:

Cleaner layout
Better hierarchy
Real product feel

Step 4: Fixing Real Problems

Not everything worked perfectly.

Issues I faced:

Navigation not switching pages
UI flickering during transitions
Loading animations looking cheap

Fixes:

Added page state handling
Improved transitions
Designed a smoother loading experience

This is the difference between a demo and a usable product

Step 5: Final Result

What I ended up with:

Multi page working website
Clean navigation
Smooth transitions
Premium SaaS look
Ready to present

Built in minutes.

What This Actually Means

This is bigger than just building a website.

It means:

Speed is no longer a limitation
Execution beats skill barriers
One person can do what teams used to do
The Real Opportunity (Most People Are Missing This)

Everyone is using AI to:

Write content
Generate ideas

But very few are using it to:

Build assets
Launch products
Create systems

That’s where the real leverage is.

If You’re a Developer / Marketer / Founder

Here’s what you should be doing right now:

Build tools using AI
Create templates and sell them
Launch micro SaaS products
Automate workflows
Turn ideas into live products fast
Final Thought

AI will not replace builders.

But builders who use AI will replace everyone else.

I Built an AI Website Generator That Creates Full Websites in Seconds (Here’s How)

Thameem Azfar Ansari — Mon, 20 Apr 2026 07:26:30 +0000

Most beginners learn web development the hard way…
HTML → CSS → JavaScript → Frameworks → Deployment.

But I asked myself a different question:

“What if AI could do all of this instantly?”

So I built an AI Website Generator that takes a simple prompt and turns it into a fully working website.

What My Tool Can Do

You just type something like:

“Create a modern portfolio website for a developer”

And it generates:

Clean structure (HTML, CSS, JS)
Beautiful UI design
Responsive layout
Downloadable ZIP file
Ready-to-deploy code

Tech Stack I Used

I kept it powerful but simple:

Frontend: Next.js + Tailwind CSS
Backend: Flask (Python)
AI Engine: OpenAI API
Auth: Google Login
Payments: Stripe
Hosting: Vercel + Render

Key Features I Added

Instead of just generating code, I focused on making it useful in real life:

1.Smart Prompt Understanding

The AI doesn’t just generate random code — it understands intent.

2.Clean UI Output

Websites don’t look messy. They feel like real products.

3.Download as ZIP

Users can instantly download and use their website.

4.Monetization System

I locked advanced features behind a small payment.

Why This Project Matters

This isn’t just a cool project.

It’s a real money opportunity.

People:

Want websites fast
Don’t want to code
Are willing to pay

So tools like this can easily become a SaaS business.

What I Learned

Building this taught me:

How to connect AI with real apps
How to build full-stack systems
How to think like a product creator (not just a coder)

Biggest Mistake Beginners Make

They build projects that:

Look cool
But solve nothing

This is different.

It solves a real problem.

What’s Next?

I’m planning to add:

AI-generated animations
SEO optimization
One-click deployment
Custom themes

Final Thought

AI is not here to replace developers.

It’s here to multiply them.

If you learn how to use it early…

You’ll be way ahead of everyone else.

If you're building something similar or want the full guide, let me know!

Want to make your work easier ? Check out my new post. Hope it helps!!

Thameem Azfar Ansari — Mon, 23 Mar 2026 19:12:38 +0000

Thameem Azfar Ansari

Mar 23

10 AI Tools That Feel Illegal to Know (2026)

#ai #productivity #webdev #beginners

1 min read

10 AI Tools That Feel Illegal to Know (2026)

Thameem Azfar Ansari — Mon, 23 Mar 2026 19:11:24 +0000

AI is getting scary good…

Here are 10 insanely powerful AI tools that can save you hours (and feels almost illegal to use).

1.ChatGPT
Your personal AI assistant

Write code
Debug errors
Learn anything

2.Perplexity
AI-powered search engine

Gives accurate answers
Shows sources
Faster than Google

3.Notion AI
Turns notes into smart content

Summarize
Rewrite
Organize ideas

4.Leonardo AI
Generate high-quality images

Game assets
Designs
Art

5.Runway ML
AI video editing

Remove background
Generate videos
Edit like magic

6.ElevenLabs
Ultra-realistic AI voices

Text → speech
Voice cloning

7.Copy.ai
Writes content instantly

Blogs
Captions
Emails

8.Durable
Build a website in seconds

AI-generated sites
No coding needed

9. GitHub Copilot
AI coding assistant

Suggests code
Speeds up development

10. Whisper
Speech-to-text AI

Converts audio → text
Super accurate

These tools can:

Save hours of work
Boost productivity
Make you 10x faster

Final Thought:
AI won’t replace developers…
but developers who use AI will replace those who don’t.

Which AI tool surprised you the most?
Drop it in the comments

20 Insanely Useful Websites That Feel Illegal to Know About

Thameem Azfar Ansari — Wed, 11 Mar 2026 08:51:16 +0000

1.Roadmap.sh
https://roadmap.sh

What it does:
Shows step-by-step roadmaps for learning tech skills like: Backend, AI, DevOps, Cybersecurity
Perfect for beginners.

2.DevDocs
https://devdocs.io

A super-fast documentation browser for developers.

What it does:
Search docs for: Python, JavaScript, React, CSS
All in one place.

3.Futurepedia
https://futurepedia.io

A huge directory of AI tools.

What it does:
Discover hundreds of tools for: Writing, Coding, Video, Image generation

4.Regex101
https://regex101.com

What it does: The best site to test Regular Expressions with explanations.
Super useful for developers.

5.Remove.bg
https://remove.bg

What it does: Removes the background of images instantly using AI.

6.12ft Ladder
https://12ft.io

What it does: Helps bypass many paywalls on articles.

7.Archive.org
https://archive.org

The internet archive.

What it does:
With it you can: Read old books, Access old websites, Download free resources

8.Photopea
https://photopea.com

What it is: A free Photoshop alternative in the browser.

Supports: PSD files, AI files, Sketch files

9.Squoosh
https://squoosh.app

What it does: Compress images without losing quality.
Perfect for websites.

10.Excalidraw
https://excalidraw.com

What it is: A beautiful online whiteboard for diagrams.
Developers love it.

11.Carbon
https://carbon.now.sh

What it does: Creates beautiful code screenshots.
Perfect for blogs and social media.

12.Can I Use
https://caniuse.com

What it does: Shows browser support for CSS and JavaScript features.
Very useful for web developers.

13.Temp Mail
https://temp-mail.org

What it does: Creates temporary emails instantly.

14.Hackertab
https://hackertab.dev

What it is: A developer dashboard with news, GitHub trends, and resources.

15.Ray.so
https://ray.so

What it does: Creates beautiful images from code snippets.
Great for Twitter and dev.to.

16.QuickRef
https://quickref.me

What it is: A huge collection of programming cheatsheets.

17.JSON Formatter
https://jsonformatter.org

What it does: Formats messy JSON data instantly.

18.ExplainShell
https://explainshell.com

What it does: Explains Linux commands in simple terms.

19.Coolors
https://coolors.co

What it does: Generates perfect color palettes for UI design.

20.Unscreen
https://unscreen.com

What it does: Removes the background from videos automatically.

These websites make your daily activities such as learning easier.
As I use them almost everyday.

Check them out and give me your feedback down in the comments.
If you have any questions feel free to reach me below in the comments.

My Journey Into Machine Learning at 15 - Looking for Advice!

Thameem Azfar Ansari — Mon, 09 Mar 2026 19:00:11 +0000

Hi developers

I’m 15 years old and I’ve just finished my school exams. Now I’m starting my journey into Machine Learning and Data Science.

I have always been fascinated by technology and building things. Recently I completed Python Crash Course, and now I want to go deeper into:

Machine Learning
Data Science
AI tools
Building useful projects

My goal is to build real AI tools and useful products, not just follow tutorials.

If you're experienced in ML or Data Science, I’d really appreciate your advice:

What are the best resources to learn ML properly?
What projects should beginners build?
What mistakes should I avoid?

Right now I’m thinking of learning:

Python deeper
Numpy & Pandas
Machine Learning basics
Building small ML projects

But I’d love to hear from the community!

If you were starting Machine Learning from scratch today, what would you do differently?

Thanks for reading!
Looking forward to learning from this amazing community

10 AI Tools That Feel Like Superpowers (You’ll Wish You Knew Sooner)

Thameem Azfar Ansari — Wed, 18 Jun 2025 17:26:14 +0000

These AI tools are free, insanely powerful, and can make you feel like Tony Stark with a keyboard.

1. Perplexity AI

What it does: AI-powered search engine that gives real-time answers with citations.
Why it’s powerful: It doesn’t just give you links, it summarizes and references real sources so you can trust the results.

Use it for: Research, content writing, coding help, or even homework.

2. ElevenLabs

What it does: Converts any text into ultra-realistic human voice using AI voice synthesis.
Why it’s powerful: You can create voiceovers that sound natural for videos, audiobooks, or content.

Use it for: YouTube narration, story reading, content accessibility.

3. FlowGPT

What it does: A massive library of curated ChatGPT prompts across every niche.
Why it’s powerful: Prompts = power. It helps you unlock the full capability of AI tools by using better inputs.

Use it for: Productivity, business ideas, creative writing, coding, and more.

4. Runway ML

What it does: AI-powered video tools that removes backgrounds, generates video from text and animates objects.
Why it’s powerful: It gives creators high-end editing features that normally require pro software.

Use it for: TikToks, edits, green screen removal, and motion design.

5. Magnific AI

What it does: Upscales, enhances, and stylizes images using generative AI.
Why it’s powerful: You can take low-resolution images and turn them into HD masterpieces, like magic.

Use it for: Art, prints, professional designs, product visuals.

6. Replit Ghostwriter

What it does: An AI coding assistant integrated into Replit it helps you write and debug code as you go.
Why it’s powerful: You don’t just code, you code faster, better, and with real-time guidance.

Use it for: Learning to code, speeding up dev time, launching projects solo.

7. Humata.ai

What it does: You upload a PDF, then ask it questions about the file like you’re chatting with it.
Why it’s powerful: It reads long documents for you. You just ask what you need.

Use it for: Research papers, contracts, study materials, technical docs.

8. Krea AI

What it does: Live text-to-image generation with real-time editing.
Why it’s powerful: It’s like painting with your words, watching your imagination become visual instantly.

Use it for: Concept art, UI/UX design, thumbnails, social media posts.

9. HeyGen
What it does: Generate ultra-realistic video avatars that talk from text.
Why it’s powerful: It saves time, energy, and money on video shoots while still delivering professional results.

Use it for: Online courses, marketing, product demos, training videos.

10. Toolbuilder.ai

What it does: Lets you build your own AI apps/tools with no coding.
Why it’s powerful: You can create custom tools for you or your audience, even monetize them.

Use it for: Personal productivity, mini-SaaS tools, internal bots, landing page utilities.

10 Insanely Useful Websites That Feel Illegal to Know About

Thameem Azfar Ansari — Mon, 26 May 2025 06:33:33 +0000

They're 100% free and powerful.

1. TinyWow
Free tools for PDFs, images, videos, and AI tasks, no sign-up required.

What it does: Compress, convert, edit, all in your browser.

2. BlackBox AI
Like ChatGPT, but for code.

What it does: You can highlight code anywhere, even YouTube, and it’ll explain it.

3. Code Beautify
Paste ugly code = Get beautifully formatted versions in one click.

What it does: Works for JSON, HTML, XML, SQL, and more.

4. Thread Reader
Unroll massive Twitter/X threads into clean blog-style articles.

What it does: Bookmark worthy for deep threads.

5. Downsub
Download subtitles from any YouTube video in seconds.

What it does: No need to install anything.

6. OpenLibrary
Borrow millions of books for free.

What it does: It’s like Netflix for books, but free forever.

7. Cleanup.Pictures
Remove unwanted objects from photos with AI.

What it does: Literally magic, erase people, text, and more.

8. ColorSpace
Paste one color = get matching palettes instantly.

What it does: A hidden gem for designers & devs.

9. Listnr AI
Turn blog posts or text into realistic voiceovers with AI.

What it does: Great for content creators and narrators.

10. Z-library
One of the biggest free book download sites.

What it does: Use responsibly and legally, of course.

Want more?
Comment “More tools like this” and I’ll drop the next 10 hidden weapons

7 Programming Mistakes I Made That Almost Destroyed My Projects (And How I Fixed Them)

Thameem Azfar Ansari — Sun, 18 May 2025 06:50:19 +0000

Everyone tells you how to write perfect code. But no one tells you how easy it is to mess things up, especially when you're just starting out.
Here are 7 real mistakes I made that nearly destroyed my projects and how I came back stronger from each one.

1. Writing Code Without Planning Anything:

I jumped straight into coding because I was too excited.
Halfway through, I had no structure, messy logic, and tons of bugs.

The Result: Now, I sketch out a quick plan, even 10 minutes of thinking saves hours of debugging.

2. Copy-Pasting Stack Overflow Without Understanding:

I copied a solution that worked—until it didn’t.
One tiny change broke everything, and I had no clue why.

The Result: I still use Stack Overflow, but I make sure I understand every line I paste.

3. Ignoring Git Until the Last Minute:

I lost an entire day’s work because I forgot to commit.
Also, debugging without version control is literal pain.

The Result: I commit after every major change and push regularly. Git is now my safety net.

4. Not Reading the Documentation:

I wasted hours searching for answers that were literally in the first paragraph of the docs.

The Result: First I read the docs, then surf the internet for information. Even the order of this matters.

5. Overengineering Everything:

I tried to build “the perfect solution” with 10 extra features I didn’t need.
Ended up overwhelmed and lost interest.

The Result: Build version 1 very simple. Improve later. Launch ugly, improve fast.

6. Not Asking for Help:

I stayed stuck on a bug for 3 days because I didn’t want to “look dumb” by asking help. It was a terrible mistake.

The Result: I now ask questions early—online, Discord, dev forums. No shame in learning.

7. Testing Code in Production:

I pushed code live without testing.
It broke. My whole site went down.

The Result: I test locally, then deploy to staging, then go live. Never gonna skip testing again.

Final Thoughts:
Every dev makes mistakes, but those mistakes can be your best teachers.
If even one of these helped you dodge a bullet, this post did its job.

Which one hit you the hardest? Drop it in the comments.