Astro - Build A Full-Featured Modern Ecommerce App In Astro

Master Astro JS by Harnessing Astro's Zero-JavaScript Approach for Efficient, Interactive, and Modern Development

What you'll learn

Build Complete Web Experiences with Zero Default JavaScript Overhead

Learn server-side rendering, image optimization, and more in Astro

Deploy easily everywhere From Serverless to Edge Networks with Astro

Implement Island architecture for only rehydrating dynamic components in your apps

Use other framework such as React, Svelte, Vue, Solid, and more in Astro

Requirements

Basic knowledge of JavaScript

Basic knowledge of code editors and terminals

Familiarity with HTML and CSS will help, but is not mandatory

Familiarity with component- and route-based frameworks will help, but is not mandatory

Description

Welcome to our AstroJS course!Leveraging JavaScript offers developers an excellent experience, enabling interactivity and leveraging cutting-edge tooling. Yet, needless JavaScript compromises speed, squanders data, and impacts user experience. Astro strikes a harmonious equilibrium, facilitating modern tooling within any chosen framework. It defaults to a zero-JavaScript approach, supplemented by an opt-in mechanism for selectively integrating dynamic features as needed.The standout feature of Astro is Partial Hydration, allowing partial dynamism. Yet, this is just one of Astro's benefits.Throughout this course, you'll grasp Astro's core concepts by crafting a complete Ecommerce site. You'll start learning to build a modern web app via Astro by creating a marketing homepage for the website. Ecommerce components and features, like fetching and displaying product lists, will be integrated via a backend API. Plus, a user-friendly shopping cart will be developed.Then you will be constructing a blog with an accompanying RSS feed, server-side Newsletter sign-up form, and state-sharing using ReactJS and Solid components within Astro.You will master the art of API data fetching within Astro components, and experience Hybrid rendering by crafting sections to dynamically operate without mandatory JavaScript.At the end of this course you will be ready to start building any kind of website and web application you want via Astro in no time.So let's unlock Astro's full potential together.

Overview

Section 1: Basics

Lecture 1 What is Astro

Lecture 2 Key Benefits of Astro

Lecture 3 Course Requirements

Section 2: Setting-up Astro Project

Lecture 4 Initiating a Project

Lecture 5 Astro Project Structure

Section 3: Adding Basic Features

Lecture 6 Adding a Page to the Website

Lecture 7 Adding Layouts

Lecture 8 Combining Layouts with Markdowns

Lecture 9 Global vs Scoped Styles

Lecture 10 Adding Navigation

Lecture 11 Building the Main Page

Lecture 12 Nested Layouts

Lecture 13 Not-found Pages for 404 Routes

Section 4: Adding E-commerce Features

Lecture 14 Products Lists

Lecture 15 Components in Astro

Lecture 16 Sharing States Between Frameworks

Lecture 17 Building a React Component Part1

Lecture 18 Building a React Component Part2

Lecture 19 Building add to cart component

Lecture 20 Passing Props to Astro component

Section 5: Adding Blog

Lecture 21 Content Collections

Lecture 22 Adding Blog Page

Lecture 23 Dynamic Pages

Section 6: Adding RSS Feed

Lecture 24 RSS Configuration

Lecture 25 Creating End-points

Section 7: Server Side Rendering

Lecture 26 Adding a Server-side Rendering Page

Lecture 27 Form Submission

Lecture 28 Merging a SSR Component with a Static Component

Anyone looking to learn building apps in Astro and master its key concepts,Frontend developers looking to build enhanced applications