Remix Andrew Stack

Remix template for creating full-stack apps.

Table of contents

• Tech stack
• Requirements
• Setup
• Development
• Troubleshooting

Tech stack

• Email/Password authentication with cookie-based sessions
• Conform for Progressively Enhanced and fully type safe forms
• Docker and Docker Compose containerization
• ESLint for linting
• GitHub Actions for CI
• Playwright for integration tests
• PostgreSQL database
• Prettier code formatting
• Prisma database ORM
• shadcn/ui React component library
• Storybook component explorer
• Tailwind for styling ❤️
• TypeScript for type safety!
• Vitest and Testing Library for unit testing
• Zod for Runtime schema validation

Requirements

• Docker
• nodenv

Setup

Setup the app by doing the following:

• Install the required Node version

  nodenv install

• Install dependencies

  npm install

• Start any required Docker services, such as Postgres:

  npm run docker

• Setup the database:

  npm run setup

• Run the build, which generates the App's Node server:

  npm run build

Development

• Start the app in development mode, rebuilding assets on file change:

  npm start

• Once running, visit:

  https://localhost:3000
  

• By default there's a user with some data you can use to get started:

  • Email: jane@example.com
  • Password: password

• Manage the database with the Prisma CLI. See Developing with Prisma Migrate.

  Some common operations are:

  Goal	Command(s)
  Apply pending migrations	npm run prisma migrate dev
  Add a new model	Modify prisma/schema.prisma and run npm run prisma migrate dev to generate a migration
  Explore the db	npm run prisma studio
  Reset your db	npm run prisma migrate reset

• Debug server side code by placing a debugger in your code, open up Chrome, and go to chrome://inspect.