# ViraStack Academy: Free Guides for Frontend Developers > Free frontend guides, from the fundamentals to AI, distilled from official documentation. Shows you what to learn and in what order. Source: https://omergulcicek.com/en/blog/virastack-academy-free-frontend-guides AI agents made the work faster, but they also cut the time we spend writing and reading code ourselves. The fundamentals fade, and when you want to go back and learn them, most of the time goes into deciding which source to trust. That is why I built ViraStack Academy: a free roadmap for anyone who wants to learn frontend with React or refresh what they know. It shows you what to learn and in what order, and points you to the right source for every topic. ## What it is Academy is not a video course. It is a curriculum of written lessons, available in English and Turkish. Today it has 141 lessons and 18 projects across 16 guides, grouped into six stages: - **Before You Start:** Web Fundamentals - **Building with React:** TypeScript, React, Next.js - **State and Data:** TanStack Query, Zustand, Forms - **Testing, Quality and Shipping:** Vitest, Playwright, Performance and Accessibility, Getting Ready for Production - **Advanced:** Architecture and Scalability, Software Principles, Auth and Security, Frontend with AI - **Team and Industry:** Industry Glossary Web Fundamentals is a set of short refreshers. It does not teach HTML, CSS or Git from scratch; it reminds you of them. The weight is in the guides that follow, on the things a real project throws at you: the difference between `staleTime` and `gcTime` in **TanStack Query**, caching and rendering in **Next.js**, running **Playwright** tests in CI. If you are just starting out, go in order. If you have been doing this for years, jump straight to the lesson you forgot or never got to. ## How a lesson works Every lesson follows the same shape. The topic comes first, with short code examples, then a "Try it yourself" section with a few small experiments. In the caching lesson, for example, you open a list with `staleTime: 0` and watch in Devtools which states the query moves through. Then you repeat it with 60 seconds and see the difference in the Network tab. Each lesson ends with a **Sources** list, and the claims in the text link to it through footnotes. Next to each source you can see whether it is documentation or an article, and for an article, its date. When you want to go deeper, you already know where to go next. ## Choosing sources The curriculum links to more than 1,600 sources, and they come in three kinds: official documentation, well-known engineers in the field and independent organizations. The ones I lean on most are react.dev, nextjs.org, MDN and the TanStack docs. Among authors, [TkDodo](https://tkdodo.eu), [Kent C. Dodds](https://kentcdodds.com), [Martin Fowler](https://martinfowler.com) and [Matt Pocock](https://www.mattpocock.com) come up most often. There are no paid courses and no affiliate links. Every lesson shows the date it was last checked. On the AI side, what is true can go out of date in a few months, so that date matters. ## Projects Twelve of the 16 guides end with a project, 18 in all. Each one brings the guide's lessons together in a single app. In the React guide you build a product page with Suspense, `useOptimistic` and ``. In the AI guide you write a shopping assistant that calls tools, asks the user for approval and stands up to prompt injection. Working versions of every project live in the [examples](https://github.com/virastack/academy/tree/main/examples) folder on GitHub, so you can compare your code when you get stuck. ## Contributing I can't promise that all 141 lessons are free of mistakes. If you spot something missing or wrong, open an issue on GitHub or send a pull request. An issue is also the way to suggest a new source or topic. Academy is free and ad-free: [virastack.com/academy](https://virastack.com/academy). All of the content is on [GitHub](https://github.com/virastack/academy). I wrote about the rest of ViraStack in [Building a Frontend Ecosystem](https://omergulcicek.com/blog/building-a-frontend-ecosystem).