CAS FEE 2017 Projektarbeit 2
birthhood is an angular application which allows the pregnant female user to find a suitable birth place for giving birth. The birthplaces are rated by best practice experience guidelines and give an overview around 5 main birth experience criteria (umgebung, …).
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Clone the master branch to your desired folder. This project requires node and npm installed
git clone https://github.com/mauricenaef/birthhood.git
birthhoods backend is based on google firebase firestore. If you would like to run the application, you need to have a corresponding firebase account and project set up. Make sure to enable login with email and password for your firebase project.
To set up the app for your firebase backend, amend the src/environments/environment*.ts file accordingly (firebase project as well as service-key).
To set up your firebase project with the needed firebase functions and security rules, run
firebase deploy
To initialize your firebase backend with some sample data, follow these steps:
- configure your firebase-account and project in utils/firebase_uploader.js
- configure your google-maps key in utils/firebase_uploader.js
cd into utils and run
node firebase_uploader.js
Make sure you are cd into the main project folder and install npm packages
npm install
Once done, serve the application
cd birthhood-app
ng serve
Your application should now be running under http://localhost:4200/
Further configuration of the application can be set in src/app/config/
- Geolocate user
- Browse birthplaces on the map
- Search birthplace with live search
- Interact with carousel
- View birthplace details
- Sign up
- Log in with credentials
- Reset password
- Add new birthexperience
- Delete own birthexperience
- Social login
- Add name on sign up
- Edit profile
- Sign up for birthplace owners
- Edit for birthplace owners
Unit test done with Karma and Jasmine
cd birthhood-app
ng test
Extensive user testing with the invision Prototype has been done. Pictures are located in the assets/User Testing Proof Folder
The LIVE Styleguide is available under birthood styleguide and is created with comment notes in the respective SCSS files. The styleguide follows Atomic Design Rules Atomic Design. The styleguide is sectioned into following parts:
- Nuclides (All colors and font rules go here)
- Atoms (Basic building blocks)
- Molecules (Combination of atoms)
- Structures (Combination of molecules)
Styleguide depends on the apps final CSS file to display all designs. To generate and deploy the styleguide from start to end follow these steps:
Create complete-styles.css
cd birthhood-app
gulp sass
Generate local styleguide in static folder
cd birthhood-app
nucleus
Deploy to firebase to subdomain
cd static
firebase deploy
For live deployment to firebase and birthhod.org
First build the production folder to deploy from with the AOT compilation
cd birthhood-app
ng build --aot --prod
Then upload files to server
cd birthhood-app
firebase deploy --only hosting
Alternatively you can serve the AOT build using node.js. To do so, run
node server.js
Your AOT build will now be running on http://localhost:3000/
- Angular - Angular
- Angular CLI - Angular CLI
- Firebase - Firebase Google
- Google Maps - Google Maps API
- Chart.js - Chart.js
- Owl Carousel - owl.carousel
- ngx-toaster - Toaster
- Foundation 6 - Foundation for Sites Flex Grid
- Gulp - gulp
- nucleus - nucleus styleguide
- Live Site - Live Site
- Styleguide - Live Styleguide
- Invision Prototype - Prototype used to make User Tests
- Marcel Maurice Naef - Project Owner - mauricenaef
- Tobias Brunner - Project Owner - t1brunne
This project is licensed under the MIT License - see the LICENSE.md file for details
- Hat tip to Andrea Glauser for providing the initial data and inspiration to the project
- Thanks to all the guys at SO for having had the same issues we had