Checkers App

Dockerfile

@@ -35,7 +35,8 @@ RUN npm i -g firebase-tools && \
     firebase setup:emulators:firestore && \
     firebase setup:emulators:pubsub && \
     firebase setup:emulators:storage && \
-    firebase setup:emulators:ui
+    firebase setup:emulators:ui && \
+    firebase experiments:enable webframeworks
 
 # Preserve firebase emulators cache
 VOLUME $HOME/.cache

README.md

@@ -1,29 +1,26 @@
 # Firebase-Functions
 
-## Development Setup
+## First Time Setup
 
-1. Git Clone (use SSH)
-2. Go to develop branch
-3. `cd functions`
-4. `npm install -g firebase-tools`
-5. `npm install`
-6. run `firebase login --no-localhost` then login with your betterSG email
-7. run `npm run build:watch` on one shell for typescript to build and work with emulator's hot reload
-8. run `npm run serve` on another shell
-9. you should now be able to hit the url at http://127.0.0.1:5001/checkmate-373101/asia-southeast1/xxxxx successfully
-10.  Now can work on your individual functions in the /functions/definitions folder
-11. Uncomment the exports when ready to test with the local emulator!
-12. Rmb to use https://ngrok.com/ (can install vs code extension) to expose localhost as an internet URL, in case you want to run locally but test with actual Whatsapp and Telegram. Note...might need to have premium Ngrok for this to work with whatsapp.
+1. `git clone https://github.com/CheckMateSG/checkMate.git`
+2. `cd checkMate`
+3. `npm install -g firebase-tools`
+4. `npm run postinstall`
+5. run `firebase login --no-localhost` then login with your betterSG email
+6. set up tunnel to localhost. Can contact BW for cloudflare tunnel
 
-## Things to note
-1. Put all keys and access tokens in the .env file and make sure its gitignored!
-2. Always refer to https://www.notion.so/better/Technical-Documentation-6ddc93791fdb43ff974adf7b3a7b6b3b and follow the DB schema. If you'd like to make changes to the schema, feel free! But we should let each other know on the Telegram chat, before making the change to the notion, so everyone is on the same page! It's super important to follow the schema, because that's the core of the system.
-3. Test locally first using the emulator and ngrok. Once the functions are ready, we will deploy the whole setup to the production firestore.
-4. Do add comments if needed, and try and write code that's easily understandable
-5. Feel free to do things differently from what I've laid out (for example, you can tweak the schema), so long it makes sense! But do let us know if you are making schema changes.
-6. If there's anything you're unsure or stuck on, just ask in the chat :) better to unblock early than to bang the wall!
+## Each Time Developing
+
+1. Open 3 shells from in root directory
+2. [Shell 1] `cd functions`
+3. [Shell 1] `npm run build:watch` [hot reload for functions]
+4. [Shell 2] `cd checkers-app` [hot reload for webapp]
+5. [Shell 2] `npm run build:watch`
+6. [Shell 3] `npm run serve`
+7. Can start on development
 
 ## Useful Resources and links:
+
 - Firebase Console - https://console.firebase.google.com/, login with your bettersg email. Go here to manage the product resources and to change the production DB (later on, for a start we can just use the emulator)
 - Adding subcollections - https://stackoverflow.com/questions/47514419/how-to-add-subcollection-to-a-document-in-firebase-cloud-firestore
 - Getting started with firestore and firebase (basically I've adapted that for this repo) https://firebase.google.com/docs/functions/get-started

checkers-app/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

checkers-app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

checkers-app/README.md

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

checkers-app/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>