Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xiongemi/treehole-angular-firebase

Anonymous Discussion Forum creating using Angular and Firebase
https://github.com/xiongemi/treehole-angular-firebase

angular angularfire backend firebase firestore frontend

Last synced: 2 months ago
JSON representation

Anonymous Discussion Forum creating using Angular and Firebase

Awesome Lists containing this project

README

        

# Treehole Angular Firebase

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

![sreenshot](https://github.com/xiongemi/treehole-angular-firebase/blob/master/src/assets/images/screenshot.png?raw=true)

This project was generated with [Angular CLI](https://github.com/angular/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: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: ''
};
```

## 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](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

## 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
- ...