Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rifandani/react-hackathon
React Template for hackathon
https://github.com/rifandani/react-hackathon
firebase hackathon
Last synced: 12 days ago
JSON representation
React Template for hackathon
- Host: GitHub
- URL: https://github.com/rifandani/react-hackathon
- Owner: rifandani
- Created: 2023-10-23T11:59:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-01T07:53:30.000Z (over 1 year ago)
- Last Synced: 2024-11-20T20:56:49.771Z (2 months ago)
- Topics: firebase, hackathon
- Language: TypeScript
- Homepage: https://app-template-rifandani.web.app/
- Size: 1.53 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Template for Hackathon
## Features
React Hackathon Template built with:
- `vite` + `typescript` + `eslint` + `prettier` -> development productivity
- `tailwindcss` + `tailwindcss-animate` + `tailwind-merge` + `daisyui` -> easy styling
- `@formkit/auto-animate` -> automate transition animation when component mount/unmount/changed
- `axios` + `@tanstack/react-query` -> server state management + data fetching (the only reason I use axios is because it supports upload progress)
- `zod` -> runtime schema validation
- `@iconify-icon/react` -> SVG icon on demand
- `react-hook-form` -> form management
- `zustand` -> performant global state
- `@mantine/core` + `@mantine/notifications` + `@mantine/dates` + `@mantine/spotlight` + `@mantine/carousel` -> adaptive, accessible and robust styled UI components for rapid prototyping
- `typesafe-i18n` -> i18n, supports for "en" & "id" locales
- `type-fest` -> collection of useful type helpers
- `@mantine/hooks` -> collection of useful react custom hooks
- `@rifandani/nxact-yutiriti` -> collection of useful utils
- `dayjs` -> collection of useful date utils (required if when we use `@mantine/dates`)
- `firebase` + `reactfire` -> fullstack capability using firebase free services such as firestore, storage, realtime database, auth, remote config, hosting, and firebase emulator suite.
- `vite-plugin-pwa` + `@vite-pwa/assets-generator` + `@rollup/plugin-replace` + `https-localhost` + `workbox-core` + `workbox-precaching` + `workbox-routing` + `workbox-window` -> Progressive Web App (PWA)
## Development
Rename `.env.development.example` to `.env.development`.
Rename `.env.production.example` to `.env.production`.
We use firebase free services to accelerate the short development. We also running firebase emulators suite UI in development. Currently we only use free services such as: "firestore", "storage", "database", and "auth". Paid services such as: "functions", "pubsub" and "eventarc" are not included.
When we start firebase emulator, it will try to import the seed data from `./firebase-data` folder. And when we stop the server, it will try to update & export your latest data to `./firebase-data` folder.
To start, install and then run the app.
```bash
# install deps
$ pnpm install
# running firebase emulators concurrently with the app seems to not work correctly
# so we need to run it in separate terminal
# Runs the app with PWA + sync with i18n changes
$ pnpm on:dev
# Runs the firebase emulator in another terminal
$ pnpm emu:start
```
## Build
```bash
# build app in "production" mode
$ pnpm build
```
## Start
PWA relies on [https-localhost](https://github.com/daquinoaldo/https-localhost) to serve the dist files on https://localhost/.
Please refer to it's docs for the steps to setup your local environment.
```bash
# build and serve using https
pnpm start
```
Open up https://localhost/, then restart the server, you will see a notification ask you to restart reload the offline content.
## Deployment
We supports deployment to Vercel and Firebase Hosting. We recommends using firebase hosting.
Check out `firebase.json` for Firebase Hosting. Check out `vercel.json` for Vercel.