Building a Pet Adoption App with Catalyst

This tutorial will guide you through creating a server-side rendered (SSR) pet adoption application using Catalyst. You'll learn about routing, data fetching, styling, and code splitting.

Overview

By following this tutorial, you'll build a dog adoption application with Catalyst featuring:

• Server-side rendering
• Client-side navigation
• Data fetching with serverFetcher and clientFetcher
• Integration with a public API (Dog API)
• Styling with CSS
• Static asset serving
• Custom font loading
• Layout components
• Component-based code splitting
• Route-based code splitting

Prerequisites

• Basic knowledge of React and JavaScript
• Node.js and npm installed on your machine
• A code editor of your choice

Tutorial Structure

This tutorial is divided into 10 steps, each focusing on a specific aspect of building applications with Catalyst:

1. Installation: Setting up a new Catalyst application
2. Setting up a route with mock data: Creating your first page with static data
3. Server-side data fetching: Fetching real data from an API on the server
4. Creating a detail page: Setting up a second page with dynamic routes
5. Client-side navigation: Enabling smooth transitions between pages
6. Styling: Adding CSS and styling components
7. Layout setup: Creating a consistent layout with header and footer
8. Asset loading: Adding and serving static assets
9. Font loading: Configuring custom fonts
10. Code splitting: Optimizing performance with route-based code splitting

Let's get started with installation in the next section.