{"id":19152671,"url":"https://github.com/rasyidf/vite-reactts-firebase-starter","last_synced_at":"2025-10-12T17:44:14.827Z","repository":{"id":60703340,"uuid":"488367209","full_name":"rasyidf/vite-reactts-firebase-starter","owner":"rasyidf","description":"🐳 Vite + React + TypeScript + ESLint + Prettier + MUI + React Router + Firebase","archived":false,"fork":false,"pushed_at":"2023-03-06T10:09:58.000Z","size":1808,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-03T18:47:19.312Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"riemonyamada/vite-reactts-firebase-starter","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rasyidf.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-03T21:24:31.000Z","updated_at":"2022-08-13T12:12:31.000Z","dependencies_parsed_at":"2025-01-03T18:44:19.417Z","dependency_job_id":"4b65b360-4a4d-4a4e-adf2-ad5f69a62f20","html_url":"https://github.com/rasyidf/vite-reactts-firebase-starter","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasyidf%2Fvite-reactts-firebase-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasyidf%2Fvite-reactts-firebase-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasyidf%2Fvite-reactts-firebase-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasyidf%2Fvite-reactts-firebase-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rasyidf","download_url":"https://codeload.github.com/rasyidf/vite-reactts-firebase-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240236360,"owners_count":19769580,"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":[],"created_at":"2024-11-09T08:18:43.521Z","updated_at":"2025-10-12T17:44:09.774Z","avatar_url":"https://github.com/rasyidf.png","language":"TypeScript","readme":"# Vite React Firebase Jotai Starter\n\n## Feature\n\nA quick start project template powered by vite which includes below:\n\n- Vite\n- React\n- TypeScript\n- ESlint (airbnb)\n- Prettier\n- MUI\n- React Router\n- Sentry\n- Firebase\n- Jotai\n- i18next\n\n## Getting Started\n\n- Clone the repo and `npm install`\n- Create `.env.development.local` and `.env.production.local` based on `.env.mode.local.sample`\n\n### Sentry\n\n- Create a Sentry project\n- Add some information to .env file\n\n### Firebase\n\n- Create a firebase project\n- Create a web app in the project\n- Enable mail password authentication via firebase console\n- Add user via firebase console\n- Add some information to .env file\n- Init firebase\n  - At least enable hosting, emulators and github actions\n\n### App Check\n\n- Follow this instruction\n  https://firebase.google.com/docs/app-check/web/recaptcha-provider\n\n### GitHub Actions\n\n- Update `projectId` and `firebaseServiceAccount` in GitHub Actions files\n\n## How to create this starter\n\nThis is for your reference.\n\n### create project using vite\n\n```shell\nnpm create vite@latest\n✔ Project name: … react-template\n✔ Select a framework: › react\n✔ Select a variant: › react-ts\n```\n\n```shell\ncd vite-template\nnpm install\n```\n\n### init ESlint\n\n```shell\nnpm install eslint --save-dev\nnpm init @eslint/config\n✔ How would you like to use ESLint? · style\n✔ What type of modules does your project use? · esm\n✔ Which framework does your project use? · react\n✔ Does your project use TypeScript? · Yes\n✔ Where does your code run? · browser\n✔ How would you like to define a style for your project? · guide\n✔ Which style guide do you want to follow? · airbnb\n✔ What format do you want your config file to be in? · JavaScript\n✔ Would you like to install them now with npm? · Yes\n```\n\n### configure ESlint\n\n```shell\nnpm install eslint-config-airbnb-typescript\n```\n\n- update `.eslintrc.js` and `tsconfig.node.json`\n- add a npm script for `eslint --fix`\n\n### int and configure Prettier\n\n```shell\nnpm install --save-dev --save-exact prettier\n```\n\n- add `.prettierrc.js` and `.prettierignore`\n- add a npm script for `prettier --write`\n\n### lint\n\n- add a npm script to lint\n- lint some files\n\n### init MUI\n\n```shell\nnpm install @mui/material @emotion/react @emotion/styled\nnpm install @mui/icons-material\nnpm install @mui/lab\n```\n\n- add `theme.ts`\n\n### configure emotion\n\n- update some files to make components use css property\n\n### update font-family\n\n- update index.html and theme.ts to add `Noto Sans JP`\n\n### install React Router v6\n\n```shell\nnpm install react-router-dom@6\n```\n\n### update tsconfig\n\n```shell\nnpm install --save-dev @tsconfig/strictest\n```\n\n- add `\"extends\": \"@tsconfig/strictest/tsconfig.json\"` to tsconfig\n\n### configure alias\n\n- update some files to set alias `@src`\n\n### update sample pages\n\n- update App.tsx and sample pages using router\n\n### add Sentry\n\n```shell\nnpm install --save @sentry/react @sentry/tracing\n```\n\n- add `ErrorBoundary`\n- configure Sentry with env variables\n- add hooks\n\n### add plugin to upload source map files to Sentry\n\n```shell\nnpm install vite-plugin-sentry\n```\n\n- configure `vite-plugin-sentry` with env variables\n\n### add pre commit linting\n\n```shell\nnpx mrm@2 lint-staged\n```\n\n- update `lint-staged` entry in `package.json`\n\n### add Firebase\n\n```shell\nnpm install firebase\n```\n\n- add initialization functions with env variables\n- add hooks\n\n### add rollup-plugin-visualizer\n\n```shell\nnpm install --save-dev rollup-plugin-visualizer\n```\n\n- configure `vite.config.ts`\n\n### add Jotai\n\n```shell\nnpm install jotai\n```\n\n### add authentication and router guard\n\n- add `useAuth` for authentication\n- add `SignIn`,`SingOut`,`ProtectedLayout` components\n- add router guard based on the auth state\n- add some extra components for demonstration\n\n### add stacked notifications snackbar\n\n```shell\nnpm i nanoid\n```\n\n- add `useAppNotification` hooks and `StackedSnackbar` component\n- update `AppRoutes` to include `StackedSnackbar`\n- update displays for auth errors\n\n### init firebase\n\n```shell\nfirebase init\n```\n\n- follow the guide\n\n### add pwa plugin\n\n```shell\nnpm i vite-plugin-pwa -D\n```\n\n- add assets\n- add manifest and other options to `vite.config.ts`\n- update `index.html`\n- create `ReloadPrompt` component and inject it to `App`\n\n### add firebase emulators\n\n- update firebase config\n\n### add i18next\n\n```\nnpm install react-i18next i18next\nnpm install i18next-browser-languagedetector\nnpm install --save-dev i18next-parser\n```\n\n- add an i18next initialize function and types\n- add a npm script and `i18next-parser.config.js` to extract translations\n- update translations files\n\n### add react-hook-form\n\n```\nnpm install react-hook-form\n```\n\n- update `SigninForm.tsx`\n\n### update to React18\n\n```\nnpm install react@18 react-dom@18\nnpm install --save-dev @types/react@18 @types/react-dom@18\n```\n\n- update `main.tsx`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasyidf%2Fvite-reactts-firebase-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frasyidf%2Fvite-reactts-firebase-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasyidf%2Fvite-reactts-firebase-starter/lists"}