The Freelance Stack: Real project with NextJS 13 and Strapi

Focused View

Niklas Fischer

10:52:10

44 View

1 - Introduction

1 - Course Intro.mp4

02:34

2 - What is the Freelance Stack.mp4

06:37

3 - Figma Design File.txt

3 - How to go through this course.mp4

01:47

3 - sass.zip

4 - Materials to go through the course.html

4 - assets.zip

2 - NextJS Crash Course

5 - Why are we using NextJS.mp4

06:12

6 - Setting up a NextJS Project.mp4

03:52

7 - Simple Routing in NextJS.mp4

03:54

8 - Layouting in NextJS.mp4

05:26

9 - Linking from Page to Page.mp4

02:56

10 - Server and Client Components Overview.mp4

07:56

11 - Data Fetching.mp4

06:07

12 - Dynamic Routing.mp4

12:59

13 - Not Found Pages.mp4

04:55

3 - Developer Intro To Figma

4 - Initial Project Setup NextJS Strapi and Sass

15 - NextJS Base Setup.mp4

04:35

16 - Reminder on styling.html

16 - sass.zip

17 - Styling Video Sass Setup.mp4

03:44

18 - Figma Design File.txt

18 - Google Font Link to include when importing into scss.txt

18 - Styling Video Variables and Typography.mp4

13:17

19 - Overview of our setup and why we set it up this way.mp4

03:59

20 - Strapi Installation and Overview.mp4

10:53

5 - Landing Page Experience Page with Layout Components

21 - Header JSX Structure.mp4

17:24

22 - Styling Header.mp4

08:43

23 - Footer JSX Structure.mp4

10:18

24 - Filter to give SVGs any colour you want.html

25 - Styling Footer.mp4

08:12

26 - Hero Section JSX Structure.mp4

16:27

27 - Styling Hero Section.mp4

15:26

28 - InfoBlocks JSX Structure.mp4

09:26

29 - Styling InfoBlocks.mp4

05:53

30 - Experience Page Reuse created Hero Section and Infoblocks.mp4

08:47

31 - Styling Adjust Header colour per path.mp4

01:26

6 - Connecting our Frontend to Strapi

32 - Creating InfoBlock Content Type on Strapi.mp4

14:57

33 - Use Single Content Type in Strapi to create InfoBlocks per page.mp4

17:33

34 - Fetch InfoBlock Data on Strapi.mp4

08:27

35 - Fetch Data from Strapi and process it.mp4

16:57

36 - Render InfoBlocks on page.mp4

09:20

37 - Create Button from InfoBlock Strapi Data on page.mp4

07:13

38 - Render InfoBlocks on Experience page.mp4

04:45

7 - Main Page of the Blog

39 - Highlight Article JSX Structure.mp4

08:08

40 - Styling Highlight Article.mp4

06:42

41 - Subscribe To Newsletter JSX Structure.mp4

04:34

42 - Styling Subscribe to Newsletter Component.mp4

09:58

43 - Functionality Subscribe to Newsletter Component.mp4

06:15

44 - Featured Items Component JSX Structure.mp4

11:36

45 - Styling Featured Items Component.mp4

12:19

8 - Implement Blog on frontend through Strapi and NextJS

46 - Create blog article type on Strapi.mp4

09:12

47 - Input blog article data on Strapi.mp4

12:30

48 - Render articles from Strapi data on main page of the blog.mp4

13:57

49 - Create dynamic routes for all blog articles.mp4

08:26

9 - Create fully customisable blog article

50 - Create dynamic zone in Strapi for customisable blog content.mp4

14:06

51 - Creating data for highlight article.mp4

08:29

52 - Article Hero Section JSX.mp4

05:45

53 - Styling Article Hero Section.mp4

05:26

54 - Article Intro Component JSX.mp4

08:40

55 - Styling Article Intro Component.mp4

05:29

56 - Generic Article Component to render different component depending on strapi data.mp4

09:14

57 - Article Headline JSX.mp4

03:15

58 - Styling Article Headline.mp4

01:00

59 - Text with Image Component JSX.mp4

07:34

60 - Styling Text with Image Component.mp4

05:48

61 - Article Paragraph JSX.mp4

02:23

62 - Styling Article Paragraph.mp4

01:06

63 - Image Component JSX.mp4

03:47

64 - Styling Image Component.mp4

02:20

65 - Other Articles Section on Individual Blog Page.mp4

03:17

66 - Blog Section Homepage JSX.mp4

13:11

67 - Styling Blog Section Homepage.mp4

08:52

68 - Fix Article Item for Featured Items on Homepage.mp4

01:18

10 - Events Section Create Signup Functionality for offered Surfcamps Events

69 - Post Requests in Strapi with the Newsletter Signup.mp4

07:07

70 - Hook up Frontend to Signup Component in Strapi.mp4

10:16

71 - Strapi Participant and Event Content Type.mp4

07:21

72 - Feeding Data into Strapi for all events.mp4

06:56

72 - example-events-data.zip

73 - Signup Form JSX.mp4

15:50

74 - Styling Signup Form.mp4

08:56

75 - Signup Form Functionality Sending data to Strapi from main events page.mp4

18:50

76 - Pregenerate individual event pages.mp4

14:12

77 - Event Data Processing.mp4

04:47

78 - Render individual event page based off strapi data.mp4

09:43

79 - Sign up for specific event.mp4

08:56

80 - Fetch and filter upcoming events with a string query from Strapi.mp4

15:26

81 - Adjust featured items component for individual event page.mp4

11:26

82 - Styling FeaturedItem Component adjusted for event.mp4

03:45

83 - Fetch more events on individual event page THANK YOU.mp4

11:05

Description

From Design to Handover: Building Real-World Projects for Freelancers

What You'll Learn?

Learn NextJS 13 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 is this for?

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

What You Need to Know?

JavaScript (you should be aware of the basics of JavaScript, array methods, data types etc.)

A basic knowledge of React

More details

Description
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
From Design to Code: 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 10 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.
Who this course is for:
Anybody with a bit of React experience that wants to go freelance.

User Reviews

Rating

average 0

Total votes0

Focused display

Hey there, I'm Niklas. I run my own freelancing agency focused on web development and data science. Over the years, I've dealt with real-world coding challenges and client needs, and I've learned a ton from it. But what I really love doing is teaching. I've taught hundreds how to code, aiming to make it practical and applicable for everyone.Now, I’m pouring all that hands-on experience into my courses. I want to ensure that when you learn from me, it's real, it's relevant, and you can put it to use immediately.If you're up for learning from my experiences and mistakes, let's get to it!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.