Course: Frontend Architecture
Modern approaches to building web applications
16 online-lessons
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.