Lazar will show you how to build well-designed user interfaces without spending a lot of time (if even) styling every component and element with Chakra UI.

Lazar Nikolov

Build a Modern User Interface with Chakra UI

Lazar Nikolov Landing Page

 Courses from Lazar Nikolov

Astro is a flexible web framework that allows you to build fast websites to suit your needs.

By default, Astro will build your site using Static Site Generation (SSG). This means the data in your site is loaded at build time so that the end-user gets served static pages that load quickly.

While Astro defaults this way, it also has Server-Side Rendering (SSR) that you can enable if you have more serverful needs in your application.

Along similar lines, Astro utilizes HTML and the browser as a default but when you need more flexibility you can opt into an Astro Island. Islands use React, Vue, Angular, or any frontend JavaScript framework you are used to enhance the user experience in your site.

astro

Og images are important for any blog or website. They are the share image that is shown when you include a url to your site on social media.

Astro makes it easy to include og images within its SEO package but making these images dynamic takes a little more set up.

In this lesson we'll set up an Astro API route returns a link to a dynamic image utilizing `satori` and `@resvg/resvg-js` to do so.

The was we set it up, we'll create different templates that the API endpoint will accept and each template can render different end points so you could have a default template, one for your blog posts, and possibly another for your about page.

During this process, you'll learn how to pass data from the client to the server through URL Search Params which will power the dynamic portion of the image generation

Implement Dynamic OG Image Generation with Astro API Routes and Satori

Now that we have our database set up, we need to use it!

On our blog post page, we have a likes button waiting for us to implement the likes feature. On page load, we'll make a fetch call to a `/api/likes/[slug].ts` GET end point to return the number of likes for the page. 

Similarly, when someone clicks the like button we want to send a POST request to that same endpoint.

On the server side we will set up `GET` and `POST` handlers to implement this functionality. In those functions we'll use Drizzle to return the likes for that blog post and in the case of a `POST` we'll create a record if it doesn't exist or increment a like if it does and return.

Astro API endpoints utilize browser `Response` API so you'll get a chance to handle returning different status's based on the data present.

Create Astro API Endpoints to Get and Update Database Records using Drizzle ORM

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Drizzle ORM is a library that allows us to connect, define, and interact with any kind of database.

To set it up, we will need to install its packages and then instantiate it in its own file. 

We will just need a single table that will keep track of the article slug and the number of likes for that article. We can define this shape in `src/db/schema.ts` to create a likes table.

Then, we will define an npm script in `package.json` that will generate the migration files for us, which we will apply when we first use the db instance after deployment. We'll also create a script to run the Drizzle studio app that will be useful in the future.

Drizzle will also have its own config file at the root of the project in which we will define the schema, the migrations location, the driver, etc. To prepare it for production, we will need to create a volume in fly.io and mount it to our app. 

This way when our blog gets deployed, production will reference the volume in fly.io and development will reference a `local.db` file.

Implement Drizzle ORM for Development and Deploy to a Fly.io Volume

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

Now that we are on Fly.io we'll want to replicate the functionality that Vercel was automatically doing for us by creating and configuring a GitHub Action to deploy our site whenever new commits hit the main branch.

Luckily for us there are a number of pre-defined GitHub actions that we can utilize like `actions/checkout@v3`, `actions/setup-node@v3`, and `superfly/flyctl-actions/setup-flyctl@master`. You'll notice that the first two actions are maintained by GitHub where the last is maintained by Fly.io. 

During this process you will also need to generate a token to verify your deployment to Fly.io and store that in the repository Action secrets.

Create a GitHub Action Configuration to Automatic Deploy an Astro Blog

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

By default Astro is building our site as statically generated (SSG). Because we want to add some runtime features to our blog and interface with a database in the future we need to convert it to be server-side rendered (SSR). 

Astro has integrations for this, because we know we want to deploy to Fly.io via docker we'll use the Node.js integration and set the output to 'hybrid'. Hybrid, as opposed to 'server', will still statically generate the pages of our blog that are static but give us the option of SSR when we need it.

In this lesson we'll refactor our build to using docker and deploy to Fly.io

Dockerize a Server-side Rendered (SSR) Astro Blog and Deploy to Fly.io

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

To persist data for our like button feature we will need to run a server. Fly.io is a great service that has a free tier that we can use to accomplish just that. 

We will sign up and instantiate a Fly.io project in this lesson.

Create a fly.io Account and Prepare a Project for Deployment

One of the beauties of Astro is that you don't need to use a JavaScript UI library. Astro lets you us plain JavaScript when you want to. 

It's a good idea to get into the habit of starting with vanilla JS when you have a simple use-case like adding a like button. This will mean less JavaScript on the page for your user than if you were to implement this in React. 

We'll refactor our React like button and turn it into vanilla JS with the result for the user. Another added benefit of this approach is you'll get more familiar with the native browser API which will pay dividends for you in the future.

Refactor a React Astro Island to Vanilla JS to Ship Less JavaScript

Everything up to this point Astro builds statically which means there is no JavaScript loaded on any of our pages. It's all loaded during build time and served as static files on the web

When we do want to add some interactivity into our site we can use Astro Islands to leverage JavaScript on our pages.

Astro islands are interactive components that Astro treats differently than the rest. Instead of just executing them during build time and saving the output, Astro will also hydrate the components at a specific point and ship the JavaScript needed for the component to be interactive. 

To use a UI framework, we need to add its integration, so we did `npx astro add react` to add the react integration.

Then we will create an ordinary react component, just as we would in a react page, and import it and place it in a page. To mark that component as an island, we use a `client` directive. The client load directive hydrates the component during the initial page load.

The `client` directive has several different loading strategies you can use based on your usecase:

- `client:load`
- `client:idle`
- `client:visible`
- `client:media`
- `client:only`



Add Interactive React Components to a Static Astro Page with Astro Islands

Congratulations! You now know how to build static sites with Astro. You have everything you need to be productive and build projects all over the internet. 

The next section we are going to get into advanced features that you can build with Astro. Depending on your use-case, you might not need some of the features but I wanted to put these together for you so you know what exists and how to approach these features with Astro. 

We'll be learning how to:
- inject interactivity into a static site with Astro Island Architecture
- Dockerize our site
- using GitHub Actions to build our custom site
- connect to a database with DrizzleORM
- dynamically generate og-images based on the page you are on

Milestone Recap: Build a Full Stack Blog with Astro

Because our site is pretty standard with no big features that require a database, we'll be deploying to Vercel. Vercel makes it easy to pull in the code from GitHub and has an Astro framework preset so we can deploy with one click.

Deploy a Static Astro Site on Vercel

RSS feeds are a way for others to consume your content in their own feed without having to go to your website every time you publish a piece. 

Astro gives you a package `@astrojs/rss` that helps you create such a feed. On the Astro side, this will be an API route which we haven't touched on yet in this course but just know this is a route that others can hit to give them data, in this case a feed of all your posts.

Here we'll export a GET function that will return an RSS feed. RSS feeds require a certain shape to their data which is what we will provide the function. We'll give it a title, description, site, and items.

The items we'll grab from a call to `getCollection` and each will have a title, description, publication date, link, and content. For the content, we are rendering the full post as html. To do this safely we will need to packages: `markdown-it`, and `sanitize-html`. `markdown-it` will take our markdown and produce html and `sanitize-html` will strip out any unnecessary HTML.



Generate an RSS Feed for an Astro Blog with @astrojs/rss

Astro provides a sitemap integration to make it easy for you to set up your websites sitemap. 

Sitemaps are important for allowing search engines to efficiently crawl and index the pages of your website. 

To add the sitemap integration you just need to run `npx astro add sitemap` and add the integration to the integrations array in the config.

From there you can configure your sitemap how you'd expect. You can filter out any pages you don't want in there, add custom pages, adjust the change frequency, modify date, and priority.

You can also serialize your urls (e.g. remove the trailing slash) and add localization properties.

Generate a Sitemap in Astro with the sitemap Integration

Every site that is serious about increasing traffic needs to consider how it is handling SEO.

In Astro, you can set your meta tags manually but Astro gives you a easy-to-use `<SEO />` component that will set meta tags for you as you give it properties.

In this lesson we'll add the `astro-seo` package and set titles and descriptions on our different landing pages as well as set a default if we forget to do that.

Implement SEO in an Astro Website with astro-seo

Layouts are the way to create a consistent user experience across different pages within our application.

By default, Astro ships with a `<Layout>` component that wraps the pages that are generated using the CLI. We'll look at what is already in our page layouts and add a nav and footer to them as well. We'll see that the layout has a `<slot />` element which is very similar to Reacts `children` which is where the html of nested pages will get placed when you use that layout.

Layout's are not automatically applied to pages in an application so we will also see what it looks like to add a layout to the about page that we created before. 


Create and Apply a Layout to Astro Pages

Astro uses file-based routing to generate routes within the project that you are working on. That means every folder and file you create under `/pages` will result in a route that reflects that file.  

Here you can see how different pages will map to different routes in astro:
```
./src/pages/index.astro  -> /
./src/pages/about.astro  -> /about
./src/pages/index.astro  -> /blog
./src/pages/hello.astro  -> /blog/hello
```

Create Static Pages in Astro Using File Based Routing


**Note:** I'm setting the page's type by directly assigning it
(`const page: Page<CollectionEntry<'blog'>> = ...`)

That won't work in recent versions of Astro because if we don't define `type Props`, Astro.props will be a record of type `Record<string, unknown>` and we can't cast an `unknown` to the `Page` type.

To fix this, we need to define `type Props` and set the page type in it, instead of casting the `page` constant to it. [See the code here.](https://github.com/nikolovlazar/egghead-personal-blog-astro/blob/lesson-10/src/pages/blog/%5Bpage%5D.astro#L22-L24)

---

When you have tens or hundreds of posts in your blog it can be a good user experience to paginate posts so they can be browsed.

Astro gives us an API to implement pagination easily. To do this we will convert our index page to a dynamic page by renaming to `[page].astro`. 

Now that you have a dynamic page, you'll need to export a `getStaticPaths` function that will define what pages are rendered. When we utilize the `GetStaticPaths` type on this function you'll notice that Astro gives us a `paginate` function we can use. 

We'll return a call to `paginate` from `getStaticPaths` and set the blog posts and page size we want to paginate on. This will return a page to us from `Astro.props.page` that will have all the necessary controls for building pagination like next and previous urls as well as the current pages data. 

To see all the data available to you on the page you can pull in the `Page` generic type from Astro and pass in `Page<CollectionEntry<'blog'>>`. From here we'll use this data to render the proper amount posts with conditionally rendered pagination control down below.

Implement Pagination in a Dynamic Astro Index Page with getStaticPaths and paginate

Now it's time to actually render the contents of our blog. To do this we need to leverage Astro's dynamic pages API because the pages that are rendered depend on what we add to our blog folder.

To do this we'll create a `[slug].astro` file that will handle rendering the pages. Because all pages are statically generated at build time we will tell Astro to build our pages exporting a `getStaticPaths` function from this file. 

We will utilize `getCollection` again to grab all the posts in our blog.

In `getStaticPaths` we need to return an object that has two properties: 

- params
- props

Params will be the dynamic portion of the page, in this case the slug of the post. Props will be the data that is passed to that dynamic page, we'll use post.

Each post comes with a `render` function so we can destructure the `Content` from the post that we will use in the template of the page.

## Challenge

You learned how to render content onto a dynamic blog post page but it doesn't look very good. This is because there are no styles applied to your content. Your challenge is to style the blog post content to look like the screen shot down below.

You can do this by utilizing Tailwinds typography package and use it's prose class or apply your styles with your own CSS. One thing to note is that `Content` lives in a different scope than the page so any styles you add here will need to be marked as global for Astro to pick them up.

![blog page](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698183730/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/07-render-blog-page.png)

Additionally, blogs typically have an index page of all the blog posts they contain. Add a proper blog index page and utilize the code that we wrote on the home page in the index page. This would be a great time to extract that code into an Astro component to reuse.

![blog index](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698183729/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/07-render-blog-page-blog-index.png)

Render an Astro Blog Post Page with getStaticPaths

A blog isn't worth much if you don't have a place to put your content. In this lesson we'll dive deep into Astros content collections API which is a feature for organizing all of your content and ensuring when you create your content you add the proper data to your front matter.

To do this we'll create a content folder that contains a `config.ts` inside that config we'll use `defineCollection` from `astro:content` to declare what our blog data will look like. From here you can set a `schema` property and use zod to declare the shape of the data you'd like your content to be in. 

When actually creating content, Astro will throw errors if you miss an attribute in your frontmatter that was set in your schema.

Astro also gives you an easy way to grab all the content you have with the `getCollection` function. We'll use this function to add links to our latests blog posts on the home page.

Create Astro Content Collections with Zod for a Typesafe Blog

There are two ways that Astro gives us to serve static content to our users. The first unoptimized way is to just put your assets in the public folder of your application. This will make your assets publicly available. If you had `asset.png` stored in your public folder you would access in your code with `/asset.png`.

When you use the public folder, however, you don't get any optimization and Astro will just serve what is in there no matter what. If you'd like to optimize your assets Astro gives you an `assets` folder that you can use inside `src`. Moving your asset there in tandem with the `Image` component from `astro:assets` will give you an optimized webp version of the image you want to load. You'll also be able to control the width/height and quality that is loaded.

## Challenge

It's time for you to test what you know so far. You've learned about Astro pages, components, styling, and static images. 

Use your knowledge to modify the home and about pages to look like the screenshots below. 

If you get stuck you can check the code linked on the lesson page. 

![astro home page screenshot](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698182477/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/05-render-images-home.png)

![astro about page screenshot](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698182477/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/05-render-images-about.png)

Render Images to Pages with Astros Static Serving and Static Assets

It's time to get your hands dirty by creating your first Astro component. 

This component will be relatively simple but very handy. You are creating a `Link` component that will take an `href` as well as an `isExternal` boolean telling the component whether or not it's an external link.

All components in Astro follow a similar pattern, you'll create a `Props` interface of all the props you want to pass the component. This will tell Astro what props your component expects and throw errors if it doesn't get those. Then you'll actually destructor those props from `Astro.props`

Finally we'll create some html and conditionally apply `nofollow noopener norefferer external` rel properties. 

You'll also see how `<slot />`s work to accept children that are passed to the component. 

Create an Astro Component for Links

You'll learn the various styling approaches available to you in Astro. 

By default, all styles are scoped to the file you are in so you won't need to worry too much about specificity and clashing styles in your Astro projects. We'll explore a page that is using general selectors like `h1` to style the header of that page. You can force a style in the global scope by the `is:global` directive or the `:global()` function on a specific selector.

Next, you'll learn about conditional styles and how to set JavaScript variables to pass to your styles for more dynamic controls. You can specify `class:list={[{red: isRed}]}` on an element which will conditionally apply the `red` class based on the `isRed` variable you have set in your JavaScript. 

Likewise, you can pass variables down to your `<style>` tags by adding the `define:vars` directive to the tag. This works great for setting variables for more flexibility in your styles.

Other styling options are available, you can import stylesheets or add tailwind to your Astro project. 

Style Astro Pages with Many Different Options

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.