Paystack Remix Template

Create a Remix application using this template by running:

npx create-remix@latest --template PaystackHQ/remix-app-template

What's in the template

• GitHub Actions for deploy on merge to production and staging environments
• End-to-end testing with Cypress
• Library of UI components from Pax
• Local third party request mocking with MSW
• Unit testing with Vitest and Testing Library
• Code formatting with Prettier
• Linting with ESLint
• Styling with Pax and TailwindCss
• Static Types with TypeScript

Development

• First run this stack's remix.init script and commit the changes it makes to your project.

  npx remix init
  git init # if you haven't already
  git add .
  git commit -m "Initialize project"

• Start dev server:

  npm run dev

This starts your app in development mode, rebuilding assets on file changes.

GitHub Actions

We use GitHub Actions for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests/build/etc. Anything in the dev branch will be deployed to staging.

Testing

Cypress

We use Cypress for our End-to-End tests in this project. You'll find those in the cypress directory. As you make changes, add to an existing file or create a new file in the cypress/e2e directory to test your changes.

We use @testing-library/cypress for selecting elements on the page semantically.

Vitest

For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.

Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.