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