An Angular PWA starter powered by Firebase and Angular.
- Angular 5.0
- 100 PWA Lighthouse Score
- Firebase Auth with Custom Data in Firestore
- CRUD Demos (Firestore & Realtime DB)
- File Uploads to Firebase Storage Demo
Stack
- Angular 5.0 + Angular Cli
- Angular Material
- PWA Support (service worker + app manifest)
- Firebase Firestore + AngularFire
- NgRX for state management
- Firebase Cloud Functions (resize images)
- Firebase Hosting (
firebase deploy
) - AOT + PRPL pattern
- Angular Universal
- Unit Testing + BDD using Jasmine & Karma
- Support for both NPM and Yarn
Functionality
- Firebase Auth (login with Facebook, Google or email)
- Expanded user profiles with custom data in Firestore
- Access camera or phone storage => Upload files to Firebase Storage
- Google Maps support and "use my location"
Core features
- Routing
- Auth guards for relevant sections
- CRUD for example entity types E.g. venue + event
- Listing for example entity type
- Details view for example entity types
- Filters for example entity types
- Basic search
- Basic pagination and/or infinite scroll
Views
- Login/Registration/Forgot
- User profile
- Settings
- Home screen: "Social update feed" (posts with user profile details e.g. profile image, user name, date added)
- Event Listing
- Event Details
- Location/Venue Listing
- Location/Venue Details
- Map with nearby events/venues (near me)
- Image Gallery
- Search (search results)
Nice to have
- Like feature
- Follow feature
- Add to Favourite
- Social sharing
- User Reviews
- Ability to add and edit entities in Firestore
- Ability to link entities in Firestore e.g. linking an event to a venue and automatically duplicate the data in both collections
- Ensure data is kept in sync across collections when editing
- Structure data in Firestore to take advantage of shallow queries for entity list view vs. entity details view
- Implement best practice Material Design components via Angular Material
- Best practice Angular form implementation whilst allowing for easy modififaction/extension
Other Consideratons
- Use realistic sample data
- Avoid being too generic, pick a specific niche that allows it to appear as an actual app
Create an account at https://firebase.google.com/
-
Enable authentication with email, Google and Facebook via console => Authentication => Sign in method
-
Enable Firestore under console => Database
-
Set database permissions to enable read/write access for authenticated users
-
git clone https://github.com/lifeonlars/angular-firestarter.git firestarter
-
cd firestarter
-
npm install
Create the environment files below in src/environments/
.
export const environment = {
production: false,
firebaseConfig: {
apiKey: 'APIKEY',
authDomain: 'DEV-APP.firebaseapp.com',
databaseURL: 'https://DEV-APP.firebaseio.com',
projectId: 'DEV-APP',
storageBucket: 'DEV-APP.appspot.com',
messagingSenderId: '123456789'
}
};
export const environment = {
production: true,
firebaseConfig: {
// same as above, or use a different firebase project to isolate environments
}
};
And finally ng serve