The Freelance Stack: Real project with NextJS and Strapi

The Freelance Stack: Real project with NextJS and Strapi, available at $94.99, has an average rating of 4.64, with 91 lectures, based on 89 reviews, and has 678 subscribers.

You will learn about Learn NextJS and Strapi with a real world project Understand how to deliver websites to people who can't code (aka your clients!) Create beautiful styling with simple CSS and no additional framework! Integrate complex datastructures from Strapi API with any kind of Frontend Combine the easy-to-use advantage of website builders with the full flexibility of coding a website from scratch Logic behind Server and Client Side Components This course is ideal for individuals who are Anybody with a bit of React experience that wants to go freelance. It is particularly useful for Anybody with a bit of React experience that wants to go freelance.

Enroll now: The Freelance Stack: Real project with NextJS and Strapi

Summary

Title: The Freelance Stack: Real project with NextJS and Strapi

Price: $94.99

Average Rating: 4.64

Number of Lectures: 91

Number of Published Lectures: 91

Number of Curriculum Items: 91

Number of Published Curriculum Objects: 91

Original Price: $99.99

Quality Status: approved

Status: Live

What You Will Learn

Learn NextJS and Strapi with a real world project
Understand how to deliver websites to people who can't code (aka your clients!)
Create beautiful styling with simple CSS and no additional framework!
Integrate complex datastructures from Strapi API with any kind of Frontend
Combine the easy-to-use advantage of website builders with the full flexibility of coding a website from scratch
Logic behind Server and Client Side Components

Who Should Attend

Anybody with a bit of React experience that wants to go freelance.

Target Audiences

Anybody with a bit of React experience that wants to go freelance.

Dive into the world of freelancing with hands-on, project-based learning that bridges the gap between theory and real-world application. Whether you’re an aspiring freelancer or a seasoned developer eager to expand your toolkit, this course is tailored for you.

Why Choose This Course?

Real-World Project Focus: Avoid generic examples. Build a fully functional website for a surfcamp with an integrated, customizable blog and sign-up forms.
Comprehensive Stack: Delve deep into the synergy of NextJS13 and Strapi, the tried-and-tested combo for flexible design and seamless developer experience.
Client-Centric Development: Learn not just to code, but to deliver. Equip yourself to offer clients the ability to directly update website content, rivaling the convenience of platforms like WordPress/Squarespace/Wix using a Headless CMS
From Design to Deployment: Transform Figma designs into live sites. Harness the power of a seamless design-to-development workflow.

What’s Inside?

Navigate through an engaging and intuitive curriculum with over 12 hours of learning content. Each section is thoughtfully designed to introduce new concepts at a comfortable pace, ensuring you grasp every element without feeling overwhelmed. The course’s structure is its core strength, allowing learners to continually build on their knowledge base.

Your Journey and Takeaway

This isn’t just a technical course. It’s a roadmap to becoming a great freelance developer. By its end, you won’t just have learned new technology, you’ll understand how to deliver applications to your clients needs.

You’ll understand the power of the fusion of a headless CMS with a flexible frontend lets you provide a package where clients can change content at their whim.
Your offering will stand out, bridging the gap between custom-built platforms and user-friendly CMS like WordPress.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course Intro

Lecture 2: What is the Freelance Stack?

Lecture 3: How to go through this course

Lecture 4: Materials to go through the course

Chapter 2: NextJS Crash Course

Lecture 1: Why are we using NextJS?

Lecture 2: Setting up a NextJS Project

Lecture 3: Simple Routing in NextJS

Lecture 4: Layouting in NextJS

Lecture 5: Linking from Page to Page

Lecture 6: Server and Client Components Overview

Lecture 7: Data Fetching

Lecture 8: Dynamic Routing

Lecture 9: Not Found Pages

Chapter 3: Developer Intro To Figma

Lecture 1: What is Figma and how to use it

Chapter 4: Initial Project Setup NextJS, Strapi and Sass

Lecture 1: NextJS Base Setup

Lecture 2: Reminder on styling

Lecture 3: Styling Video: Sass Setup

Lecture 4: Styling Video: Variables and Typography

Lecture 5: Overview of our setup (and why we set it up this way)

Lecture 6: Strapi Installation and Overview

Chapter 5: Landing Page & Experience Page with Layout Components

Lecture 1: Header JSX Structure

Lecture 2: Styling: Header

Lecture 3: Footer JSX Structure

Lecture 4: Filter to give SVGs any colour you want

Lecture 5: Styling: Footer

Lecture 6: Hero Section JSX Structure

Lecture 7: Styling: Hero Section

Lecture 8: InfoBlocks JSX Structure

Lecture 9: Styling: InfoBlocks

Lecture 10: Experience Page: Reuse created Hero Section and Infoblocks

Lecture 11: Styling: Adjust Header colour per path

Chapter 6: Connecting our Frontend to Strapi

Lecture 1: Creating InfoBlock Content Type on Strapi

Lecture 2: Use Single Content Type in Strapi to create InfoBlocks per page

Lecture 3: Fetch InfoBlock Data on Strapi

Lecture 4: Fetch Data from Strapi and process it

Lecture 5: Render InfoBlocks on page

Lecture 6: Create Button from InfoBlock Strapi Data on page

Lecture 7: Render InfoBlocks on Experience page

Chapter 7: Main Page of the Blog

Lecture 1: Highlight Article JSX Structure

Lecture 2: Styling: Highlight Article

Lecture 3: Subscribe To Newsletter JSX Structure

Lecture 4: Styling: Subscribe to Newsletter Component

Lecture 5: Functionality Subscribe to Newsletter Component

Lecture 6: Featured Items Component JSX Structure

Lecture 7: Styling Featured Items Component

Chapter 8: Implement Blog on frontend through Strapi and NextJS

Lecture 1: Create blog article type on Strapi

Lecture 2: Input blog article data on Strapi

Lecture 3: Render articles from Strapi data on main page of the blog

Lecture 4: Create dynamic routes for all blog articles

Chapter 9: Create fully customisable blog article

Lecture 1: Create dynamic zone in Strapi for customisable blog content

Lecture 2: Creating data for highlight article

Lecture 3: Article Hero Section JSX

Lecture 4: Styling: Article Hero Section

Lecture 5: Article Intro Component JSX

Lecture 6: Styling: Article Intro Component

Lecture 7: Generic Article Component to render different component depending on strapi data

Lecture 8: Article Headline JSX

Lecture 9: Styling: Article Headline

Lecture 10: Text with Image Component JSX

Lecture 11: Styling: Text with Image Component

Lecture 12: Article Paragraph JSX

Lecture 13: Styling: Article Paragraph

Lecture 14: Image Component JSX

Lecture 15: Styling: Image Component

Lecture 16: Other Articles Section on Individual Blog Page

Lecture 17: Blog Section Homepage JSX

Lecture 18: Styling: Blog Section Homepage

Lecture 19: Fix Article Item for Featured Items on Homepage

Chapter 10: Events Section – Create Signup Functionality for offered Surfcamps & Events

Lecture 1: Post Requests in Strapi with the Newsletter Signup

Lecture 2: Hook up Frontend to Signup Component in Strapi

Lecture 3: Strapi Participant and Event Content Type

Lecture 4: Feeding Data into Strapi for all events

Lecture 5: Signup Form JSX

Lecture 6: Styling: Signup Form

Lecture 7: Signup Form Functionality: Sending data to Strapi from main events page

Lecture 8: Pregenerate individual event pages

Lecture 9: Event Data Processing

Lecture 10: Render individual event page based off strapi data

Lecture 11: Sign up for specific event

Lecture 12: Fetch and filter upcoming events with a string query from Strapi

Lecture 13: Adjust featured items component for individual event page

Lecture 14: Styling: FeaturedItem Component adjusted for event

Lecture 15: Fetch more events on individual event page & THANK YOU

Chapter 11: Deployment to Heroku

Lecture 1: Note on Deployment

Lecture 2: Deployment Overview

Lecture 3: Deploy Strapi Server to Heroku

Lecture 4: Difference between Production Strapi and Local Development

Lecture 5: Migrate local database from SQLite to Postgres to the production database

Lecture 6: Handle Image Uploads in Production with AWS S3

Instructors

Niklas Fischer
Freelance Web Developer & Data Scientist

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 5 votes
4 stars: 22 votes
5 stars: 62 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu