{"id":13719839,"url":"https://github.com/clerk/remix-bossa-nova-stack","last_synced_at":"2025-03-19T06:26:07.971Z","repository":{"id":43405719,"uuid":"503837234","full_name":"clerk/remix-bossa-nova-stack","owner":"clerk","description":"The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more.","archived":false,"fork":false,"pushed_at":"2023-06-06T22:31:55.000Z","size":17474,"stargazers_count":50,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-26T19:31:27.684Z","etag":null,"topics":["chakra-ui","clerk","postgres","remix-stack","supabase","vercel"],"latest_commit_sha":null,"homepage":"https://bossa-nova-stack.clerk.app","language":"JavaScript","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/clerk.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,"governance":null}},"created_at":"2022-06-15T16:11:20.000Z","updated_at":"2024-07-04T03:16:54.000Z","dependencies_parsed_at":"2023-01-30T18:30:59.076Z","dependency_job_id":"90da76ad-8a12-4cef-91df-3ef7e6610425","html_url":"https://github.com/clerk/remix-bossa-nova-stack","commit_stats":null,"previous_names":["clerk/remix-bossa-nova-stack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fremix-bossa-nova-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fremix-bossa-nova-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fremix-bossa-nova-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fremix-bossa-nova-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clerk","download_url":"https://codeload.github.com/clerk/remix-bossa-nova-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244367539,"owners_count":20441905,"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":["chakra-ui","clerk","postgres","remix-stack","supabase","vercel"],"created_at":"2024-08-03T01:00:56.398Z","updated_at":"2025-03-19T06:26:07.948Z","avatar_url":"https://github.com/clerk.png","language":"JavaScript","readme":"# Remix Bossa Nova Stack\n\nLearn more about [Remix Stacks](https://remix.run/stacks).\n\n## What's in the stack\n\n-   User management with [Clerk](https://clerk.dev)\n-   Database with [Supabase](https://supabase.com)\n-   Styling with [Chakra UI](https://chakra-ui.com)\n-   Deployment with [Vercel](https://www.vercel.com)\n-   End-to-end testing with [Cypress](https://cypress.io)\n-   Unit testing with [Jest](https://jestjs.io) 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\n## Development\n\n### Installation\n\nCreate a new Remix app using the Bossa Nova Stack template:\n\n```sh\nnpx create-remix@latest --template clerkinc/remix-bossa-nova-stack \u003capp-name\u003e\n```\n\n### Environment variables\n\nFor this step, you'll need a [Clerk application](https://dashboard.clerk.dev). Check out the Clerk docs for more information about [setting it up.](https://clerk.dev/docs/how-to/set-up-your-application)\n\nYou'll also need a [Supabase project](https://app.supabase.com/).\n\nFinally, if you've already entered your environment variables during the `Installation` step, this step can be skipped.\n\nNavigate into your project directory:\n\n```sh\ncd \u003capp-name\u003e\n```\n\nCreate a `.env` file:\n\n```sh\ntouch .env\n```\n\nFind your Clerk [Frontend API key and Backend API key](https://dashboard.clerk.dev/last-active?path=api-keys) and your [Supabase URL and anon key](https://supabase.com/docs/guides/api#api-url-and-keys) and add them to that file like this:\n\n```\nCLERK_FRONTEND_API=\u003cYOUR_FRONTEND_API_KEY\u003e\nCLERK_API_KEY=\u003cYOUR_BACKEND_API_KEY\u003e\nSUPABASE_URL=\u003cYOUR_SUPABASE_URL\u003e\nSUPABASE_ANON_KEY=\u003cYOUR_SUPABASE_ANON_KEY\u003e\n```\n\n### Configuring the database\n\nThis template comes pre-configured to make calls to a [Supabase database](https://supabase.com/database).\n\nTo make authenticated calls to a Supabase database, you'll need to use one of Clerk's handy [JWT Templates](https://clerk.dev/docs/how-to/jwt-templates). Check out our [detailed instructions about setting up Clerk and Supabase](https://clerk.dev/docs/integration/supabase).\n\n\u003e ❗️ This project is configured to use a JWT template named `supabase`, so use the same value when creating your JWT template on the [Clerk Dashboard](https://dashboard.clerk.dev/last-active?path=jwt-templates). Alternatively, you can change this value in `/app/utils/db.server.ts`.\n\nAlso, you'll need to create a table called `bossa_nova_songs` with the following columns in your Supabase database:\n\n| Column name | Column type | Default value      |\n| ----------- | ----------- | ------------------ |\n| id          | uuid        | uuid_generate_v4() |\n| created_at  | timestamptz | now()              |\n| user_id     | text        |                    |\n| body        | text        |                    |\n\nIn the end, it should look like this:\n\n\u003cimg width=\"1000\" alt=\"App's screenshot\" src=\"./public/images/supabase-columns.png\"\u003e\n\nNext, we need to ensure that only authenticated users can add new songs and that these users can only retrieve songs they've added.\nFor that, we'll enable RLS for the newly created `bossa_nova_songs` table.\nHead over to the SQL editor on your Supabase project, paste and run the following query:\n\n```sql\ncreate or replace function requesting_user_id()\nreturns text\nlanguage sql stable\nas $$\n  select nullif(current_setting('request.jwt.claims', true)::json-\u003e\u003e'sub', '')::text;\n$$;\n```\n\nThis will create a `requesting_user_id()` function that can be used within an RLS policy.\n\nNow, navigate to \"Authentication\", then \"Policies\", enable RLS for the `bossa_nova_songs` table, if not yet enabled, and create two new policies from scratch.\n\nOne for inserting new songs:\n\n\u003cimg width=\"1000\" alt=\"Insert policy\" src=\"./public/images/insert-policy.png\"\u003e\n\nAnd one for selecting existing songs:\n\n\u003cimg width=\"1000\" alt=\"Select policy\" src=\"./public/images/select-policy.png\"\u003e\n\nYour database is now fully configured and protected.\n\n### Running the app\n\nStart your development instance:\n\n```sh\nnpm run dev\n```\n\nVisit http://localhost:3000. If everything is set up correctly, you should see something that looks like this:\n\n\u003cimg width=\"1771\" alt=\"App's screenshot\" src=\"./public/images/app-screenshot.png\"\u003e\n\nThat's it! You're all set to start building your Remix application with complete user management provided by [Clerk](https://clerk.dev).\n\n## Styling\n\nThis template is pre-configured to use Chakra styling. For more information about it, check out the [Chakra documentation](https://chakra-ui.com/docs).\n\n## Deployment\n\nYou only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.\n\nIf you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):\n\n```sh\nnpm i -g vercel\nvercel\n```\n\nIt is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).\n\n## Testing\n\n### Cypress\n\nCypress is used for the End-to-End tests in this project. You'll find those in the `cypress` directory. You'll find included Cypress's example files to help you on your way, but for more information on Cypress, [check out their official documentation](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress).\n\n### Jest/Testing Library\n\nFor lower level tests of utilities and individual components, this project uses [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com).\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\nThis project uses [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","funding_links":[],"categories":["Starter"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclerk%2Fremix-bossa-nova-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclerk%2Fremix-bossa-nova-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclerk%2Fremix-bossa-nova-stack/lists"}