How to Build an AI-Powered Project for Your Portfolio in 2026 (Step-by-Step)

How to Build an AI-Powered Project for Your Portfolio in 2026

Here’s the thing about landing your first tech job or internship in 2026: everyone has good grades, everyone has a polished resume, and everyone claims to “love problem-solving.” But when a hiring manager opens your portfolio, they’re not looking for adjectives. They want to see something. They want to click a link, interact with a live demo, and think, “Okay, this person actually ships things.”

The problem? Most students have no idea what to build. You’ve done class assignments, maybe a to-do app or two, but nothing that makes a recruiter stop scrolling. And honestly, that’s not your fault — the bar for what counts as an “impressive” project has skyrocketed.

That’s exactly where AI changes everything.

In the last two years, AI APIs and open-source models have gotten so accessible that you can build genuinely cool, portfolio-worthy projects in a single weekend — even if you’re still figuring out how async/await works. You don’t need a PhD in machine learning. You don’t need an expensive GPU. You need a free API key, a beginner-friendly framework, and a step-by-step guide.

Good news: that’s exactly what this article is.

Let’s get into it.

Table of Contents

1. Why AI-Powered Projects Make Your Portfolio Stand Out
2. 5 Beginner-Friendly AI Project Ideas (With Tech Stacks & Timelines)
3. Full Walkthrough: Build an AI Study Planner in a Weekend
4. Deploy Your AI Project for Free (3 Platforms Compared)
5. How to Write About Your Project in Your Portfolio
6. Tips for Making Your AI Project Look Professional
7. 7 Common Mistakes Student Developers Make (And How to Avoid Them)
8. FAQ

Why AI-Powered Projects Make Your Portfolio Stand Out

Let’s talk about what hiring managers actually see when they review student portfolios. It’s the same pattern over and over: a weather app, a calculator, another to-do list. These projects are fine for learning, but they don’t start conversations in an interview.

AI projects are different. Here’s why:

They prove you can work with real-world APIs. When you integrate something like the OpenAI API or Hugging Face, you’re showing that you can read documentation, handle authentication, manage rate limits, and work with data structures that nobody has formatted nicely for you. That’s a real job skill.

They demonstrate product thinking. An AI feature isn’t just code — it’s a product decision. Why does this feature exist? What happens when the API returns an error? How do you design the UX around something that takes a couple of seconds to respond? These are the kinds of questions senior developers ask, and building an AI project forces you to answer them.

They’re genuinely interesting to demo. This sounds trivial, but it matters. When an interviewer asks you to “walk me through a project you’re proud of,” you want them leaning forward in their seat, not nodding politely while you explain how you stored checkbox state in localStorage.

They signal that you keep up with trends. The tech industry in 2026 is moving fast. Having AI projects on your portfolio tells recruiters that you’re curious, you learn independently, and you’re already comfortable with the tools that are reshaping every industry.

And here’s the kicker: AI projects are no longer harder to build than traditional projects. With tools like Vercel AI SDK, LangChain.js, and free-tier APIs from OpenAI, Google, Anthropic, and Hugging Face, the barrier to entry has never been lower.

5 Beginner-Friendly AI Project Ideas

Not sure where to start? Here are five AI project ideas for students, each with a full breakdown of what you’ll build, what you’ll learn, and how long it takes. Pick the one that excites you most — you’ll do your best work on a project you actually care about.

Project 1: AI Chatbot with Knowledge Base

What it is: A conversational chatbot that can answer questions about a specific topic — like your university’s course catalog, your favorite book series, or a company’s documentation. Unlike a generic chatbot, this one uses Retrieval-Augmented Generation (RAG), which means it actually “knows” things instead of making stuff up.

Tech Stack: Next.js + OpenAI API (or free alternative: Google Gemini API) + Pinecone (free tier) or ChromaDB for embeddings + Tailwind CSS

Difficulty: Medium

Time to Build: 2-3 weekends

What You’ll Learn:

• How LLMs generate text and how to control their output
• What embeddings are and how semantic search works
• How to chunk and index documents for retrieval
• Streaming responses to the UI in real-time
• Environment variables and API key management

Why It’s Portfolio Gold: RAG-based chatbots are one of the most in-demand applications in 2026. Companies everywhere are building internal knowledge base tools. Having one on your portfolio shows you understand a pattern that the entire industry is adopting.

Project 2: AI Resume Analyzer

What it is: A web app where users paste their resume and a job description, and the AI analyzes how well their resume matches the role. It highlights missing keywords, suggests improvements, and gives a match score.

Tech Stack: React or Next.js + OpenAI Chat Completions API + React Markdown for rendering suggestions + shadcn/ui components

Difficulty: Easy-Medium

Time to Build: 1-2 weekends

What You’ll Learn:

• How to craft effective system prompts for structured output
• Parsing and handling text input from users
• Building clean, responsive UI components
• Storing (and optionally displaying) history of past analyses
• How to handle API errors gracefully with user-friendly messages

Why It’s Portfolio Gold: This project instantly resonates with every career counselor, recruiter, and fellow student who sees it. It’s practical, it’s useful, and it clearly solves a real problem. Bonus: you can use it yourself for every application you submit.

Project 3: AI Study Planner (Full Walkthrough Below!)

What it is: Students input their subjects, exam dates, and available study hours. The AI generates a personalized weekly study schedule, prioritizes topics based on difficulty and deadlines, and adjusts the plan as the user progresses.

Tech Stack: Next.js + OpenAI API + date-fns for date handling + localStorage or Supabase for persistence

Difficulty: Medium

Time to Build: 1-2 weekends

What You’ll Learn:

• Prompt engineering for scheduling and planning logic
• Working with dates and calendars in JavaScript
• State management for complex user data
• Building forms that feel intuitive
• How to structure a multi-step user flow

Why It’s Portfolio Gold: It’s a productivity tool with immediate personal use — which means you’ll actually finish it and keep improving it. It also demonstrates the ability to break a complex real-world problem (scheduling with constraints) into a format an AI can handle.

Project 4: AI Image Generator Web App

What it is: A web interface where users type a text description and generate AI images. Include features like style presets (watercolor, pixel art, photorealistic), image history, and download/share functionality.

Tech Stack: Next.js + Stable Diffusion API (via Replicate or Hugging Face) or DALL-E API + Cloudinary or Supabase Storage for image hosting

Difficulty: Medium

Time to Build: 2 weekends

What You’ll Learn:

• Working with image generation APIs and handling async image generation (polling or webhooks)
• Uploading, storing, and serving images
• Loading states and progress indicators for long-running operations
• Building grid layouts and image galleries
• Cost management (image APIs can get expensive — free tiers are key)

Why It’s Portfolio Gold: It’s visual, interactive, and instantly impressive in a portfolio demo. Everyone understands “type words, get a picture.” It also shows you can work with non-text AI models, which broadens your skill profile.

Project 5: AI Sentiment Analyzer Dashboard

What it is: A dashboard where users paste product reviews, social media comments, or feedback text, and the AI analyzes the overall sentiment (positive/negative/neutral), extracts key themes, and displays results in charts.

Tech Stack: React or Next.js + Google Gemini API (free tier has generous limits) + Recharts or Chart.js for data visualization + Trending keywords extraction via AI

Difficulty: Easy-Medium

Time to Build: 1 weekend

What You’ll Learn:

• Sentiment analysis concepts (classification, confidence scores)
• Data visualization with charting libraries
• How to batch-process multiple inputs
• Building dashboard-style layouts
• Presenting AI confidence levels to non-technical users

Why It’s Portfolio Gold: Sentiment analysis is the entry point to applied natural language processing (NLP). Every company with user feedback cares about this. It also merges AI with data visualization — two skills that together make you look very capable for an entry-level role.

Full Walkthrough: Build an AI Study Planner

This is the project we’re going to build together, step by step. By the end, you’ll have a fully functional AI study planner deployed to the web that you can link on your resume. Don’t worry if you’re not an experienced developer — we’ll go line by line.

What We’re Building

A web app where students can:

1. Add subjects and topics they need to study
2. Set exam dates for each subject
3. Specify their available study hours per day
4. Click “Generate Plan” and get an AI-created weekly schedule
5. Mark topics as “completed” and regenerate the plan

Prerequisites

Make sure you have these installed:

• Node.js 18+ — Download from nodejs.org
• A code editor — VS Code is the standard
• An AI API key — We’ll use Google Gemini (free tier), but OpenAI works too

Get your free Google Gemini API key at aistudio.google.com/apikey. It takes 30 seconds and requires zero credit card.

Step 1: Create the Next.js Project

Open your terminal and run:

1
2

npx create-next-app@latest ai-study-planner --typescript --tailwind --eslint --app --src-dir
cd ai-study-planner

When prompted, select:

• TypeScript: Yes
• ESLint: Yes
• Tailwind CSS: Yes
• App Router: Yes

Step 2: Install Dependencies

1
2

npm install @google/generative-ai date-fns
npm installlucide-react # for nice icons

Step 3: Set Up Your Environment Variables

Create a file called .env.local in your project root:

1

GEMINI_API_KEY=your_api_key_here

Replace your_api_key_here with the actual key you got from Google AI Studio. Never commit this file to GitHub. Next.js automatically loads .env.local, but make sure it’s in your .gitignore (it is by default).

Step 4: Create the AI Configuration

Create src/lib/ai.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

export interface Subject {
  id: string;
  name: string;
  topics: string[];
  examDate: string;
  difficulty: "easy" | "medium" | "hard";
}

export async function generateStudyPlan(
  subjects: Subject[],
  hoursPerDay: number
): Promise<string> {
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  const today = new Date().toISOString().split("T")[0];

  const subjectDescriptions = subjects
    .map((s) => {
      const daysUntilExam = Math.ceil(
        (new Date(s.examDate).getTime() - new Date(today).getTime()) /
          (1000 * 60 * 60 * 24)
      );
      return `- Subject: ${s.name}, Topics: ${s.topics.join(", ")}, Exam in: ${daysUntilExam} days, Difficulty: ${s.difficulty}`;
    })
    .join("\n");

  const prompt = `You are an expert study planner and learning coach. Create a detailed weekly study schedule based on the following information:

Subjects:
${subjectDescription}

Available study time: ${hoursPerDay} hours per day
Starting from: ${today}

Rules:
1. Prioritize subjects with closer exam dates
2. Spend more time on "hard" difficulty subjects
3. Include specific topics to study each session (not just subject names)
4. Add short breaks every 45-50 minutes
5. Include one rest day per week
6. If a subject has an exam within 7 days, make it the top priority
7. Format the schedule as a clear, readable list for each day

Format each day as:
**Day Name (Date)**
- HH:MM - HH:MM: [Subject] - Specific topic or activity
- HH:MM - HH:MM: [BREAK] - Rest / snack
...

Keep it realistic and motivating. Do not use markdown tables — use bullet points only.`;

  const result = await model.generateContent(prompt);
  const response = result.response;
  return response.text();
}

Step 5: Create the Subject Form Component

Create src/components/SubjectForm.tsx:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

"use client";

import { useState } from "react";
import { Subject } from "@/lib/ai";
import { Plus, X } from "lucide-react";

interface SubjectFormProps {
  onAddSubject: (subject: Subject) => void;
}

export default function SubjectForm({ onAddSubject }: SubjectFormProps) {
  const [name, setName] = useState("");
  const [topics, setTopics] = useState<string[]>([""]);
  const [examDate, setExamDate] = useState("");
  const [difficulty, setDifficulty] = useState<"easy" | "medium" | "hard">("medium");

  const addTopicField = () => setTopics([...topics, ""]);

  const removeTopicField = (index: number) => {
    if (topics.length > 1) {
      setTopics(topics.filter((_, i) => i !== index));
    }
  };

  const updateTopic = (index: number, value: string) => {
    const updated = [...topics];
    updated[index] = value;
    setTopics(updated);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !examDate || topics.every((t) => !t.trim())) return;

    const subject: Subject = {
      id: Date.now().toString(),
      name,
      topics: topics.filter((t) => t.trim() !== ""),
      examDate,
      difficulty,
    };

    onAddSubject(subject);
    setName("");
    setTopics([""]);
    setExamDate("");
    setDifficulty("medium");
  };

  return (
    <form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-md p-6 space-y-4">
      <h3 className="text-lg font-semibold text-gray-800">Add a Subject</h3>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Subject Name
        </label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="e.g., Data Structures"
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          required
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Topics to Cover
        </label>
        {topics.map((topic, index) => (
          <div key={index} className="flex gap-2 mb-2">
            <input
              type="text"
              value={topic}
              onChange={(e) => updateTopic(index, e.target.value)}
              placeholder={`Topic ${index + 1}`}
              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            {topics.length > 1 && (
              <button
                type="button"
                onClick={() => removeTopicField(index)}
                className="p-2 text-red-500 hover:bg-red-50 rounded-lg"
              >
                <X size={18} />
              </button>
            )}
          </div>
        ))}
        <button
          type="button"
          onClick={addTopicField}
          className="flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
        >
          <Plus size={16} /> Add another topic
        </button>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Exam Date
          </label>
          <input
            type="date"
            value={examDate}
            onChange={(e) => setExamDate(e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            required
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Difficulty
          </label>
          <select
            value={difficulty}
            onChange={(e) => setDifficulty(e.target.value as "easy" | "medium" | "hard")}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="easy">Easy</option>
            <option value="medium">Medium</option>
            <option value="hard">Hard</option>
          </select>
        </div>
      </div>

      <button
        type="submit"
        className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium"
      >
        Add Subject
      </button>
    </form>
  );
}

Step 6: Create the Generated Plan Display

Create src/components/StudyPlan.tsx:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

"use client";

interface StudyPlanProps {
  plan: string;
  isGenerating: boolean;
  onRegenerate: () => void;
}

export default function StudyPlan({ plan, isGenerating, onRegenerate }: StudyPlanProps) {
  if (isGenerating) {
    return (
      <div className="bg-white rounded-xl shadow-md p-8 text-center">
        <div className="animate-spin w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full mx-auto mb-4"></div>
        <p className="text-gray-600 text-lg">Generating your personalized study plan...</p>
        <p className="text-gray-400 text-sm mt-2">This usually takes 10-15 seconds</p>
      </div>
    );
  }

  if (!plan) return null;

  // Convert markdown-like **bold** text to styled headings
  const formattedPlan = plan
    .replace(/\*\*(.*?)\*\*/g, '<h4 class="text-blue-700 font-bold mt-4 mb-2 text-base">$1</h4>')
    .replace(/^- (.*?)$/gm, '<li class="text-gray-700 ml-4 mb-1">$1</li>');

  return (
    <div className="bg-white rounded-xl shadow-md p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-xl font-bold text-gray-800">Your Study Plan</h3>
        <button
          onClick={onRegenerate}
          className="text-sm bg-green-100 text-green-700 px-4 py-2 rounded-lg hover:bg-green-200 transition-colors"
        >
          Regenerate
        </button>
      </div>
      <div
        className="prose prose-sm max-w-none"
        dangerouslySetInnerHTML={{ __html: formattedPlan }}
      />
    </div>
  );
}

Step 7: Build the Main App Page

Replace the contents of src/app/page.tsx:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

"use client";

import { useState } from "react";
import SubjectForm from "@/components/SubjectForm";
import StudyPlan from "@/components/StudyPlan";
import { Subject, generateStudyPlan } from "@/lib/ai";
import { Trash2, BookOpen, Sparkles, Clock } from "lucide-react";

export default function Home() {
  const [subjects, setSubjects] = useState<Subject[]>([]);
  const [hoursPerDay, setHoursPerDay] = useState(3);
  const [plan, setPlan] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState("");

  const handleAddSubject = (subject: Subject) => {
    setSubjects([...subjects, subject]);
  };

  const handleRemoveSubject = (id: string) => {
    setSubjects(subjects.filter((s) => s.id !== id));
  };

  const handleGenerate = async () => {
    if (subjects.length === 0) {
      setError("Please add at least one subject first.");
      return;
    }
    setError("");
    setIsGenerating(true);
    try {
      const generatedPlan = await generateStudyPlan(subjects, hoursPerDay);
      setPlan(generatedPlan);
    } catch (err) {
      setError(
        "Failed to generate plan. Check your API key and try again. If the problem persists, the API might be rate-limited."
      );
      console.error(err);
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-5xl mx-auto px-4 py-5">
          <div className="flex items-center gap-3">
            <BookOpen className="text-blue-600" size={28} />
            <div>
              <h1 className="text-2xl font-bold text-gray-900">AI Study Planner</h1>
              <p className="text-gray-500 text-sm">
                Let AI create your perfect weekly study schedule
              </p>
            </div>
          </div>
        </div>
      </header>

      <div className="max-w-5xl mx-auto px-4 py-8 grid lg:grid-cols-2 gap-8">
        {/* Left Column — Input */}
        <div className="space-y-6">
          {/* Subject Form */}
          <SubjectForm onAddSubject={handleAddSubject} />

          {/* Hours Per Day */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-3">
              Daily Study Hours
            </h3>
            <div className="flex items-center gap-4">
              <Clock className="text-gray-400" size={20} />
              <input
                type="range"
                min="1"
                max="10"
                value={hoursPerDay}
                onChange={(e) => setHoursPerDay(Number(e.target.value))}
                className="flex-1 accent-blue-600"
              />
              <span className="text-lg font-bold text-blue-600 w-20 text-center">
                {hoursPerDay} hrs/day
              </span>
            </div>
          </div>

          {/* Added Subjects List */}
          {subjects.length > 0 && (
            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-lg font-semibold text-gray-800 mb-3">
                Your Subjects ({subjects.length})
              </h3>
              <div className="space-y-3">
                {subjects.map((subject) => (
                  <div
                    key={subject.id}
                    className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
                  >
                    <div>
                      <p className="font-medium text-gray-800">{subject.name}</p>
                      <p className="text-sm text-gray-500">
                        {subject.topics.length} topics • Exam: {subject.examDate} •{" "}
                        <span
                          className={`font-medium ${
                            subject.difficulty === "hard"
                              ? "text-red-600"
                              : subject.difficulty === "medium"
                              ? "text-yellow-600"
                              : "text-green-600"
                          }`}
                        >
                          {subject.difficulty}
                        </span>
                      </p>
                    </div>
                    <button
                      onClick={() => handleRemoveSubject(subject.id)}
                      className="p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg"
                    >
                      <Trash2 size={18} />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Generate Button */}
          <button
            onClick={handleGenerate}
            disabled={isGenerating || subjects.length === 0}
            className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 px-6 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all font-semibold text-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
          >
            <Sparkles size={20} />
            {isGenerating ? "Generating..." : "Generate Study Plan"}
          </button>

          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {error}
            </div>
          )}
        </div>

        {/* Right Column — Output */}
        <div>
          <StudyPlan
            plan={plan}
            isGenerating={isGenerating}
            onRegenerate={handleGenerate}
          />
          {!plan && !isGenerating && (
            <div className="bg-white rounded-xl shadow-md p-12 text-center">
              <BookOpen size={48} className="text-gray-300 mx-auto mb-4" />
              <h3 className="text-xl font-semibold text-gray-400">
                Your study plan will appear here
              </h3>
              <p className="text-gray-400 mt-2">
                Add your subjects and click "Generate Study Plan" to get started
              </p>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}

Step 8: Add the API Route (Optional — for production)

When deploying, you should route API calls through a Next.js API route to keep your key completely server-side. Create src/app/api/generate/route.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { NextRequest, NextResponse } from "next/server";
import { generateStudyPlan, Subject } from "@/lib/ai";

export async function POST(req: NextRequest) {
  try {
    const { subjects, hoursPerDay } = await req.json();
    const plan = await generateStudyPlan(subjects, hoursPerDay);
    return NextResponse.json({ plan });
  } catch (error) {
    console.error("API Error:", error);
    return NextResponse.json(
      { error: "Failed to generate study plan" },
      { status: 500 }
    );
  }
}

Step 9: Run Your App Locally

1

npm run dev

Open http://localhost:3000 in your browser. You should see the full AI Study Planner. Add a subject, set your hours, and hit “Generate Study Plan.” The AI will create a customized weekly schedule in about 10 seconds.

Step 10: Enhance It (Optional Ideas)

Once the basic version works, here are ideas to make it even more impressive:

• Save plans to localStorage so students can keep a history
• Add a “Mark Complete” checkbox for each topic that adjusts the plan
• Use Supabase for user accounts and cloud persistence
• Add a Pomodoro timer that integrates with the study schedule
• Export to calendar (.ics file download for Google Calendar)

Deploy Your AI Project for Free

Building the project is half the battle. Now you need to put it on the internet where anyone can see it. Here are three free platforms, ranked by how well they work for AI projects:

Option 1: Vercel (Best for Next.js)

Cost: Free for personal projects Best for: Full-stack Next.js apps with API routes

1. Push your code to GitHub
2. Go to vercel.com and sign in with GitHub
3. Click “Add New” → “Project” → Select your repository
4. In “Environment Variables,” add GEMINI_API_KEY with your key
5. Click “Deploy”

Vercel gives you a free .vercel.app domain, automatic HTTPS, and deploys on every git push. It’s the gold standard for Next.js projects.

Option 2: GitHub Pages (Best for Static Sites)

Cost: Free Best for: Frontend-only React projects (no API routes)

GitHub Pages only serves static files, so if your app needs server-side API routes, you’ll need to handle it differently — either use a separate backend or modify the app to call the AI API directly from the browser (less secure for production, but fine for a portfolio demo).

1. Install gh-pages package: npm install gh-pages --save-dev
2. Add to package.json:

1
2
3
4
5

"homepage": "https://yourusername.github.io/ai-study-planner",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d out"
}

3. Configure Next.js for static export in next.config.js:

1
2
3
4
5

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
};
module.exports = nextConfig;

4. Run npm run deploy

Option 3: Hugging Face Spaces (Best for AI/ML Demos)

Cost: Free Best for: Any AI project — it’s where developers expect to see AI demos

Hugging Face Spaces is like GitHub Pages but built specifically for AI applications. You get free hosting, a built-in GPU (for small models), and your project appears in a community of AI developers and researchers.

1. Go to huggingface.co/spaces
2. Click “Create new Space”
3. Choose “Gradio” or “Streamlit” for Python apps, or “Static” for HTML/JS
4. Push your frontend code or connect a GitHub repo

Pro tip: Deploy to Vercel and put a live demo link on your GitHub repo recruiters will see both.

How to Write About Your Project in Your Portfolio

A beautiful project means nothing if your portfolio page makes it sound boring. Here’s how to write about your AI project so it actually impresses people:

The STAR Framework for Project Descriptions

Use this format for each project on your portfolio:

Situation: What problem does this solve? What was the context? Task: What was your specific goal? What role did you play? Action: What did you build? What technologies did you use? What challenges did you solve? Result: What was the outcome? How many users tested it? What did you learn?

Example Write-Up for the AI Study Planner

AI Study Planner | Next.js, TypeScript, Google Gemini API

Students waste hours trying to figure out what to study and when. I built an AI-powered study planner that generates personalized weekly schedules based on subjects, exam dates, and available study time.

How it works: users input their subjects with topics and difficulty levels, set their exam dates, and the AI uses Google Gemini to create a prioritized daily schedule that accounts for deadlines and difficulty. The plan breaks study sessions into 45-minute focused blocks with breaks built in.

Key challenges solved:

• Designed a system prompt that generates consistently structured schedules across diverse input combinations
• Implemented streaming-style loading states to improve perceived performance during 10-15 second AI generation times
• Handled edge cases like invalid exam dates, empty topic lists, and API rate limiting with clear user feedback

Tech: Next.js 14 (App Router), TypeScript, Tailwind CSS, Google Gemini 1.5 Flash API, date-fns, deployed on Vercel

Live Demo: [link] | Source Code: [GitHub link]

Notice what this does: it’s specific, it’s technical where it matters, it shows problem-solving, and it includes links to both the live demo and the source code. Recruiters love clicking both.

Portfolio Page Essentials

Every project page or card should have:

• A clear title with the technology keywords (e.g., “AI Study Planner — Gemini API + Next.js”)
• A live demo button (this is non-negotiable — if it’s not deployed, link to a GIF/video)
• A GitHub repo link
• 2-3 screenshots or a short screen recording
• A brief description using the STAR framework above
• Technologies listed as tags or badges

Tips for Making Your AI Project Look Professional

The difference between a “student project” and something that looks like a “real product” comes down to polish. Here are the details that separate the two:

1. Use a Consistent Design System

Pick a component library and stick with it. Don’t mix random CSS frameworks. Great options:

• shadcn/ui (copy-paste components, extremely customizable)
• Tailwind UI (paid, but professional)
• MUI (Material UI) (comprehensive, well-documented)
• Chakra UI (simple, beginner-friendly)

For the study planner, we used Tailwind CSS with consistent spacing, a blue/indigo color scheme, and Lucide icons. That alone makes 90% of student projects look better.

2. Handle Loading States Beautifully

This is where most student projects fall apart. When the AI is generating something for 10 seconds, don’t just show a blank screen. Use:

• Animated spinners or skeleton loaders
• Progress indicators (“Analyzing your subjects… Generating schedule…”)
• Gradient animations that suggest motion and progress

In our study planner, we used a spinning loader with a “this usually takes 10-15 seconds” message. Simple, but it keeps users from clicking away.

3. Add Error Handling (and Make It Friendly)

Nothing kills credibility faster than an unhandled error displaying raw JSON to the user. Always:

• Wrap API calls in try/catch blocks
• Show user-friendly error messages
• Log the actual error to the console for debugging
• Consider retry logic for transient failures

1
2
3
4
5
6
7

try {
  const plan = await generateStudyPlan(subjects, hoursPerDay);
  setPlan(plan);
} catch (err) {
  setError("Something went wrong. We recommend checking your internet connection and trying again.");
  console.error("Generation error:", err);
}

4. Make It Responsive

Test your project on a phone. Seriously. Many recruiters browse portfolios on mobile during commutes. If your layout breaks on a small screen, you look like someone who only tested in full-screen Chrome on their laptop. Use:

• Tailwind’s responsive prefixes (sm:, md:, lg:)
• Mobile-first design approach
• Touch-friendly button sizes (minimum 44x44px tap targets)

5. Add a README That Doesn’t Suck

Your GitHub repo’s README is often the first thing technical reviewers look at. Include:

• A screenshot or GIF at the top
• What the project does (one sentence)
• Tech stack with badges
• How to run it locally (setup instructions)
• Environment variables needed
• A “Features” bullet list
• What you learned / challenges solved

6. Get a Real Domain (Optional but Powerful)

A yourname.vercel.app subdomain is fine. A custom domain like yourname.dev or studi.ai makes you look ten times more serious. Domains cost $10-15/year from Namecheap or Cloudflare Registrar.

7 Common Mistakes Students Make

After reviewing hundreds of student AI projects, these are the mistakes I see over and over:

Mistake 1: Committing API Keys to GitHub

This is the #1 mistake, and it can cost you real money. If you push an .env file with your API key, bots will find it within minutes and use up your quota (or rack up charges).

Fix: Always use .gitignore for environment variables. Use Vercel/Netlify environment variable settings for deployment. Add a pre-commit hook or use a tool like git-secrets to prevent accidental commits.

1
2
3
4

# .gitignore
.env.local
.env
*.env

Mistake 2: Making the Project Too Big

Students often try to build a “full AI SaaS platform” as their first project. They never finish. It’s better to build something small and polished than something ambitious and broken.

Fix: Start with the absolute minimum version that works. A study planner that generates a plain-text schedule is more impressive than an incomplete study planner with user accounts, payment integration, and dark mode.

Mistake 3: No Live Demo

If your project only exists on your laptop, it doesn’t exist for portfolio purposes. Deploy it, even if it’s ugly. A deployed ugly project beats a beautiful local-only project every time.

Mistake 4: Copying a Tutorial Without Understanding

There’s nothing wrong with following a tutorial — everyone does. But if an interviewer asks you “what does this code do?” and you can’t explain it, that’s a red flag.

Fix: After building a tutorial project, change something significant. Add a feature, refactor a component, switch the API, or redesign the UI. Make it yours.

Mistake 5: Not Versioning Properly

Committing everything as “update” or “fixed stuff” tells a reviewer you don’t understand git. Use meaningful commit messages:

1
2
3
4
5
6
7
8
9

# Bad
git commit -m "update"
git commit -m "fixed stuff"
git commit -m "asdfghj"

# Good
git commit -m "Add AI study plan generation with Gemini API"
git commit -m "Fix: handle empty topic list edge case"
git commit -m "Style: improve mobile responsiveness for subject cards"

Mistake 6: Ignoring Accessibility

If someone using a screen reader or keyboard can’t navigate your app, you’re excluding users and showing inexperience. Add alt text to images, use semantic HTML (<button>, <nav>, <main>), and ensure sufficient color contrast.

Mistake 7: Not Telling the Story

Having a GitHub repo with code is not a portfolio. Having a portfolio page with context, screenshots, a live demo, and a write-up about your process — that’s a portfolio. The story behind the project is as impressive as the project itself.

FAQ

Conclusion: Your Portfolio Won’t Build Itself

Here’s what I want you to take away from this article: the gap between “student with no experience” and “student with impressive AI projects” is smaller than you think. It’s not about being the best coder in your class. It’s about being curious enough to start, resourceful enough to follow through, and thorough enough to deploy something real.

The tools have never been more accessible. The APIs are free. The tutorials are everywhere. The only missing piece is you deciding to actually build something.

So here’s your action plan for this weekend:

1. Pick one project from the five ideas above. Don’t overthink it. Go with the one that excites you.
2. Set a timer for 2 hours and get the basic version working. Don’t worry about design. Just make it functional.
3. Deploy it before Sunday night. Use Vercel. It takes 5 minutes.
4. Write about it. Create a portfolio page, a GitHub README, and a short LinkedIn post about what you built.
5. Share it. Post it in developer communities, show your friends, send it to mentors.

The students who land the best internships and entry-level roles in 2026 aren’t necessarily the smartest ones. They’re the ones who shipped something and talked about it well.

Go build your project. Your future self will thank you.

Affiliate Disclaimer

This article may contain links to products and services. Some of these links may be affiliate links, meaning we may earn a small commission if you sign up or make a purchase through them — at no extra cost to you. We only recommend tools and services we genuinely believe will help you. Our editorial content is not influenced by affiliate partnerships.

Found this helpful? Share it with a friend who’s building their portfolio. Got a question about any of the projects covered here? Drop a comment below or reach out on Twitter/X. We read every message.

Tags: ai-project, portfolio, coding, students, vibe-coding, project-ideas, beginner-projects