{"id":14990374,"url":"https://github.com/alstonchan/apexcode","last_synced_at":"2026-02-22T23:04:38.987Z","repository":{"id":240597929,"uuid":"768987281","full_name":"AlstonChan/ApexCode","owner":"AlstonChan","description":"An online coding course website written in pure HTML, CSS and Javascript","archived":false,"fork":false,"pushed_at":"2024-06-20T23:29:34.000Z","size":28926,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T03:17:36.337Z","etag":null,"topics":["course-project","css3","firebase","html5","javascript","webcomponents"],"latest_commit_sha":null,"homepage":"https://alstonchan.github.io/ApexCode/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlstonChan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-03-08T05:30:50.000Z","updated_at":"2024-05-20T00:46:47.000Z","dependencies_parsed_at":"2024-09-24T16:01:59.428Z","dependency_job_id":"4a2a3e10-fd0e-43b6-ad8c-c067fc447783","html_url":"https://github.com/AlstonChan/ApexCode","commit_stats":{"total_commits":150,"total_committers":6,"mean_commits":25.0,"dds":0.5133333333333333,"last_synced_commit":"3a752d5921002d4130a8e39af1b09c969977c25e"},"previous_names":["alstonchan/apexcode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlstonChan%2FApexCode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlstonChan%2FApexCode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlstonChan%2FApexCode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlstonChan%2FApexCode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlstonChan","download_url":"https://codeload.github.com/AlstonChan/ApexCode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968385,"owners_count":21025824,"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":["course-project","css3","firebase","html5","javascript","webcomponents"],"created_at":"2024-09-24T14:19:58.580Z","updated_at":"2025-10-28T20:37:51.910Z","avatar_url":"https://github.com/AlstonChan.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ApexCode\n\nAn online coding course website written in pure HTML, CSS and Javascript\n\n## Local development\n\nThis guide assumes that you are developing this project in Windows operating system and uses VScode as your primary code editor.\n\n### Getting started\n\n1. Clone the repository into your local machine\n\n    ```powershell\n    git clone https://github.com/AlstonChan/ApexCode.git\n    ```\n\n2. If you need to develop/test the firebase related code locally, install `firebase-tools` or the _CLI_ so you can use Firebase emulator.\n\n    ```bash\n    npm install firebase-tools -g\n    ```\n\n    If you do not want to install the package globally, run the following command to install the package scoped to the current project.\n\n    ```bash\n    npm install\n    ```\n\n    To access the package, append `npx` before running any command. For example: `npx firebase -h`.\n\n    For full firebase setup, please refer to the section _Firebase setup_ below.\n\n3. Open `index.html` directly or by running a live server for hot reloading too see the web page.\n\n4. If you have setup the firebase, and wish to develop using firebase emulators, run the following command:\n\n   ```powershell\n   npm run emulators:import\n   ```\n\n   This will populate the emulator with data instead of having a empty emulator with no data.\n   The default user for testing is:\n   - User 1\n     - Email : \u003cuser1@test.com\u003e\n     - Password : 123456789\n   - User 2\n     - Email : \u003cuser2@test.com\u003e\n     - Password : 123456789\n\n### Firebase setup\n\n1. Firstly, go to [Firebase](https://firebase.google.com/), you should see this page. Click the top right **Sign in** button if you haven't sign in yet and click _Get started_ button.\n   ![firebase homepage](./public/assets/images/README/firebase-home.jpg)\n\n2. Next, click _Add project_ and enter a project name you desired (_ApexCode_), then proceed to create your Firebase project.\n\n3. Below is your **firebase console**, create a web app and register a name.\n   ![firebase homepage](./public/assets/images/README/firebase-console.png)\n\n   - Since this is project uses vanilla HTML, CSS and Javascript only, select _Use a \\\u003cscript\\\u003e tag_ option. Copy the content of the script tag into `firebase-config.js`.\n\n4. Go to your **[Firebase console](https://console.firebase.google.com/u/0/)**, select the project and navigate to `Authentication` section. Click get started and enable **`Email/Password`** auth, this app will use the selected providers to authenticate user.\n\n5. Next, navigate to `Firestore Database` section. Click get started and create a database, select any location you want the data to be stored (This setting cannot be changed later). Next, select _Start in **Test mode**_ so that you can access to your firestore later without getting unauthorized error, unless you know what you are doing.\n\n6. Lastly, navigate to `Storage` section. Select _Start in **Test mode**_ so that you can access to your firestore later without getting unauthorized error, unless you know what you are doing.\n\n#### Firebase CLI Setup\n\nMake sure you have done the **Firebase Setup** before proceeding to this section, as error will occur if the firebase isn't setup in the interface with this guide.\n\n1. Go to your text editor, in my case, I am using [Visual Studio Code](https://code.visualstudio.com/). Login to the Firebase CLI using the following command, You will be redirected to your browser to login.\n\n   ```bash\n   npx firebase login\n   ```\n\n2. After you have successfully login to the Firebase CLI, enter this command to initialize your firebase project to this application.\n\n   ```bash\n   npx firebase init\n   ```\n\n3. You will be greeted with a big **FIREBASE** word and you will be asked the following question:\n\n   1. **Are you ready to proceed?**\n      _Response_: type `y`\n\n   2. **Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.**\n      _Response_: select `Firestore`, `Storage` and `Emulators` by pressing space. Use arrow key to navigate your option up and down. After you have selected these three options, press `Enter`.\n\n   3. **Select a default Firebase project for this directory: (Use arrow keys)**\n      _Response_: Use a existing project and select the Firebase project that you just initialize. Press `Enter` to proceed.\n\n   4. **What file should be used for Firestore Rules?**\n      _Response_: press `Enter`; Use the default `firestore.rules`\n\n   5. **File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console?**\n      _Response_: type `n`\n\n   6. **What file should be used for Firestore indexes?**\n      _Response_: press `Enter`; Use the default `firestore.indexes.json`\n\n   7. **File firestore.indexes.json already exists. Do you want to overwrite it with the Firestore Indexes from the Firebase Console?**\n      _Response_: type `n`\n\n   8. **What file should be used for Storage Rules?**\n      _Response_: press `Enter`; Use the default `storage.rules`\n\n   9. **File _storage.rules_ already exists. Overwrite?**\n      _Response_: type `n`\n\n   10. **Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices.**\n       _Response_: select `Firestore Emulator`, `Storage Emulator` and `Authentication Emulator` by pressing space. Use arrow key to navigate your option up and down. After you have selected these three options, press `Enter`.\n\n   11. **Which port do you want to use for the auth emulator?**\n       _Response_: press `Enter`; Use the default port `9099`\n\n   12. **Which port do you want to use for the firestore emulator?**\n       _Response_: press `Enter`; Use the default port `8080`\n\n   13. **Which port do you want to use for the storage emulator?**\n       _Response_: press `Enter`; Use the default port `9199`\n\n   14. **Would you like to enable the Emulator UI?**\n       _Response_: type `y`\n\n   15. **Which port do you want to use for the Emulator UI (leave empty to use any available port)?**\n       _Response_: press `Enter` or type `4000`\n\n   16. **Would you like to download the emulators now?**\n       _Response_: type `y`\n\n**Note:** You might not meet the same questions as listed in the order above, I might missed some questions.\n\n### Recommended VScode extension\n\nThe following VScode extension is recommended to install to provide a better developer experience (DX) and streamline your development.\n\n- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)\n- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)\n- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)\n- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)\n- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)\n- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)\n- [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html)\n\n## License\n\nThis project uses [Mozilla Public License Version 2.0](https://www.mozilla.org/en-US/MPL/2.0/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falstonchan%2Fapexcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falstonchan%2Fapexcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falstonchan%2Fapexcode/lists"}