7.1 KiB
Contributing to Debaters' toolkit
Looking forward to contribute to Debaters' toolkit? Thanks! Here's a step-by-step guide as to how to rebuild this project from scratch.
Setting up Firebase
- Go to Firebase Console and click on 'Add Project'. Remember to switch off 'Enable Google Analytics for this project' after naming your project.
- Click on the </> button in 'Project Overview' to create a new web app. Don't check 'Also set up Firebase Hosting for this app.'
- After clicking 'Register App', you will find something like this:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXX-XXXX_XXXXX-XXXXXXXXX",
authDomain: "XXXX.firebaseapp.com",
projectId: "XXXX",
storageBucket: "XXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXXXX",
appId: "1:XXXXXXXXXXXXX:web:XXXXXXXXXXXXXXXXXXXXXX"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
Copy the values inside firebaseConfig (without quotation marks) and paste them correspondingly to the .env.example file in the root directory of the project such that the first 6 lines of .env.example looks something like this:
REACT_APP_FIREBASE_API_KEY=XXXXXXXXXXXXXXXXXX-XXXX_XXXXX-XXXXXXXXX
REACT_APP_FIREBASE_AUTH_DOMAIN=XXXX.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=XXXX
REACT_APP_FIREBASE_STORAGE_BUCKET=XXXX.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=XXXXXXXXXXXXX
REACT_APP_FIREBASE_APP_ID=1:XXXXXXXXXXXXX:web:XXXXXXXXXXXXXXXXXXXXXX
- After adding a web app to your Firebase project, in the Firebase Console, click on 'Create database'. Select 'start in production mode' and then select a Cloud Firestore location closest to your geolocation.
- Go to the Authentication tab in the Firebase Console and click on 'Get started'. Click on 'Email/Password' and enable it. Don't enable 'Email link (passwordless sign-in)'.
- In the 'Users' section in 'Authentication', click on 'Add user'. Provide an email and password for this user, which will be used as the admin account. Copy the User UID afterwards and paste it into 'REACT_APP_ADMIN_UID' inside .env.example.
- Go to the 'Rules' section in 'Firestore Database'. Change the rules to the following:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /requests/{requestID} {
allow read: if request.auth.uid == "XXXXXXXXXXXXXXXXXXXXXXXXXXXX";
allow write: if true;
}
match /motions/{motionID} {
allow read: if true;
allow write: if request.auth.uid == "XXXXXXXXXXXXXXXXXXXXXXXXXXXX";
}
match /tournaments/{tournamentID} {
allow read: if true;
allow write: if request.auth.uid == "XXXXXXXXXXXXXXXXXXXXXXXXXXXX";
}
}
}
Replace XXXXXXXXXXXXXXXXXXXXXXXXXXXX with the UID you just copied and then click on 'Publish'. 8. Go to the 'Data' section in 'Firestore Database'. Create 3 collections named 'motions', 'requests', and 'tournaments' under 'Collection ID'. When asked to create a first document, click on 'Auto ID' and then click save. Remember to delete the first document for all 3 collections.
Setting up Google Analytics (optional)
This part is optional, so if you don't want to set up Google Analytics, delete 'REACT_APP_GA_TRACKING_ID_WEB' inside .env.example.
Visit Analytics and login with your Google account. If you have never created a Google Analytics account, click on 'Start measuring'. Otherwise, click on the settings button the bottom of the left bar and click on '+ Create Account' under the 'Admin' tab.
Account setup: Give the account a name e.g. 'Debaters' toolkit'. The 4 checkboxes are optional.
Property setup: Name the new property 'Main' and select your time zone and currency. Click on 'Show advanced options' and select 'Create a Universal Analytics'. Set the 'Website URL' to a valid URL, but if you intend to host the app somewhere then enter the desired URL here. Select 'Create a Universal Analytics property only'.
About your business: This part is optional, and you can skip it by clicking on 'Create'.
Copy the Tracking ID (something like UA-123456789-1) and paste it into 'REACT_APP_GA_TRACKING_ID_WEB' inside .env.example.
Setting up Messenger Chat (optional)
This part is optional, so if you don't want to set up Google Analytics, delete 'REACT_APP_FB_PAGE_ID' and 'REACT_APP_FB_APP_ID' inside .env.example.
Follow this tutorial to set up your Facebook page and create a new App on Meta for Developers. Copy your Facebook page ID and the newly created app's ID and paste them into REACT_APP_FB_PAGE_ID and REACT_APP_FB_APP_ID inside .env.example, correspondingly.
Starting the development server
Open up a terminal in the root folder of the project and do the following:
cp .env.example .env
Follow this guide to install yarn v3.
You can start the development server directly by installing the dependencies using 'npm install' or 'yarn install' and then 'npm start' or 'yarn start', but this requires manual npm/yarn configuration. The recommended approach is to run the development server inside a Docker container.
Install Docker if you haven't and open Docker upon finishing the installation.
Then, build the Docker image:
docker build -t debaters-toolkit .
Run the container:
docker run --name debaters-toolkit -d -p 3000:3000 debaters-toolkit
Now you can open your browser and go to http://localhost:3000.
Electron
You can also run Debaters' toolkit as an Electron application. First, switch to the 'electron' branch. Then, to start the Electron development server:
yarn dev
To build the .exe installer:
yarn build
yarn electron-pack
You will then find the .exe installer inside the 'dist' folder.
Android
It is also possible to build Debaters' toolkit as a native Android application. First, switch to the 'android' branch. Then, to generate native Android source code:
ionic capacitor add android
A new 'android' folder will be created.
To update the icons of the Android app, open up your terminal:
rm -rf android/app/src/main/res
cp -r res android/app/src/main
After that, open android/app/src/main/Android Manifest.xml and set android:icon to "@mipmap/debaters_toolkit", android:roundIcon to "@mipmap/debaters_toolkit_round".
Finally, open the 'android' folder with Android Studio and build the APK.