title: "Final 30-Day Training Schedule" publishedAt: "2024-12-02" summary: "A comprehensive 30-day training schedule covering Web Dev, Next.js Full-Stack Mastery, and NHPC Stack Development." author: "Jordan Carlzen" image: "https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1600&auto=format&fit=crop"

Final 30-Day Training Schedule

📊 Course Overview

Session 1 = Web Dev Fundamentals
Session 2 = NHPC Stack (Next.js + Hono + Prisma + Cloudflare)
Session 3 = Next.js Full-Stack CRUD Mastery

By the end of this program, you'll have built 12+ production-ready projects and mastered modern web development.

📌 WEEK 1 — Foundations (HTML, CSS, Intro JavaScript, Next.js Basics)

WEEK 1 - Session 1 (Tue, Dec 3)

| Course Track | Topic | Teacher | | --------------------------------- | -------------------------------------------- | ---------- | | Web Dev | HTML Foundations & Modern Structure | Mr. Kalule | | Next.js Full-Stack Mastery | Next.js 15 Fundamentals & Modern React | Mr. Collin | | NHPC Stack Development Course | Next.js Fundamentals & Modern React Patterns | Mr. JB |

WEEK 1 - Session 2 (Thu, Dec 5)

| Course Track | Topic | Teacher | | --------------------------------- | ----------------------------------------------- | ---------- | | Web Dev | CSS Fundamentals & Modern Layouts | Mr. Jordan | | Next.js Full-Stack Mastery | TypeScript Deep Dive & Tailwind CSS Integration | Mr. Sam | | NHPC Stack Development Course | Advanced Next.js Patterns & State Management | Mr. Custor |

/* styles.css - Modern CSS Grid Layout */
.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	padding: 2rem;
}

.card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.card:hover {
	transform: translateY(-4px);
}

WEEK 1 - Session 3 (Sat, Dec 7)

| Course Track | Topic | Teacher | | --------------------------------- | --------------------------------------------------- | ---------- | | Web Dev | Advanced CSS & Design Patterns | Mr. Kalule | | Next.js Full-Stack Mastery | PROJECT 1 - Static Business Directory | Mr. JB | | NHPC Stack Development Course | PROJECT 1 - Recipe Sharing Platform (Frontend Only) | Mr. John |

📌 WEEK 2 — Tailwind, APIs & Databases

WEEK 2 - Session 4 (Tue, Dec 10)

| Course Track | Topic | Teacher | | --------------------------------- | ----------------------------------------------- | ----------- | | Web Dev | PROJECT 1 - Restaurant Menu & Ordering Page | Mr. Richard | | Next.js Full-Stack Mastery | Better Auth Setup & Authentication Fundamentals | Mr. Jordan | | NHPC Stack Development Course | Hono Framework & API Development Fundamentals | Mr. JB |

// lib/auth.ts
import { betterAuth } from "better-auth";
import { prismaAdapter } from "better-auth/adapters/prisma";
import { prisma } from "./prisma";

export const auth = betterAuth({
	database: prismaAdapter(prisma, {
		provider: "postgresql",
	}),
	emailAndPassword: {
		enabled: true,
	},
	socialProviders: {
		github: {
			clientId: process.env.GITHUB_CLIENT_ID!,
			clientSecret: process.env.GITHUB_CLIENT_SECRET!,
		},
	},
});

WEEK 2 - Session 5 (Thu, Dec 12)

| Course Track | Topic | Teacher | | --------------------------------- | -------------------------------------------------------------- | ---------- | | Web Dev | Introduction to Tailwind CSS & Utility-First Approach | Mr. John | | Next.js Full-Stack Mastery | PROJECT 2 - User Authentication System with Email Verification | Mr. Collin | | NHPC Stack Development Course | PostgreSQL, Prisma ORM & Database Design | Mr. Sam |

// components/Button.tsx - Tailwind Component Example
interface ButtonProps {
	variant?: "primary" | "secondary" | "danger";
	children: React.ReactNode;
	onClick?: () => void;
}

export function Button({
	variant = "primary",
	children,
	onClick,
}: ButtonProps) {
	const baseStyles = "px-4 py-2 rounded-lg font-medium transition";

	const variants = {
		primary: "bg-blue-600 text-white hover:bg-blue-700",
		secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
		danger: "bg-red-600 text-white hover:bg-red-700",
	};

	return (
		<button className={`${baseStyles} ${variants[variant]}`} onClick={onClick}>
			{children}
		</button>
	);
}

WEEK 2 - Session 6 (Sat, Dec 14)

| Course Track | Topic | Teacher | | --------------------------------- | -------------------------------------------------------------------------------------------------- | ----------- | | Web Dev | Tailwind Layout & Components | Mr. Richard | | Next.js Full-Stack Mastery | PostgreSQL, Prisma ORM & Database Design | Mr. Sam | | NHPC Stack Development Course | PROJECT 2 & 3 - RESTful APIs
PROJECT 2: Blog API
PROJECT 3: E-commerce Product API | Mr. JB |

📌 WEEK 3 — CRUD, Auth & Cloud Storage

WEEK 3 - Session 7 (Tue, Dec 17)

| Course Track | Topic | Teacher | | --------------------------------- | --------------------------------------------- | ---------- | | Web Dev | Advanced Tailwind & Customization | Mr. Kalule | | Next.js Full-Stack Mastery | Next.js Server Actions & API Routes | Mr. Jordan | | NHPC Stack Development Course | Connecting Next.js Frontend with Hono Backend | Mr. Collin |

// app/actions.ts
"use server";

import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";

export async function createPost(formData: FormData) {
	const title = formData.get("title") as string;
	const content = formData.get("content") as string;

	await prisma.post.create({
		data: {
			title,
			content,
			authorId: "user-id-here",
		},
	});

	revalidatePath("/posts");
	return { success: true };
}

WEEK 3 - Session 8 (Thu, Dec 19)

| Course Track | Topic | Teacher | | --------------------------------- | ------------------------------------------------ | ---------- | | Web Dev | PROJECT 2 - Small Business Landing Page | Mr. Custor | | Next.js Full-Stack Mastery | PROJECT 3 - Personal Note-Taking App (Full CRUD) | Mr. Sam | | NHPC Stack Development Course | Authentication & Authorization | Mr. JB |

WEEK 3 - Session 9 (Sat, Dec 21)

| Course Track | Topic | Teacher | | --------------------------------- | --------------------------------------------------------- | ----------- | | Web Dev | JavaScript Fundamentals & DOM Manipulation | Mr. John | | Next.js Full-Stack Mastery | Advanced Patterns - File Uploads, Multi-user, Permissions | Mr. Richard | | NHPC Stack Development Course | PROJECT 4 - Full-Stack Job Board | Mr. JB |

// app/api/upload/route.ts
import { put } from "@vercel/blob";
import { NextResponse } from "next/server";

export async function POST(request: Request) {
	const formData = await request.formData();
	const file = formData.get("file") as File;

	if (!file) {
		return NextResponse.json({ error: "No file uploaded" }, { status: 400 });
	}

	const blob = await put(file.name, file, {
		access: "public",
	});

	return NextResponse.json({ url: blob.url });
}

📌 WEEK 4 — Deployment & Real-World Apps

WEEK 4 - Session 10 (Tue, Dec 23)

| Course Track | Topic | Teacher | | --------------------------------- | ----------------------------------------------- | ---------- | | Web Dev | JavaScript Data Structures & Functions | Mr. John | | Next.js Full-Stack Mastery | PROJECT 4 - Team Task Manager (Multi-user CRUD) | Mr. Collin | | NHPC Stack Development Course | File Uploads & Cloud Storage | Mr. JB |

🚀 Deployment Platforms

Learn to deploy on:

• Vercel - Best for Next.js apps
• Cloudflare Pages - Global edge network
• Railway - Full-stack deployments
• Render - Databases and APIs

Free Tiers Available

WEEK 4 - Session 11 (Thu, Dec 25)

| Course Track | Topic | Teacher | | --------------------------------- | ----------------------------------------------- | ----------- | | Web Dev | PROJECT 3A - Task Management Dashboard (Part 1) | Mr. Richard | | Next.js Full-Stack Mastery | PROJECT 5 - Inventory Management System | Mr. Sam | | NHPC Stack Development Course | PROJECT 5 - Social Media Dashboard | Mr. JB |

WEEK 4 - Session 12 (Sat, Dec 27)

| Course Track | Topic | Teacher | | --------------------------------- | -------------------------------------------------------- | ---------- | | Web Dev | Advanced JavaScript & PROJECT 3A Completion | Mr. JB | | Next.js Full-Stack Mastery | Production Best Practices & Advanced Features | Mr. Jordan | | NHPC Stack Development Course | PROJECT 6 - Multi-Vendor Marketplace Platform (Capstone) | Mr. Collin |

📌 WEEK 5 — Capstone (Launch Projects)

WEEK 5 - Session 13 (Tue, Dec 30)

| Course Track | Topic | Teacher | | --------------------------------- | ---------------------------------------------------------------------------------- | ---------- | | Web Dev | Final Project – Local Service Booking System | Mr. Custor | | Next.js Full-Stack Mastery | PROJECT 6 - SaaS Starter: Customer Management Platform (CRM) | Mr. JB | | NHPC Stack Development Course | PROJECT 6 - Multi-Vendor Marketplace Platform (Capstone) completion and Deployment | Mr. Collin |

📚 Lesson Reference Links

💡 Pro Tips for Success

🎯 Learning Outcomes

By completing this 30-day intensive program, you will:

✅ Master Modern Web Development - HTML, CSS, JavaScript, and TypeScript ✅ Build Full-Stack Applications - From frontend to backend to deployment ✅ Understand Databases - PostgreSQL, Prisma ORM, and data modeling ✅ Implement Authentication - Secure user management and authorization ✅ Deploy to Production - Live applications on Vercel, Cloudflare, and more ✅ Create Portfolio Projects - 12+ real-world applications to showcase ✅ Learn Best Practices - Clean code, testing, and scalable architecture ✅ Gain Job-Ready Skills - Everything needed for junior to mid-level positions

📞 Get Support

✨ Final Notes

Key Reminders:

• Use the lesson links for detailed content and code examples
• Each session builds on previous knowledge - don't skip ahead
• Projects are where you'll cement your understanding
• Keep these resources accessible throughout the 30-day program
• Share your progress and celebrate your wins!

Last Updated: December 2, 2024