{"id":15860115,"url":"https://github.com/prescottprue/blues-mui-stack","last_synced_at":"2026-05-14T15:30:15.744Z","repository":{"id":37225104,"uuid":"472180537","full_name":"prescottprue/blues-mui-stack","owner":"prescottprue","description":"Remix blues stack with material-ui","archived":false,"fork":false,"pushed_at":"2022-06-17T09:45:49.000Z","size":293,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-02T13:42:26.731Z","etag":null,"topics":["mui","remix-stack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prescottprue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-21T04:01:56.000Z","updated_at":"2022-03-29T11:55:43.000Z","dependencies_parsed_at":"2022-06-22T06:25:41.261Z","dependency_job_id":null,"html_url":"https://github.com/prescottprue/blues-mui-stack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Fblues-mui-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Fblues-mui-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Fblues-mui-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prescottprue%2Fblues-mui-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prescottprue","download_url":"https://codeload.github.com/prescottprue/blues-mui-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240118330,"owners_count":19750471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mui","remix-stack"],"created_at":"2024-10-05T21:42:32.050Z","updated_at":"2026-05-14T15:30:15.607Z","avatar_url":"https://github.com/prescottprue.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Remix Blues Material Stack\n\n![The Remix Blues Stack](https://repository-images.githubusercontent.com/461012689/37d5bd8b-fa9c-4ab0-893c-f0a199d5012d)\n\nLearn more about [Remix Stacks](https://remix.run/stacks).\n\n```\nnpx create-remix --template remix-run/blues-stack\n```\n\n## What's in the stack\n\n- [Material-ui](https://mui.com)\n- [Multi-region Fly app deployment](https://fly.io/docs/reference/scaling/) with [Docker](https://www.docker.com/)\n- [Multi-region Fly PostgreSQL Cluster](https://fly.io/docs/getting-started/multi-region-databases/)\n- Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)\n- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments\n- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)\n- Database ORM with [Prisma](https://prisma.io)\n- Styling with [Tailwind](https://tailwindcss.com/)\n- End-to-end testing with [Cypress](https://cypress.io)\n- Local third party request mocking with [MSW](https://mswjs.io)\n- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)\n- Code formatting with [Prettier](https://prettier.io)\n- Linting with [ESLint](https://eslint.org)\n- Static Types with [TypeScript](https://typescriptlang.org)\n\nNot a fan of bits of the stack? Fork it, change it, and use `npx create-remix --template your/repo`! Make it your own.\n\n## Development\n\n- Start the Postgres Database in [Docker](https://www.docker.com/get-started):\n\n  ```sh\n  npm run docker\n  ```\n\n- Initial setup:\n\n  ```sh\n  npm run setup\n  ```\n\n- Start dev server:\n\n  ```sh\n  npm run dev\n  ```\n\nThis starts your app in development mode, rebuilding assets on file changes.\n\nThe database seed script creates a new user with some data you can use to get started:\n\n- Email: `rachel@remix.run`\n- Password: `rachelrox`\n\nIf you'd prefer not to use Docker, you can also use Fly's Wireguard VPN to connect to a development database (or even your production database). You can find the instructions to set up Wireguard [here](https://fly.io/docs/reference/private-networking/#install-your-wireguard-app), and the instructions for creating a development database [here](https://fly.io/docs/reference/postgres/).\n\n### Relevant code:\n\nThis is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.\n\n- creating users, and logging in and out [./app/models/user.server.ts](./app/models/user.server.ts)\n- user sessions, and verifying them [./app/session.server.ts](./app/session.server.ts)\n- creating, and deleting notes [./app/models/note.server.ts](./app/models/note.server.ts)\n\n## Deployment\n\nThis Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.\n\nPrior to your first deployment, you'll need to do a few things:\n\n- [Install Fly](https://fly.io/docs/getting-started/installing-flyctl/)\n\n- Sign up and log in to Fly\n\n  ```sh\n  fly auth signup\n  ```\n\n- Create two apps on Fly, one for staging and one for production:\n\n  ```sh\n  fly create try-blues-312f\n  fly create try-blues-312f-staging\n  ```\n\n- Create a new [GitHub Repository](https://repo.new)\n\n- Add a `FLY_API_TOKEN` to your GitHub repo. To do this, go to your user settings on Fly and create a new [token](https://web.fly.io/user/personal_access_tokens/new), then add it to [your repo secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) with the name `FLY_API_TOKEN`.\n\n- Add a `SESSION_SECRET` to your fly app secrets, to do this you can run the following commands:\n\n  ```sh\n  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app try-blues-312f\n  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app try-blues-312f-staging\n  ```\n\n  If you don't have openssl installed, you can also use [1password](https://1password.com/generate-password) to generate a random secret, just replace `$(openssl rand -hex 32)` with the generated secret.\n\n- Create a database for both your staging and production environments. Run the following:\n\n  ```sh\n  fly postgres create --name try-blues-312f-db\n  fly postgres attach --postgres-app try-blues-312f-db --app try-blues-312f\n\n  fly postgres create --name try-blues-312f-staging-db\n  fly postgres attach --postgres-app try-blues-312f-staging-db --app try-blues-312f-staging\n  ```\n\n  Fly will take care of setting the DATABASE_URL secret for you.\n\nNow that every is set up you can commit and push your changes to your repo. Every commit to your `main` branch will trigger a deployment to your production environment, and every commit to your `dev` branch will trigger a deployment to your staging environment.\n\n### Multi-region deploys\n\nOnce you have your site and database running in a single region, you can add more regions by following [Fly's Scaling](https://fly.io/docs/reference/scaling/) and [Multi-region PostgreSQL](https://fly.io/docs/getting-started/multi-region-databases/) docs.\n\nMake certain to set a `PRIMARY_REGION` environment variable for your app. You can use `[env]` config in the `fly.toml` to set that to the region you want to use as the primary region for both your app and database.\n\n#### Testing your app in other regions\n\nInstall the [ModHeader](https://modheader.com/) browser extension (or something similar) and use it to load your app with the header `fly-prefer-region` set to the region name you would like to test.\n\nYou can check the `x-fly-region` header on the response to know which region your request was handled by.\n\n## GitHub Actions\n\nWe 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.\n\n## Testing\n\n### Cypress\n\nWe 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.\n\nWe use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.\n\nTo run these tests in development, run `npm run test:e2e:dev` which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.\n\nWe have a utility for testing authenticated features without having to go through the login flow:\n\n```ts\ncy.login();\n// you are now logged in as a new user\n```\n\nWe also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:\n\n```ts\nafterEach(() =\u003e {\n  cy.cleanupUser();\n});\n```\n\nThat way, we can keep your local db clean and keep your tests isolated from one another.\n\n### Vitest\n\nFor lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).\n\n### Type Checking\n\nThis 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`.\n\n### Linting\n\nThis project uses ESLint for linting. That is configured in `.eslintrc.js`.\n\n### Formatting\n\nWe use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `npm run format` script you can run to format all files in the project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprescottprue%2Fblues-mui-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprescottprue%2Fblues-mui-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprescottprue%2Fblues-mui-stack/lists"}