Backend with accounts and province ranking system

.dockerignore

@@ -0,0 +1,6 @@
+app/node_modules
+app/npm-debug.log
+app/build
+node_modules
+npm-debug.log
+back/venv

.env.dev

@@ -0,0 +1,19 @@
+NODE_LOCAL_PORT=2003
+NODE_DOCKER_PORT=2003
+
+FLASK_LOCAL_PORT=8083
+FLASK_DOCKER_PORT=8083
+FRONT_ADDRESS=http://localhost
+API_BASE_URL=http://localhost:8003
+
+NODE_ENV=DEV
+ENV=DEV
+
+WCA_CLIENT_ID=example-id
+WCA_CLIENT_SECRET=example-secret
+WCA_HOST=https://staging.worldcubeassociation.org
+SESSION_SECRET_KEY=12340987
+DATASTORE_EMULATOR_HOST=localhost:8081
+GOOGLE_CLOUD_PROJECT=scc-staging-391105
+
+ADMIN_WCA_ID=2017ONDE01

.gcloudignore

@@ -0,0 +1,29 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+
+^(.*/)?#.*#$
+^(.*/)?.*~$
+^(.*/)?.*\.py[co]$
+^(.*/)?\..*$
+external/bootstrap
+__pycache__/
+/src/
+/lib/
+.git/
+.gitignore
+env/
+back/venv/
+frontend/node_modules/
+
+# Ignore other unnecessary files
+*.pyc
+*.pyo
+*.pyd
+*.pyc
+*.egg-info/
+*.egg
+*.bak
+*.swp
+*.DS_Store

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:16-alpine AS development
+ENV NODE_ENV development
+
+WORKDIR /
+COPY app/package.json ./
+COPY package-lock.json ./
+RUN npm install
+
+COPY . .
+WORKDIR /app
+
+EXPOSE 3000
+CMD ["npm", "start"]

README.md

@@ -1,10 +1,21 @@
 # speedcubingcanada.org
 
+## Running the app locally
+In order to run the app locally, you will need three independant services running at the same time:
+ - The frontend
+ - The backend
+ - The datastore emulator
+
+The quickest way to get all three running is to use docker-compose for the frontend and backend, and the gcloud client for the datastore emulator.
+Right now, the python part is commented in the docker-compose file, so you can either uncomment it or run it locally (useful if you want to use a debugger for example).
 ## Frontend
+First option, in the project root directory, you can run:
 
-First, please move into the `app` directory.
+### `docker-compose up`
+Runs the app and an nginx server. The app is available at [http://localhost/](http://localhost/).
 
-In the project directory, you can run:
+Second option:
+Move into the `frontend` directory.
 
 ### `npm start`
 
@@ -14,21 +25,48 @@ Open [http://localhost:2003](http://localhost:2003) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-Currently, there are no tests.
-
 ### `npm run build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+Currently, this step is handled deploy script described bellow.
+
+## Backend
+As mentioned above you can either use docker-compose or run the app locally.
+
+To run the app locally, you will need to move the `back` folder first and install the dependencies (I recommend using a virtual environment):
+
+```shell
+cd back
+pip install -r requirements.txt
+```
+
+Then you can run the flask app with:
+```shell
+gunicorn -b :8083 backend:app
+```
+If you use pycharm, you can also create a flask configuration and run it from there. Keep in mind the target folder is `back/backend`.
+
+## Datastore emulator
+
+```shell
+gcloud beta emulators datastore start
+```
+
+## Deployment
+
+To deploy the app use the script `deploy.sh` in the root directory. It will build the frontend and deploy the backend and frontend.
+Here are the options available (you must choose prod or staging at least):
 
-Currently, this step is handled automatically by an AWS build pipeline.
+```sh
+./deploy.sh
+# Arguments:
+# -p: deploy to prod
+# -s: deploy to staging
+# -f: frontend only
+# -b: backend only
+# -v <app version>: On staging, the name of the app version to upload.
+```

app/.gcloudignore

@@ -0,0 +1,17 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Node.js dependencies:
+node_modules/

app/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.fuse_hidden*
+

app/app.yaml

@@ -0,0 +1,12 @@
+runtime: nodejs16
+
+handlers:
+  # Serve all static files with url ending with a file extension
+  - url: /(.*\..+)$
+    static_files: build/\1
+    upload: build/(.*\..+)$
+
+  # Catch all handler to index.html
+  - url: /.*
+    static_files: build/index.html
+    upload: build/index.html

app/package.json

@@ -8,21 +8,26 @@
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.2",
     "@mui/styles": "^5.8.4",
+    "@mui/x-data-grid": "^6.11.0",
+    "@mui/x-date-pickers": "^6.10.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.0",
     "@types/node": "^16.11.22",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "dayjs": "^1.11.9",
     "i18next": "^21.6.16",
+    "ra-data-simple-rest": "^4.12.2",
+    "ra-language-french": "^4.13.0",
     "react": "^17.0.2",
+    "react-admin": "^4.12.3",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.16.7",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
-    "typescript": "^4.5.5",
-    "web-vitals": "^2.1.4"
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "start": "PORT=2003 react-scripts start",

app/public/robots.txt

@@ -1,3 +1,4 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
+/admin/*

app/src/App.tsx

@@ -3,12 +3,16 @@ import { initReactI18next } from "react-i18next";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { red } from "@mui/material/colors";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { Base } from "./components/Base";
+import { Base, ROUTE_NAMES } from "./components/Base";
 import { getLocaleOrFallback, resources, SAVED_LOCALE } from "./locale";
 import { Home } from "./pages/Home";
 import { About } from "./pages/About";
 import { Organization } from "./pages/Organization";
 import { FAQ } from "./pages/FAQ";
+import { Rankings } from "./pages/Rankings";
+import { Account } from "./pages/Account";
+import { AdminPage } from "./pages/AdminPage";
+import * as React from "react";
 import { Quebec } from "./pages/Quebec";
 
 i18n.use(initReactI18next).init({
@@ -38,16 +42,20 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <BrowserRouter>
         <Routes>
+          {/* Admin page without the navigation bar */}
+          <Route path="/admin/*" element={<AdminPage />} />
           {/* Normal pages */}
           <Route element={<Base />}>
             <Route path=":locale/">
               <Route index element={<Home />} />
               <Route path="about" element={<About />} />
               <Route path="organization" element={<Organization />} />
               <Route path="faq" element={<FAQ />} />
+              <Route path="rankings" element={<Rankings />} />
+              <Route path="account" element={<Account />} />
               <Route path="quebec" element={<Quebec />} />
             </Route>
-            {["about", "organization", "faq", "quebec"].map((route) => (
+            {ROUTE_NAMES.map((route) => (
               <Route
                 key={route}
                 path={route}

app/src/components/AdminDashboard.tsx

@@ -0,0 +1,12 @@
+import { Card, CardContent, CardHeader } from "@mui/material";
+import { useTranslate } from "react-admin";
+
+export const AdminDashboard = () => {
+  const t = useTranslate();
+  return (
+    <Card>
+      <CardHeader title={t("admin.title")} />
+      <CardContent>{t("admin.body")}</CardContent>
+    </Card>
+  );
+};

app/src/components/Base.tsx

@@ -16,30 +16,45 @@ import {
   Theme,
   useTheme,
 } from "@mui/material";
+
 import {
   Home,
   Info,
   CorporateFare,
   QuestionAnswer,
   Menu,
+  AccountCircle,
+  Leaderboard,
 } from "@mui/icons-material";
+
 import { Link, Outlet, useLocation, useParams } from "react-router-dom";
 import { getLocaleOrFallback, SAVED_LOCALE } from "../locale";
 
-const ROUTE_NAMES = ["home", "about", "organization", "faq"] as const;
+export const ROUTE_NAMES = [
+  "home",
+  "about",
+  "organization",
+  "faq",
+  "rankings",
+  "account",
+] as const;
 
 const ICONS = {
   home: Home,
   about: Info,
   organization: CorporateFare,
   faq: QuestionAnswer,
+  account: AccountCircle,
+  rankings: Leaderboard,
 } as const;
 
 const ROUTE_NAME_TO_PATH = {
   home: "",
   about: "about",
   organization: "organization",
   faq: "faq",
+  rankings: "rankings",
+  account: "account",
 } as const;
 
 type RouteName = (typeof ROUTE_NAMES)[number];

app/src/components/MyCubingIcon.tsx

@@ -0,0 +1,28 @@
+import "../cubingicon.css";
+import React from "react";
+import { Icon, Tooltip } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { eventID, IconSize } from "./Types";
+
+export const MyCubingIcon: React.FC<{
+  event: eventID;
+  selected: boolean;
+  size?: IconSize;
+}> = (data) => {
+  const { t } = useTranslation();
+
+  const { event, selected, size = "medium" } = data;
+
+  return (
+    <Tooltip title={t("events._" + event)} arrow>
+      <Icon
+        baseClassName={`icon cubing-icon event-${event} cubing-icon-${size} ${
+          selected ? "cubing-icon-selected" : "cubing-icon-unselected"
+        }`}
+        sx={{
+          height: 40,
+        }}
+      />
+    </Tooltip>
+  );
+};