---
title: "Project Setup"
description: "Resources and tools to set up a modern web development project."
canonical: "/learn/guides/project"
---

import { CardGrid, LinkCard } from '@astrojs/starlight/components'
import { getCollection } from 'astro:content'
import { LINKS } from '~/constants/links'

export const projectGuides = (await getCollection('docs'))
  .filter(
    ({ id }) =>
      id.startsWith('learn/guides/project/') &&
      id !== 'learn/guides/project/index.mdx',
  )
  .sort((a, b) => a.data.title.localeCompare(b.data.title))

<CardGrid>
  {projectGuides.map(({ data, id }) => (
    <LinkCard
      title={data.title}
      href={LINKS.guides(id.replace('learn/guides/', ''))}
      description={data.description}
    />
  ))}
</CardGrid>