🚀 Next.js Course Notes & Experiments

This repository contains my personal notes and code while taking the Next.js course on DevTalles.

📚 About this repository

• This is a personal repository created while following the Next.js course on DevTalles.
• It contains different branches, each one for a specific topic or section of the course.
• Current branch: 01-first-steps — Here you will find basic Next.js concepts, routing, layouts, and nested layouts. The code and notes are meant for learning and experimentation purposes.
• More branches may be added as I progress through the course.

📝 What you'll find in this branch

This branch (01-first-steps) contains:

• Basic Next.js concepts and project structure
• Routing and navigation
• Layouts and nested layouts
• Simple code examples and notes for each topic

All code and notes are for personal learning and experimentation.

🌟 Branch Overview

01-first-steps

• 🔹 Project structure & setup
• 🔹 Routing & navigation
• 🔹 Layouts & nested layouts
• 🔹 Core Next.js concepts
• 🔹 Introduction to useState and client components
• 🔹 Usage of Next.js Link and Image components
• 🔹 Basic HTML structures with Tailwind CSS
• 🔹 Foundation for dynamic metadata and server-side rendering

02-dashboard

• 📊 Dashboard structure & UI with Tailwind CSS for rapid, responsive layouts
• ⚡ Dynamic metadata management for SEO and social sharing
• 🖼️ External image support, optimization, and loading priority
• 🔗 Advanced use of Next.js Link & Image components
• 🔄 Server-side rendering (SSR), static generation (SSG), and revalidation strategies
• 🚦 Custom error pages and argument validation for robust UX
• 🔁 Redirections and seamless navigation
• 🗃️ State management with Redux Toolkit: global state, actions, reducers, and providers
• 🧩 Usage of useDispatch (useAppDispatch) and useSelector (useAppSelector)
• 🛠️ LocalStorage integration with server components for persistent state
• 📦 Modular, scalable project structure for maintainability

03-admin-todos-api

• 🗂️ Full CRUD operations (Read, Update, Post) for todos
• 🔄 Pagination and efficient data fetching
• 🛠️ RESTful API consumption (client & server side)
• ⚡ Server Actions for direct client-server communication (no HTTP needed)
• 🚀 useOptimistic for instant UI updates during async operations
• 🔒 Authentication with Auth.js (Google, GitHub, custom credentials)
• 🔑 Secure password encryption and session management
• 🍪 Cookie management (client & server side)
• 🛡️ Server and client-side validation (Yup)
• 🗃️ Database: Postgres with Prisma ORM (relations, migrations, seed, pull & push)
• 🐳 Dockerized development environment
• 🛒 Shopping cart and user session features
• 🔗 Global user modifications and additional user fields

04-teslo-shop

• 🛍️ Minimal e‑commerce demo built with Next.js + Prisma
• 🐳 Dockerized Postgres database for local development
• 🗄️ Database schema & migrations with Prisma and seeding scripts
• 🔐 Authentication with Auth.js (credentials & OAuth providers)
• 💳 Payment integration using PayPal (sandbox + production flow)
• 📦 Image uploads handled via Cloudinary
• ⚡ Next.js App Router (server & client components) + TypeScript
• 🎨 Styling with Tailwind CSS and utility-first patterns
• 🧪 Seed accounts for testing (admin/user) and quick start scripts
• 🛠️ Quick start & developer workflow (`.env.template`, `docker-compose`, Prisma commands)

📚 Useful resources

• Next.js official documentation
• Interactive Next.js tutorial
• Next.js GitHub repository
• DevTalles platform

With ❤️ and ☕, from Nicaragua to the world,
Juan Gómez