Courses Learn Blog Contact
Get Started →
Home  /  Free Lessons  /  JAVASCRIPT FOUNDATIONS + AI MINDSET
Lesson 29

Build Your Portfolio Project: AI Study Buddy

JAVASCRIPT FOUNDATIONS + AI MINDSET 7 min read Free

Build Your Portfolio Project: AI Study Buddy

From Learner to Creator — Your First Full‑Stack AI App

By AI Learning Assistant  ·  React  ·  Express  ·  OpenAI  ·  Portfolio Project

🤖 YOUR KIND AI LEARNING ASSISTANT

This is it — the big day! You've learned React, Node.js, Tailwind, APIs, and deployment. Now you'll combine everything into a real portfolio project: AI Study Buddy. I'll help you plan every file, write every component, and deploy it live. Take your time, celebrate small wins, and remember — every expert built their first complete project exactly like this. You can do this! 🚀

Project Overview: AI Study Buddy

WHAT YOU WILL BUILD

You will build an AI Study Buddy — a complete web app that helps students learn JavaScript and React through AI‑powered explanations, tracks their progress, and saves everything in the browser's localStorage.

Core Features:

  • 🏠 Home Page — Hero section with course info, CTA button
  • 📚 Curriculum Page — List of 30 days, each click marks progress (saved to localStorage)
  • 🤖 AI Tutor — Ask any JavaScript/React question, get AI answers (OpenAI API)
  • 📊 Dashboard — Show completed days, total progress percentage
  • 🗄️ Express Backend — Proxy for OpenAI API (keeps API key secret)
  • 🎨 Tailwind CSS — Full responsive styling
  • 🚀 Deployed on Vercel — Both frontend and backend live

Step 1 — Plan Your File Structure

ORGANISATION IS KEY

# ============================================
# AI STUDY BUDDY — COMPLETE FILE STRUCTURE
# ============================================

# BACKEND (Express) — folder: backend/
backend/
├── server.js              // Main Express server
├── routes/
│   └── ai.js              // POST /api/ask — handles OpenAI API calls
├── .env                   // OPENAI_API_KEY (never commit!)
├── package.json           // express, cors, openai, dotenv
└── vercel.json            // Vercel deployment config for backend

# FRONTEND (React) — folder: frontend/
frontend/
├── src/
│   ├── App.js             // Main app with React Router
│   ├── index.js           // Entry point
│   ├── index.css          // Tailwind imports
│   ├── components/
│   │   ├── Navbar.js      // Navigation bar
│   │   ├── ProgressCard.js// Shows dashboard progress
│   │   └── AIChat.js      // AI tutor chat component
│   ├── pages/
│   │   ├── Home.js        // Landing page
│   │   ├── Curriculum.js  // 30-day list with progress
│   │   ├── Dashboard.js   // Stats and progress
│   │   └── NotFound.js    // 404 page
│   └── hooks/
│       └── useProgress.js // Custom hook for localStorage progress
├── public/
├── package.json
└── tailwind.config.js

🤖 AI PLANNING PROMPT (Copy this into ChatGPT)

"I am a beginner JavaScript developer. Help me plan the file structure for an AI Study Buddy web app using React for the frontend, Express for the backend, and the OpenAI API. List all files I need and what each one does."

Step 2 — Build the Backend (Express + OpenAI)

KEEP YOUR API KEY SAFE

📜 backend/server.js

const express = require('express');
const cors = require('cors');
const aiRoutes = require('./routes/ai');

require('dotenv').config();

const app = express();
app.use(cors());
app.use(express.json());

app.use('/api', aiRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Backend running on port ${PORT}`));

📜 backend/routes/ai.js

const express = require('express');
const OpenAI = require('openai');
const router = express.Router();

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

router.post('/ask', async (req, res) => {
  const { question } = req.body;
  try {
    const response = await client.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [
        { role: 'system', content: 'You are a patient JavaScript tutor. Keep answers short and use examples.' },
        { role: 'user', content: question }
      ]
    });
    res.json({ answer: response.choices[0].message.content });
  } catch (error) {
    res.status(500).json({ error: 'AI service unavailable' });
  }
});

module.exports = router;

Step 3 — Frontend: Router, Tailwind, Pages

REACT · REACT ROUTER · TAILWIND

📜 frontend/src/App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Curriculum from './pages/Curriculum';
import Dashboard from './pages/Dashboard';
import NotFound from './pages/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/curriculum" element={<Curriculum />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

📜 frontend/src/hooks/useProgress.js (Custom Hook for localStorage)

import { useState, useEffect } from 'react';

export function useProgress() {
  const [completed, setCompleted] = useState([]);

  useEffect(() => {
    const saved = localStorage.getItem('studyBuddyProgress');
    if (saved) setCompleted(JSON.parse(saved));
  }, []);

  const toggleDay = (day) => {
    const updated = completed.includes(day)
      ? completed.filter(d => d !== day)
      : [...completed, day];
    setCompleted(updated);
    localStorage.setItem('studyBuddyProgress', JSON.stringify(updated));
  };

  const progressPercent = Math.round((completed.length / 30) * 100);

  return { completed, toggleDay, progressPercent };
}

📜 frontend/src/components/AIChat.js

import { useState } from 'react';

export default function AIChat() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');
  const [loading, setLoading] = useState(false);

  const askAI = async () => {
    if (!question.trim()) return;
    setLoading(true);
    try {
      const res = await fetch('http://localhost:5000/api/ask', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question })
      });
      const data = await res.json();
      setAnswer(data.answer);
    } catch (err) {
      setAnswer('Sorry, AI tutor is temporarily unavailable.');
    }
    setLoading(false);
  };

  return (
    <div className="bg-gray-900 p-6 rounded-xl">
      <h3 className="text-2xl font-bold text-yellow-400 mb-4">🤖 AI Study Buddy</h3>
      <textarea
        className="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700"
        rows="3"
        placeholder="Ask anything about JavaScript or React..."
        value={question}
        onChange={(e) => setQuestion(e.target.value)}
      />
      <button
        onClick={askAI}
        className="mt-3 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
        disabled={loading}
      >
        {loading ? 'Thinking...' : 'Ask AI'}
      </button>
      {answer && (
        <div className="mt-4 p-4 bg-gray-800 rounded-lg">
          <p className="text-gray-300">{answer}</p>
        </div>
      )}
    </div>
  );
}

Step 4 — Tailwind CSS Configuration

STYLING MADE FAST

// frontend/src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5 — Deploy Both Frontend and Backend

MONOREPO DEPLOYMENT ON VERCEL

Since you have both a frontend and a backend, you can deploy them together as a monorepo or separately. The easiest way is to push the whole project to GitHub and configure Vercel to run both.

# At the root of your project, create a vercel.json
{
  "builds": [
    { "src": "backend/server.js", "use": "@vercel/node" },
    { "src": "frontend/package.json", "use": "@vercel/static-build" }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "backend/server.js" },
    { "src": "/(.*)", "dest": "frontend/build/$1" }
  ]
}

Then push to GitHub, import the repository on Vercel, add your OPENAI_API_KEY as an environment variable, and deploy. Your app will be live at your-project.vercel.app!

💬 ASK YOUR KIND AI ASSISTANT

"Help me debug, review my code, and plan the next features"

🗣️ YOU ASK THE AI:

"I'm building my AI Study Buddy portfolio project. Help me review my code structure, suggest improvements, and plan the next features."

🤗 YOUR KIND AI ASSISTANT RESPONDS:

Code review checklist: ✅ File structure is clear and modular. ✅ Custom hook for localStorage is reusable. ✅ Components are small and focused. ✅ Backend separates routes. ✅ Environment variables are used correctly.

Suggested improvements: Add loading skeletons to the AI chat. Add error boundaries to catch crashes. Use environment variables for the API URL (different for dev vs production). Add a refresh button to the curriculum page.

Next features you can add: 1) Quiz generator — AI creates multiple‑choice questions. 2) Study streak counter — save last active date in localStorage. 3) Dark/light mode toggle. 4) Share progress on social media. 5) User accounts (add authentication).

Deployment tips: Remember to set OPENAI_API_KEY in Vercel environment variables. Your frontend's fetch URL must be dynamic — use process.env.REACT_APP_API_URL.

You're ready to deploy! This project is portfolio‑ready. Take screenshots, write a detailed README, and share the live link. You've built a full‑stack AI app. That's huge. Celebrate this win!

📝 YOUR LEARNING JOURNAL

I planned and built my first complete full‑stack portfolio project! I used React Router for pages, a custom hook for localStorage progress, Tailwind for styling, Express and OpenAI for the backend, and deployed everything to Vercel. This project proves that I understand how all the pieces fit together. I'm proud of myself. Now I'll add a quiz generator feature and share my live URL with the world. I'm ready for job applications! 🎉

Quick Reference — Commands to Run

# Backend setup
cd backend
npm init -y
npm install express cors openai dotenv

# Frontend setup
npx create-react-app frontend
cd frontend
npm install react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Run locally
npm start        # frontend on port 3000
node server.js   # backend on port 5000

# Deploy to Vercel (after pushing to GitHub)
vercel --prod

🤗 YOUR KIND AI ASSISTANT — FINAL WORDS

💬 "I'm stuck — my AI isn't responding!" → Check your backend logs, ensure your API key is valid, and verify CORS is enabled.

💬 "My progress resets on refresh" → Check that you're saving to localStorage correctly and loading it in useEffect.

💬 "What should I do after deploying?" → Share your link on LinkedIn, Twitter, and the Webbo3 community. Add it to your resume. Build your next project!

You did it. You went from writing your first console.log to building and deploying a full‑stack AI application. This is a monumental achievement. Treasure this moment — you are now a developer. The journey continues, but today, celebrate. 🎉🎉🎉

AI-Assisted JavaScript Learning · Build Your Portfolio Project · AI Study Buddy

Learn this with a real instructor

Free lessons take you a long way on your own. The full programmes add live classes, assignments, Skill Points and a certificate — built for African students.