Course: Frontend Architecture

Modern approaches to building web applications

16 online-lessons
Online
Event is over
Course: Frontend Architecture
Course: Frontend Architecture
Event is over
Event is over
Event is over

In this course, we will cover a few popular and effective ways to build web applications in 2024. We will be learning Next.js, SPAs with Micro Frontends, Progressive Web Apps (PWA), and Gatsby in practice. These technologies and approaches are key to modern web development, and we'll learn how to apply them in practice and how to solve common problems when developing using those technologies.

  • Next.js: We will look at how to create server-optimized React applications with Next.js. We will look at deploying applications on Vercel, AWS Amplify, and Azure. As a bonus, we will look at how to build SPAs with Next, and how to deploy them on AWS S3.
  • SPAs with Micro Frontends: We learn how to break a monolithic frontend into smaller, independent parts that can be developed and deployed on AWS and Azure separately and independently. We will cover the latest state management instrument, Zustand, and routing solution from Tanner Linsley, TanStack Router.
  • PWA: We will learn how to create web applications that work offline and have a User Experience close to native applications. We will look at other modern frameworks and practices outside the React ecosystem.
  • Gatsby: We'll explore how to build fast, optimized sites with Gatsby, using GraphQL to manage data. We will look at deploying such applications on AWS.

In addition to theory, we will practice by creating real web applications. We will build several projects to consolidate our knowledge and skills. This allows you to get a hands-on experience with those technologies.

This course suits beginners and experienced developers who want to update their knowledge and skills.

Mentors:
Anton Khudyakov, Frontend Engineer II at MAANGHas extensive experience in creating static website generators, business intelligence tools, machine learning models, MLOps solutions and e-commerce web applications.
Mykyta Popov, Senior Software Engineer at ALLSTARSIT,has 10+ years of experience covering startups and enterprise-level projects.

Format:

4 modules: 16 classes 2 times a week, Thursday (19:30) and Sunday (11:00).

Classes start: May 2, Thursday, 7:30 p.m.

Duration of one lesson: ~2 hours

Platform: Zoom

Who will be interested? Frontend developers with basic knowledge of JS

Language of lectures: Ukrainian. Presentations and templates are provided in English.

All materials, links to ZOOM classes and course videos will be posted on the education platform. After purchasing a ticket, you will receive access to the course at the email address specified during registration.

Who will be interested?

  • Frontend developers with knowledge of JS
  • To everyone who wants to understand the modern architecture of web-applications


Program

Chapter 1: Public-Facing Web Applications with SSR

The goal of this module is to show that Next.js is de facto becoming the standard and recommended way to build web applications in 2024. You will learn how to use Next.js to create modern applications.

Each lesson will start with code examples and a presentation on Next.js and SSR, the goal of this module is to introduce participants to the new capabilities of Next.js and the basics of SSR.

At the end, we will have practice - the teacher will write a blog in the format of live coding using the latest Next.js functional blocks (Server components, APP router, etc.).

Homework will be for the entire first module, participants will create another application using Next.js.

  • 02.05 SSR and Next.js fundamentals, ShadcnU
  • 09.05 Advanced Next.js
  • 12.05 CI/CD, Deployment to Vercel, AWS, Performance Optimization
  • 16.05 Q&A session

Chapter 2: SPA Web Applications with Micro Frontends

We will dive into Micro Frontends in this chapter, We will learn how to break a monolithic frontend into smaller, independent parts that can be developed and deployed on AWS, and Azure separately and independently.

We will demonstrate that in 2024 not all applications should be using SSR and server functionalities, and in specific cases, they can and should be created in the SPA format. In this unit, we will create an application using modern libraries and frameworks and deploy our applications using cloud providers (AWS, Azure).

Each lesson will contain code examples and presentations on Vite, Zustand, TanStack Router, ShadcnUI, Microfrontends, etc.

After that, we will move on to practice - the teacher will write a SPA application together with the course participants.

Homework will be throughout the second module, participants will create an application using the technologies presented in this Chapter.

  • 19.05 Building an SPA with React, Vite, Zustand, TanStack Router
  • 23.05 Micro Frontends
  • 26.05 CI/CD, Deployments to AWS, Azure, Vercel
  • 30.05 Q&A session

Chapter 3: PWA

In this section, you will learn about PWA web applications, their benefits, and development examples. Let's consider modern methods of developing SPA and PWA applications using Angular. Let's make a comparison and give examples of the use of frameworks outside the React ecosystem. Each will include code examples and presentations on different aspects of the PWA.

We'll start each lesson with code examples and a presentation on different aspects of PWA

At the practical session, the teacher will write a PWA application together with the participants.

Homework will be throughout the third module: participants will create an application using service workers, deploy it and have the opportunity to learn the benefits of PWA firsthand.

  • 02.06 Introduction to PWA and Web App Manifest
  • 06.06 Service Workers
  • 09.06 - PWA and hardware access
  • 13.06 Q&A session

Chapter 4: SSG (Static Site Generation)

The task of this module is to introduce participants to Gatsby and show in which cases SSG will be a good solution.

Each lesson contains code examples and presentations on SSG, Gatsby.

After that, we will move on to practice: the teacher will write an application using Gatsby, SSG together with the course participants

Homework: create and deploy an application using Gatsby, SSG.

  • 16.06 Building a Static Website with Gatsby
  • 20.06 SEO and Performance Optimization
  • 22.06 Advanced Gatsby, CI/CD, Deployment for SSG
  • 27.06 Q&A session


Mentor: Anton Khudyakov

— Frontend Engineer II at MAANG

— Lecturer, Mentor, Teacher at Lectrum, FwDays

— Mentor at Tech Ground Hackathons, two times mentor of the winning projects on the hackathon

— Proud Ukrainian 🇺🇦

— Has 6+ years of experience building static website generators, business intelligence tools, machine learning models, MLOps solutions and e-commerce web applications.

Mentor: Mykyta Popov

— Senior Software Engineer at ALLSTARSIT, with a decade of versatile experience in software development, ranging from startups to enterprise-level projects.

— Generative AI advocate, equipped with expertise in prompts generation.

—Mentor at Tech Ground Hackathons, coupled with active participation in hackathon events.

—Degree in Computer Science and Electronic Engineering, with publications focused on data compression and processing.

Sign in
Or by mail
Sign in
Or by mail
Register with email
Register with email
Forgot password?