React Avançado is a landing page template built with Next.js and TypeScript that promotes the Udemy course 'React Avançado' by instructor Willian Justen. This open-source project, available on GitHub, is a complete marketing page for a paid course, designed to be deployed to Netlify and to demonstrate a modern React stack.
What is React Avançado?
React Avançado is a course-promotion landing page developed during the Udemy course of the same name. It takes course information managed through a Strapi headless CMS and renders it as a server-side rendered Next.js page, with styled-components handling all visual styling. The project includes a GraphQL layer for data fetching, Jest for unit testing, and Storybook for component documentation. The repository is authored by Caio Augustoo and is publicly available on GitHub.
Key Features
- Next.js with Server Side Rendering — The site uses Next.js SSR to pre-render course content for faster initial loads and better SEO.
- TypeScript — The entire codebase is written in TypeScript, providing static typing across components and data layers.
- Strapi CMS integration — Content such as course details and landing sections can be managed through the Strapi headless CMS.
- GraphQL data layer — Data is queried from Strapi using GraphQL, separating content from presentation.
- Styled Components — Styling is implemented with CSS-in-JS via styled-components, keeping styles colocated with components.
- Jest testing — Unit tests are configured with Jest to verify component behavior.
- Storybook — The project includes Storybook for developing and viewing UI components in isolation.
- Netlify deployment ready — The README points to a live demo hosted at https://react-avancadoo.netlify.app, and installation is set up for easy deployment.
Who is it for?
- Developers taking the React Avançado course — They can follow along with the source code to learn how a real Next.js, Strapi, and GraphQL project is structured.
- Course instructors — They can use this as a template to build a landing page for their own Udemy or paid courses.
- React developers — They can study a practical example of SSR, TypeScript, styled-components, and GraphQL working together in one project.
Use Cases
- Course promotion: Set up a professional landing page for a paid course, with content editable through Strapi and statically generated with Next.js.
- Learning reference: Explore the repository to see how tests (Jest), component docs (Storybook), and a CMS are integrated into a Next.js project.
- Starter for marketing pages: Fork the repo and adapt the Strapi schema and components to build a similar landing page for a different product.
How does it work?
The README provides straightforward local setup: clone the repository, run yarn install to install dependencies, then yarn start to launch the development server at http://localhost:3000. The project assumes a Strapi backend is available for GraphQL queries, although the landing page can be viewed with sample data in development.
FAQ
Is React Avançado free?
The repository is publicly available on GitHub and can be cloned without payment, though the course itself is a paid Udemy product. No license is specified in the README.
What do I need to run React Avançado?
You need Node.js, Yarn, and an optional Strapi backend. The README only requires cloning the repo and running yarn install and yarn start.
Can I deploy React Avançado to Netlify?
Yes. The project includes a working demo on Netlify, and since it is a Next.js app, it can be deployed to Netlify or any platform that supports Node.js builds.
Does React Avançado use GraphQL?
Yes, GraphQL is used to fetch content from the Strapi CMS, separating data from the React components.
