Remix Framework - Full Stack Web Framework

npx create-remix@latest
cd my-remix-app
npm run dev

// app/routes/_index.tsx
export default function Index() {
  return (
    <div>
      <h1>Welcome to Remix</h1>
    </div>
  );
}

// app/routes/posts.tsx
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader() {
  const posts = await getPosts();
  return json({ posts });
}

export default function Posts() {
  const { posts } = useLoaderData<typeof loader>();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// app/routes/contact.tsx
import { redirect } from '@remix-run/node';

export async function action({ request }) {
  const formData = await request.formData();
  const email = formData.get('email');
  await saveContact(email);
  return redirect('/thank-you');
}

export default function Contact() {
  return (
    <form method="post">
      <input type="email" name="email" required />
      <button type="submit">Subscribe</button>
    </form>
  );
}

export function ErrorBoundary() {
  return (
    <div>
      <h1>Something went wrong</h1>
      <p>Please try again later.</p>
    </div>
  );
}