Course: Modern Frontend
Actual approaches to building web applications
16 practical classes
Mentors:
Anton Khudyakov, Software Development Engineer in one of the MAANG companies.
Mykyta Popov, Senior Software Engineer at ALLSTARSIT.
Buy tickets for the next conference JavaScript fwdays’25 conference!
You will get hands-on experience with Next.js, Micro Frontends, Progressive Web Apps (PWA), reactive programming and IaC. These technologies and approaches are now key. You will learn to apply them and solve the most common problems that arise during development.
- SSR and Next.js. You will look at how to build server-optimized React applications using Next.js. We will also look at deploying applications on Vercel, AWS and Azure. As a bonus, we'll cover how to build SPAs (single page applications) with Next, the pros and cons of this approach, and how to deploy them to AWS S3 with AWS Cloudfront.
- Micro Frontends. You'll learn how to break a monolithic frontend into smaller, independent pieces that can be developed and deployed separately on AWS and Azure. Also in this section, we will look at the state-of-the-art state management tool Zustand, as well as TanStack Router, a routing solution from Tanner Linsley.
- PWA. You will understand how to create web applications that can work offline and have a User Experience close to native applications. Consider the means of deployment and publication of applications to stores.
- Reactive programming and IaC. The objective of this module is to introduce participants to the concept of hydration and reactive programming as a means of working with dynamic websites. We'll look at the differences between server-side rendering, static site generators, and island architecture, and work with real-time data streams for event-driven applications. We will pay special attention to the automation of infrastructure settings using Infrastructure as Code (IaC) approaches.
In addition to theory, you will practice creating real web applications. To consolidate your skills, you will build several projects that will remain in your portfolio.
After completing this course, you will be able to:
- understand modern tools for building web applications
- choose the right tools, knowing their strengths and weaknesses
This course is suitable for both beginners and experienced developers who want to improve their knowledge and skills.
Mentors:
Anton Khudyakov, Frontend Engineer II at one of the MAANG companies. He has 6+ years of experience in creating web applications for e-commerce, business analytics tools, static website generators, machine learning models, MLOps solutions.Mykyta Popov, Senior Software Engineer at ALLSTARSIT. Has 10+ years of experience covering startups and enterprise-level projects. Participated in the migration of large SAAS solutions using cloud technologies and modern web development tools.
Format:
4 modules: 16 classes 2 times a week, Thursday (19:30) and Sunday (11:00).
Duration of one lesson: ~2 hours
Platform: Zoom
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
In this course, you’ll learn how to create high-performance, server-optimized React applications using Next.js. We’ll cover deployment strategies on leading platforms like Vercel, AWS Amplify, and Azure. As a bonus, you'll discover how to build Single Page Applications (SPAs) with Next.js and deploy them seamlessly on AWS S3.
Together, we'll build a full-stack blog application from scratch, utilizing Server Components, Supabase, and various AWS services.
For hands-on practice, you'll create your own full-stack application, applying the same cutting-edge technologies, and reinforcing your skills through practical experience.- 12.12, 19:30. SSR and Next.js fundamentals, ShadcnU
- 15.12, 11:00 Advanced Next.js
- 19.12, 19:30 CI/CD, Deployment to Vercel, AWS
- 22.12, 11:00 Q&A session
Chapter 2: Master Micro Frontends: Build Scalable, Independent Web Solutions
In this course, you’ll discover how to break down monolithic frontends into smaller, independent micro frontends that can be developed and deployed individually on platforms like AWS and Azure. You’ll also get hands-on with cutting-edge tools like Zustand for state management and TanStack Router by Tanner Linsley for advanced routing.
As part of the journey, we’ll build an exciting cinema website from scratch using micro frontends, showcasing the full power of this architecture.
By the end of the course, you’ll create your own end-to-end solution with micro frontends, applying what you’ve learned to build scalable, flexible web applications.
- 29.12, 11:00 Building SPAs with React, Vite, Zustand, TanStack Router
- 05.01, 11:00 "Merging" those applications with the Micro Frontends approach
- 09.01, 19:30 CI/CD, Deployments to AWS, Azure, Vercel
- 12.01, 11:00 Q&A session
Chapter 3: PWA: Offline Mode Support, Caching, Push Notifications, and App Store Publishing.
We will learn how to create web applications that work offline and provide a user experience close to native apps. We'll explore the main tools for developing progressive web applications, strategies for caching static and real-time data, and modern PWA capabilities (such as push notifications and background updates). We will create a web application outside the React ecosystem that can be published to app stores or deployed and installed from the browser.
- 16.01, 19:30 Introduction to PWA and Web App Manifest
- 19.01, 11:00 Service Workers
- 23.01, 18:30 PWA and hardware access
- 26.01, 11:00 Q&A session
Chapter 4: Master Hydration and Reactive Programming for Dynamic Web Experiences.
In this module, you’ll dive deep into the world of hydration and reactive programming, unlocking the power of dynamic websites. We’ll explore the key differences between server-side rendering (SSR), static site generation (SSG), and the cutting-edge island architecture, giving you a solid foundation to choose the right approach for any project.
We’ll go hands-on with real-time data streams and learn how to build responsive, event-driven applications using reactive programming. Plus, you'll gain essential skills in automating infrastructure setup through Infrastructure as Code (IaC), streamlining your development process.
As part of the course, we’ll develop a real-time chat application together, showcasing reactive programming and live data handling. Afterward, you’ll create your own event-driven solution, applying these techniques to build a dynamic, end-to-end web application from scratch.
- 30.01, 19:30 Hydration in modern frontend applications
- 02.02, 11:00 Reactive programming, introduction to streams in event-driven applications
- 06.02, 19:30 Beautiful Infrastructure as Code with AWS CDK
- 09.02, 11:00 Q&A session
Mentor: Anton Khudyakov
— Software Development Engineer 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.