https://github.com/okkibro/anti-bubble-app
A MEAN Stack (Mongo, Express, Angular, Node) application that teaches children about filter bubbles.
https://github.com/okkibro/anti-bubble-app
angular application express material-design mean-stack mongoose nodejs
Last synced: about 1 month ago
JSON representation
A MEAN Stack (Mongo, Express, Angular, Node) application that teaches children about filter bubbles.
- Host: GitHub
- URL: https://github.com/okkibro/anti-bubble-app
- Owner: okkibro
- License: apache-2.0
- Created: 2020-09-01T20:15:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T04:26:54.000Z (over 2 years ago)
- Last Synced: 2023-03-07T01:06:46.007Z (about 2 years ago)
- Topics: angular, application, express, material-design, mean-stack, mongoose, nodejs
- Language: TypeScript
- Homepage:
- Size: 74.1 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Anti Bubble App
### Documentation
Documentation is hosted on the GitHub Pages website belonging to this repository (can be visited at https://okkibro.github.io/anti-bubble-app/). The
documentation is exclusively for the front-end of the app (about 85% of the code) and is divided into 4 main sections,
which correspond to the 4 folders found in the ```./src/app``` folder of the app. The folders are as follows:
+ ```Components``` - TypeScript components describing all the pages/components/classes of the app.
+ ```Models``` - TypeScript representations of all custom classes/enums used in the app, based on their MongoDB back-end counterparts.
+ ```Services``` - TypeScript services mainly used for HTTP requests for communicating with the Node.js/Express back-end.
+ ```Shared``` - Remaining files/services/functions used by the app.
### Generating TypeDocs
All ```*.ts``` files in the ```./src/app``` folder of the project have TypeDoc comments.
To automatically generate docs use the ```typedoc --options typedoc.json``` command after having merged the new code into the ```gh-pages``` branch and
having checked out that branch. After pushin the new docs to the repository, the GitHub Pages will automatically rebuild and incorporate the new changes.
Make sure the ```_config.yml``` file in the root of the project is also located in the root of the by TypeDoc generated ```./docs``` folder,
otherwsie GitHub Pages will not work.
### Folder structure
+ **/src**: *Angular app created using ```angular/cli```.*
+ **/database**: *Contains mongoose Schemas*
+ **/server**: *Files to be used on server-side*
* **/routes**: *Declared routes to be imported on ```index.js```*
+ **/index.js**: *File that is used to start the node server*
### Prerequisites
+ **[Node.js & npm](https://nodejs.org/en/download/)**: *Please be sure you have installed Node.js and npm module on your computer before running the application*
+ **[MongoDB](https://www.mongodb.com/download-center)**: *Download & Install MongoDB, and make sure it's running on the default port (27017).*
+ **[AngularCLI](https://cli.angular.io/)**: *Is used to build front-end application. Use [npm install -g @angular/cli] to install this*
### First time usage
+ Clone repository from https://git.science.uu.nl/breaking-bubbles/anti-bubble-app.git
+ Can be done by using the *git clone [url]* function with **[Git](https://git-scm.com/)**
+ Acquire the ".env" file from the secret holder and add this to the root of the application
+ Be sure you have started MongoDB service before running the application
+ Navigate to project folder
+ Run ```npm install``` on your folder
+ Run ```ng build``` on here to generate Angular necessary files. Output files are by default created on ```/dist``` subfolder
+ Now run ```node index.js``` This is the last step and if everything goes right, server will start listening for requests
+ You can also install **[nodemon]** (```npm install -g nodemon```) to have auto refresh when working on the backend
+ When you work on the frontend and you want auto refresh use ```npm start```
+ You can open your browser and navigate to localhost:4200 to see if application works
### Normal usage
+ Be sure you have started MongoDB
+ Navigate to project folder
+ Run ```npm start```
+ Open browser and navigate to localhost:4200
### Running test locally
+ Run ng test --code-coverage --browsers=Chrome
+ Updates automatically on save
### Branches
#### Hot Fix
+ git checkout master
+ git checkout -b hotfix_branch
** work is done commits are added to the hotfix_branch*
+ git checkout develop
+ git merge hotfix_branch
+ git checkout master
+ git merge hotfix_branch
#### Feature
+ git checkout master
+ git checkout -b develop
+ git checkout -b feature_branch
** work happens on feature branch *
+ git checkout develop
+ git merge feature_branch
+ git checkout master
+ git merge develop
+ git branch -d feature_branch