Course Lessons

JAVASCRIPT FOUNDATIONS + AI MINDSET

Back to Course

Build Your Portfolio Project: AI Study Buddy

JAVASCRIPT... Lesson 29 of 41 7 min

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 (
    
      
      
        } />
        } />
        } />
        } />
      
    
  );
}
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 (
    

      
🤖 AI Study Buddy