// React — a simple component
// File: src/components/CourseCard.jsx

import { useState } from "react";

export default function CourseCard({ course }) {
  const [enrolled, setEnrolled] = useState(false);

  return (
    <div className="card">
      <h3>{course.title}</h3>
      <p>{course.description}</p>
      <button
        onClick={() => setEnrolled(!enrolled)}
        className={enrolled ? "btn enrolled" : "btn"}
      >
        {enrolled ? "Enrolled ✓" : "Enrol now"}
      </button>
    </div>
  );
}

// Express + MongoDB — a simple API
// File: server.js

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");

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

// Connect to MongoDB
mongoose
  .connect(process.env.MONGO_URL)
  .then(() => console.log("Connected to MongoDB"));

// Schema
const Course = mongoose.model("Course", {
  title: String,
  description: String,
});

// List all courses
app.get("/api/courses", async (req, res) => {
  const courses = await Course.find().limit(20);
  res.json(courses);
});

// Create a course
app.post("/api/courses", async (req, res) => {
  const { title, description } = req.body;
  if (!title) return res.status(400).json({ error: "title required" });

  const created = await Course.create({ title, description });
  res.status(201).json(created);
});

app.listen(5000, () => console.log("API running on :5000"));

// React — fetch from your API
// File: src/pages/Courses.jsx

import { useEffect, useState } from "react";

export default function Courses() {
  const [courses, setCourses] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function load() {
      try {
        const res = await fetch("http://localhost:5000/api/courses");
        if (!res.ok) throw new Error("Failed to load");
        const data = await res.json();
        setCourses(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div className="grid">
      {courses.map((c) => (
        <div key={c._id} className="card">
          <h3>{c.title}</h3>
          <p>{c.description}</p>
        </div>
      ))}
    </div>
  );
}

Project 1 — Personal portfolio site
(Start here — 1-2 weeks)

1. React + Vite + Tailwind CSS
2. Sections: hero, about, projects, contact
3. Responsive on mobile
4. Deploy to Vercel (free)
5. Add your real projects as you build them

Why it works:
- Shows design sense + coding ability
- Becomes the link you share everywhere
- Easy for interviewers to review

Project 2 — Full-stack task app (MERN)
(2-3 weeks)

Frontend (React):
- Auth screens (login, signup)
- Task list with create/edit/delete
- Filter and search

Backend (Express + MongoDB):
- User auth with JWT
- Task CRUD endpoints
- MongoDB Atlas for the database

Deployment:
- Frontend → Vercel
- Backend → Render
- Env vars set on each platform

Why it works:
- Covers all four MERN letters
- Auth + CRUD are the core of real apps
- One URL you can show confidently

Weekly study plan (15–20 hours):
Mon 2h — Learn (video / docs)
Tue 2h — Practice (small exercises)
Wed 2h — Learn
Thu 2h — Practice
Fri 1.5h — Review + notes
Sat 4h — Project work
Sun 2.5h — Deploy / document / rest

Consistency beats intensity.
Track hours to keep momentum.

Job search plan (Month 8):
Week 1: Resume + LinkedIn for MERN roles
Week 2: Polish GitHub + project READMEs
Week 3: Apply to 10 roles per week
Week 4: 2 mock interviews
Week 5: Follow up + iterate
Week 6: Engage in JS/React communities

Aim for 8–12 quality applications per week.
Tailor the cover note to each role.