xiongemi / treehole-angular-firebase

Anonymous Discussion Forum creating using Angular and Firebase

Treehole Angular Firebase

A discussion forum using Angular as frontend and Firebase as backend:

This project was generated with Angular CLI version 9.1.9.

Tech Stack

• Frontend: Angular
• Component Library: ng-zorro-antd (Ant Design of Angular)
• Backend: Firebase, integrate using AngularFire
• Frontend Session: uuid
• Internalization: @ngx-translate
• State Management: NGXS
• CSS library: tachyons

Add Your Own Firebase Config

Create a file named firebase.config.ts under src folder. Add your own firebase config in this file, in below format

export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  projectId: '<your-project-id>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-messaging-sender-id>'
};

Commands

• run locally: npm run start
• webpack-bundle-analyzer: npm run build:stats and npm run analyze
• deploy to github: npm run deploy:github
• run production build locally: npm run build and http-server dist/treehole-angular-firebase/browser
• deploy to firebase hosting: npm run deploy:firebase
• ssr build (not working right now): npm run build:ssr and npm run serve:ssr

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Firestore Cloud Data Structure

Firestore Collections

• collections_bookmark posts
  • class post1
    • collections_bookmark likes
    • collections_bookmark dislikes
    • collections_bookmark comments

Firestore Posts Example

• collections_bookmark posts
  • class post1
    • id: "Ebd1BwdaNqniLCsy0xOb"
    • uuid: "e51d2784-b163-41af-9e66-0bbec811fc63"
    • title: "post title"
    • message: "This is a first line for a new Forum. \nThis is a second line for a new Forum."
    • language: "en"
    • createdAt: "2021-02-04T06:17:38.936Z"
    • likesCount: 3
    • dislikesCount: 4
    • commentsCount: 3
    • collections_bookmark likes
      • class like1
        • id: "L0svxEZDEiQEl2Djof1R"
        • uuid: "0fbfd447-49f5-4e2c-bbc7-bc8afb8a62a2"
        • createdAt: "2021-02-04T06:17:38.936Z"
      • class like2
        • ...
    • collections_bookmark dislikes
      • class dislike1
        • id: "niZDMC5yu9WBXW45p0Ny"
        • uuid: "0fbfd447-49f5-4e2c-bbc7-bc8afb8a62a2"
        • createdAt: "2021-02-04T06:17:38.936Z"
      • class dislike2
        • ...
    • collections_bookmark comments
      • class comment1
        • id: "AKAT7WHC8LApsS0y75h1"
        • uuid: "ba449189-d76a-4799-b1ce-490b0e5d5909"
        • comment: ":) :) :) :) :) :):) :) :)"
        • parentDocId: "Ebd1BwdaNqniLCsy0xOb"
        • createdAt: "2021-02-10T23:57:41.454Z"
        • likesCount: 1
        • dislikesCount: 1
          • collections_bookmark likes
            • ...
          • collections_bookmark dislikes
            • ...
      • class comment2
        • ...
  • class post2
    • ...