Remix Full-Stack Application

A full-stack web application built with Remix, React, TypeScript, and shadcn/ui.

Getting Started

Prerequisites

• Node.js >= 20.0.0
• npm

Installation

# Install dependencies
npm install
# Start development server
npm run dev

Available Scripts

npm run dev # Start development server
npm run build # Build for production
npm run start # Run production server
npm run lint # Run ESLint
npm run typecheck # Run TypeScript type checking
npm run test# Run tests

Project Structure

app/
├── routes/ # Remix routes (pages + API endpoints)
│ ├── _index.tsx # Home page (/)
│ ├── $.tsx # 404 catch-all page
│ └── api.health.tsx # Example API endpoint (/api/health)
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ └── ... # Custom components
├── lib/ # Utility functions
├── hooks/ # Custom React hooks
├── root.tsx # Root layout component
└── tailwind.css # Global styles

Technologies

• Framework: Remix - Full-stack React framework
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Build Tool: Vite

Backend API Routes

Create API routes by adding files to app/routes/ with the api. prefix:

// app/routes/api.example.tsximporttype{LoaderFunctionArgs,ActionFunctionArgs}from"@remix-run/node";import{json}from"@remix-run/node";// GET /api/exampleexportasyncfunctionloader({ request }: LoaderFunctionArgs){returnjson({message: "Hello from API"});}// POST /api/exampleexportasyncfunctionaction({ request }: ActionFunctionArgs){constdata=awaitrequest.json();returnjson({received: data});}

Adding UI Components

Use shadcn/ui CLI to add components:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
# etc.

Deployment

Build and run the production server:

npm run build
npm run start

The app runs on http://localhost:3000 in production mode.