0Pricing
Vibe Coding · درس

تخطيط التطبيق باستخدام AI

حوّل الفكرة إلى ميزات وخطة

تخطيط التطبيق باستخدام AI درس مجاني في Vibe Coding على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vibe Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vibe Coding 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

From Idea to a Real App

Welcome to the big one: building a full-stack app entirely by talking to AI. Full-stack means three layers working together — the frontend (what users see), the backend (the logic on a server), and a database (where data lives).

Before you generate a single line of code, you plan. A clear plan is the difference between a clean build and a tangled mess. The good news: AI is an excellent planning partner. In this lesson you'll turn a one-sentence idea into a concrete feature list and a build plan.

Start With One Sentence

Every app starts as a fuzzy idea. Your first job is to compress it into one clear sentence that names who it's for and what it does.

Don't worry about being perfect. You'll refine it with AI. A weak idea sentence is "a cool app for tasks." A strong one is specific about the user and the value.

Here is my app idea in one sentence:

"A simple web app where freelancers can log their work hours per client and see a weekly total."

Act as a product mentor. Ask me 3 sharp questions that would change how we build this, then restate my idea as a crisp one-liner.

Let AI Find the Core Features

Once your idea is clear, ask AI to break it into features. A feature is one thing a user can do: "add a time entry," "view weekly total," "create a client."

The trap here is asking for everything. Tell the AI to separate the must-haves (your MVP) from the nice-to-haves. You build the must-haves first.

Based on this app idea:
"A web app where freelancers log work hours per client and see a weekly total."

List the core features as short user actions. Split them into two groups:
1. MUST-HAVE for a first working version (MVP)
2. NICE-TO-HAVE for later

Keep the MVP list to 5 features or fewer.

Sketch the Data Model

Apps store information, and how you organize that information is the data model. Think in terms of things (entities) and the fields they have.

For our timer app: a Client has a name. A TimeEntry has hours, a date, and belongs to a client. AI can propose this for you so the database design isn't guesswork.

Propose a simple data model for this app:
"Freelancers log hours per client and see a weekly total."

For each entity, give me:
- the entity name
- its fields and their types
- how entities relate to each other (one-to-many, etc.)

Keep it minimal — only what the MVP needs.

Map the Screens

Next, list the screens (pages) a user moves through. Most small apps need only a handful: a main dashboard, a form to add data, maybe a settings page.

Listing screens early helps AI build navigation that makes sense and keeps you from inventing pages you don't need.

For the freelancer hours app, list the screens a user needs.

For each screen give:
- its name
- what the user sees there
- what actions they can take

Then describe how a user navigates between them. Keep it to 3-4 screens for the MVP.

Choose a Tech Stack (With AI's Help)

The tech stack is the set of tools your app is built with. As a beginner, you don't need to memorize options — ask AI to recommend a beginner-friendly, well-supported stack and explain why.

For vibe coding, a common, AI-friendly stack is Next.js (frontend + backend in one) with a hosted database. Let the AI justify its pick so you understand the choice.

I'm a beginner building the freelancer hours app by prompting AI. Recommend ONE simple, modern tech stack for the frontend, backend, and database.

For each choice:
- name the tool
- one sentence on why it's beginner-friendly
- note if it deploys easily to Vercel

Favor tools that AI editors like Cursor and v0 support well.

Turn the Plan Into a Spec File

A pro move: have AI write your whole plan into a single spec document (often a PROJECT.md or spec.md file). This becomes the shared memory you paste into any AI tool so it builds the right thing.

Tools like Cursor and Claude Code read project files automatically, so keeping a spec in your repo keeps the AI aligned across the whole build.

Combine everything we discussed into a single PROJECT.md spec for the freelancer hours app. Include sections:

## Idea
## MVP Features
## Data Model
## Screens
## Tech Stack
## Out of Scope (for now)

Write it in clean Markdown so I can save it in my repo and feed it to any AI tool.

Order the Build Steps

You can't build everything at once. Ask AI for a build order — the sequence of steps that gets you to a working app fastest, with something runnable at each stage.

A good order usually goes: data model first, then a backend that reads/writes it, then a frontend that talks to the backend, then login last. Each step should leave you with something you can actually run.

Using our PROJECT.md, give me an ordered, step-by-step build plan for the freelancer hours app.

Rules:
- Each step should end with something I can run and see working.
- Start from the database/data model and build outward.
- Put authentication near the end.
- Number the steps so I can tackle them one prompt at a time.

A Tiny Taste of the Data

Before any real database, you can sketch your data as plain JavaScript objects. This makes the data model feel concrete. Here's how our timer data might look as an array — exactly the shape a frontend would render.

Run it to see a weekly total computed from sample entries. This is the kind of logic AI will scale up into your real app.

const entries = [
  { client: "Acme", hours: 3, date: "2026-06-01" },
  { client: "Acme", hours: 2, date: "2026-06-02" },
  { client: "Globex", hours: 4, date: "2026-06-03" }
];

const total = entries.reduce((sum, e) => sum + e.hours, 0);
console.log("This week:", total, "hours");

const byClient = {};
for (const e of entries) {
  byClient[e.client] = (byClient[e.client] || 0) + e.hours;
}
console.log("Per client:", byClient);

Keep the Plan, Stay Flexible

A plan is a starting map, not a cage. As you build, you'll learn things — a feature is harder than expected, or a screen turns out unnecessary. That's normal.

When the plan changes, update your PROJECT.md and tell the AI. Keeping the spec current means every future prompt stays grounded in reality instead of an outdated dream.

We finished step 2 and decided to drop the 'export to CSV' feature for now and add a 'notes' field to each time entry.

Update the relevant sections of PROJECT.md to reflect these two changes, and show me only the sections that changed.

What a Strong Plan Gives You

With a sentence-sized idea, an MVP feature list, a data model, a screen map, a stack, and an ordered build plan saved in a spec file, you're ready to build with confidence.

Every prompt from here can reference this plan, so the AI builds your app — not a generic one. Planning feels slow, but it's the fastest path to a real, working full-stack app.

Quick Check

Let's lock in the planning workflow.

Recap: Plan First, Build Smart

You learned to turn a fuzzy idea into a buildable plan with AI:

  • Compress the idea into one clear sentence
  • Split features into MVP vs. later
  • Sketch a minimal data model and screen map
  • Pick a beginner-friendly tech stack
  • Save it all in a PROJECT.md spec and get an ordered build plan

Next up: wiring the frontend and backend together so your screens can actually talk to a server.

الأسئلة الشائعة

هل درس «تخطيط التطبيق باستخدام AI» مجاني؟

نعم — نص درس «تخطيط التطبيق باستخدام AI» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vibe Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Vibe Coding 4 دروس في المجموع.

ماذا ستتعلم في «تخطيط التطبيق باستخدام AI»؟

حوّل الفكرة إلى ميزات وخطة تتمرن على Vibe Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vibe Coding؟

لا تُشترط خبرة سابقة. Vibe Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «تخطيط التطبيق باستخدام AI»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vibe Coding هذا؟

نعم. كل درس في Vibe Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. تخطيط التطبيق باستخدام AI
  2. الواجهة الأمامية والخلفية معًا
  3. إضافة قاعدة بيانات
  4. حسابات المستخدمين وتسجيل الدخول
← العودة إلى Vibe Coding