Overview

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. Embark on a hands-on journey through modern web development with this practical course on building freelance-ready applications using NextJS and Strapi. You'll gain a solid understanding of full-stack development, from creating dynamic pages to deploying production-ready applications. Starting with foundational skills in NextJS, you'll explore layout components, routing, data fetching, and dynamic rendering. You'll then integrate Strapi to manage content types and render content-rich pages like blogs and event signups. Along the way, you'll enhance your UI using Figma and Sass for efficient styling. As the course progresses, you’ll create a fully customizable blog and event platform, mastering features like reusable components, dynamic zones, and newsletter integrations. The course concludes with a step-by-step guide to deploying your app using Heroku and AWS S3. This course is ideal for freelance developers, aspiring full-stack engineers, or anyone looking to create scalable web applications. Learners should have basic knowledge of JavaScript and React. The course is best suited for intermediate-level developers.

Syllabus

Introduction

In this module, we will introduce you to the course, outlining the core technologies you'll be working with—NextJS, Strapi, and SASS. You'll learn the best approach to following the course, how to use the provided resources, and how to tailor your learning experience to your needs.

NextJS Crash Course

In this module, we will explore the fundamentals of NextJS, from setting up a project to implementing essential features like routing, layouts, and data fetching. You’ll gain hands-on experience with dynamic routing, server vs. client components, and handling 404 pages.

Developer Intro To Figma

In this module, we will introduce Figma as a design tool for developers, showing how to leverage it for structuring UI components and collaborating on design assets. You’ll learn how Figma fits into the web development workflow and how to access design files efficiently.

Initial Project Setup NextJS, Strapi, and Sass

In this module, we will establish the foundation of our project by setting up NextJS, configuring SASS for styling, and installing Strapi. We’ll also discuss why this specific stack is used, ensuring efficiency and scalability in development.

Landing Page & Experience Page with Layout Components

In this module, we will focus on building the landing and experience pages using modular components. You’ll create and style sections such as the header, footer, hero section, and info blocks, ensuring a cohesive and scalable design.

Connecting our Frontend to Strapi

In this module, we will integrate Strapi with our NextJS frontend, creating content types and fetching dynamic data. You'll learn how to process and render structured data efficiently, making content updates seamless.

Main Page of the Blog

In this module, we will develop the main page of the blog, focusing on structuring and styling key components. You’ll also implement functionality for the newsletter subscription feature, making the blog interactive and engaging.

Implement Blog on Frontend through Strapi and NextJS

In this module, we will connect the blog’s frontend with Strapi, creating and managing blog articles effectively. You’ll learn to fetch and render articles dynamically while setting up routes for individual blog posts.

Create Fully Customisable Blog Article

In this module, we will build a fully customizable blog article page, leveraging Strapi’s dynamic zones. You’ll structure, style, and render different content types dynamically, creating a highly flexible and engaging blog experience.

Events Section - Create Signup Functionality for Offered Surfcamps & Events

In this module, we will implement an events section, allowing users to sign up for surfcamps and other activities. You’ll build and connect a signup form to Strapi, enabling seamless event registration and data management.

Deployment to Heroku

In this module, we will deploy our full-stack application to Heroku, covering both the Strapi backend and NextJS frontend. You’ll learn to migrate databases, manage image uploads with AWS S3, and ensure a smooth transition from development to production.