Contents

• Overview
• Demo
• Development Philosophy
• Stack
• Configuration
• Build
• Deploy
• Test
• Contribute
• Licence
• Major Version History
• Features To Do

Overview

Built as a platform for distributing information across large families, this application packs a handful of cool features. It was developed using Angular and employs Firebase tools heavily. It features an address-book page, where users can view, add, and update contact information. It also features a calendar, for viewing and managing birthdays/anniversary data, along with a chat page to function as a message board. Both calendar and contact data can be printed, leveraging jsPDF on the code side. A photos component displays user-uploaded images. Three tiers of user privileges, along with a confirmation-prompt module, ensure data isn't altered accidentally. Users with super privileges can visit the admin page to edit user information, or to delete a user. This app is a work in progress, and new features are still being added.

Demo

LeCoursville.com

Development Philosophy

I come from a very large family on my mother's side: the LeCours family. She had 13 siblings, who bought 42 first-cousins, who are now joined by dozens more from the next generations. Since I was young, my Mom and I would annually print a family calendar containing birthdays and anniversaries, along with a booklet containing contact info for each family member. These distributions were always, and continue to be, a test of my technical prowess. Hence, in 2018, I thought it was time to migrate that data to the web, so we could keep it updated in real time. Since these tools are meant for users of all ages, keeping them simple and easy-to-use was my primary goal. In an effort to keep the site styled consistently, I built it using Angular Material from the start. I designed it using a mobile-first approach, so all pages render nicely of devices of any size. I'd been wanting to experiment with using Firebase tools in lieu of a back-end, which I accomplished here using their Auth, Hosting, and Realtime Database modules. The result is a clean and simple interface, with production-grade security of the DB side. This site was, and continues to be, a joy to build and maintain.

Stack

• Angular
• Angular Material
• TypeScript
• Firebase Realtime Database
• Firebase Hosting
• Firebase Authentication
• SCSS
• Bootstrap
• RxJS
• jsPDF

Configuration

/src/environments/environment.ts

1. Create enviroment.ts in /src/environments/. a. For Production, create enviroment.prod.ts in /src/environments/.
2. Copy the following object into environment.ts.
3. Populate values with details from your Firebase account.

export const secrets = {
  production: IS_PRODUCTION,
  firebaseConfig: {
    apiKey: 'API_KEY',
    authDomain: 'AUTH_DOMAIN',
    databaseURL: 'DATABASE_URL',
    projectId: 'PROJECT_ID',
    storageBucket: 'STORAGE_BUCKET',
    messagingSenderId: 'MESSAGE_SENDER_ID',
  },
  googleApiKey: 'API_KEY',
  promotedRoute: 'PROMOTED_ROUTE',
};

Build

Local

• ng serve

Production

• ng build --configuration=production

Test

ng test

Deploy

Select an Environment

• firebase use --add
  • Select:
    • lecoursville for Production
    • lecoursville-dev for Test

Deploy to the Selected Environment

• firebase deploy

Contribute

If you have feature suggestions, please contact me here or at [email protected]. If you'd like to submit a pull request, please feel free and I'll merge it at my earliest convenience!

License

This project is provided under the MIT licence and I hereby grant rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software without limitation, provided the resulting software also carries the same open-source licensing statement.

Features

Calendar

• View birthdays and anniversaries by date via calendar GUI
• Print calendars for any year
• Add new calendar events [Admin Only]

Contacts

• View contact info
• Search contact info by string
• Sort contact info by family
• Add or edit contacts [Admin Only]

Chat

• Post messages to a common board
• Attach documents of any type
• Reply to a message
• Like a message
• Edit existing message [Original Poster or Admin Only]

Photos

• View and upload family photos

Lecoursville

Commands

Run the 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.

Run Unit Tests

• Run ng test to execute the unit tests via Karma.

Run End-to-End Tests

• Run ng e2e to execute the end-to-end tests via Protractor.

Deploy a Build

Build for Production

• ng build --configuration=production
  • The build artifacts will be stored in the dist/ directory.

Deploy via Firebase

Select Environment

• firebase use --add
  • Select:
    • lecoursville for Production
    • lecoursville-dev for Test

Deploy to the Selected Environment

• firebase deploy

Major Version History

24.3.17

• Minor bug fixes to ExpressionsComponent
  • Prevent Random mode from being resorted on filtration in Expressions component.
  • Ensure Sort-By and arrow buttons remain on the same line in ExpressionsComponent.
  • Add shouldResort boolean to getItemsToDisplay in SortSettingsForExpressions.
  • Remove superfluous methods from ExpressionComponent.
• Prevent re-randomzation on filtration from ExpressionsComponent.
• Clear query params from onShowAll in ExpressionsComponent.
• Change ArrayServiceshuffle.shuffle() algorithm to avoid top-of-array bias.
• Add Promoted-Route navigation.
  • Add isSignedIn method to AppComponent.
  • Add NavigateToPromotedRoute to RoutingService.
  • Navigate to promoted route from AppComponent when the user is already signed in.
  • Navigate to promoted route from AppComponent after successful user registration.
  • Prevent unintentional navigation to promoted route.
• Fix button styling in AdminMediaUpload forms

24.3.14

• Resolve add-calendar-event bug.
  • Add default values to RecurringEvent constructor
  • Add card to displayedEvents on add form AdminCalendarComponent.
• Add confirmation dialog on delete of calendar event.
• Adjust mat-card margins across the project.
• Adjust card styling in AdminCalendarComponent.
• Enhance styling across AdminMedia components
• Add dialog to better explain getShareableLink functionality.
• Standardize Admin button styling between UserEdit and CalendarEdit components.
• Add pointer cursor to calendar-arrow-button.

24.3.3

• Upgrade to Angular 17.
• Add ExpressionsComponent with associated functionality.
• Abstract MessageComponent from ChatComponent for inheritance from ExpressionsComponent.
• Resolve no-inputs bug after 1st auth flow.
• Add noindex tag to block search crawlers.
• Add Not Living toggle to calendar.
• Improve SortSettings implementation and consume from AdminCalendarComponent, AdminUsersComponent and ExpressionsComponent.

22.5.25

• Upgrade to Angular 12.
• Restructure project to put all components at the same level.
• Add bulk-upload tooling to Admin.
• Add GA analytics logging functionality.
• Restyle main element of CalendarComponent for enhanced printability.
• Create generic Media models and components.
• Add AudioComponent with associated functionality.
• Add VideoComponent with associated functionality.

19.3.10

• Add Admin functionality.
• Add download functionality for PhotosComponent.
• Resolve bugs discovered during testing.
• Refactor components from initial build.

18.12.22

• Initial build.
• Establish app styling.
• Build Auth flow.
• Add ContactsComponent with associated functionality.
• Add PhotosComponent with associated functionality.
• Add ChatComponent with associated functionality.
• Add CalendarComponent with associated functionality.

Features TODO

• Edit name
• Edit event mobile styling (dialog width)
• Contact edit button styling
• Blank message validation
• New contact edit mode
• Bulk photo delete
• Photo comments
• Upload component
  • Chat message becomes first comment
• Fix message nested reply pattern
• lightgallery component
  • Photos
  • Chat
• Cancel button for Sort By Family
• File input component
• PDF print-from-html
• IE Chat Bug
• Confirm prompt instances
  • Upload photos
  • Delete photo
  • Post message
  • Delete message
  • Restore message
  • Sign out
  • Add contact
  • Create event
  • Delete event
• Photo lightbox labels
• Name above sign out button
• [-] Label Photos
• Integrate GA
• zlib warning
• Chat photo in message
• Admin tools (super user)
• Photos upload progress bar
• Photos click lightbox with zoom
• Photos Sortability
• PhotoBy
• DB Rules
• IE Compatibility
• Calendar Cell Dialog always show title
• Fix Birthdays
• Caching
• Extend years in photos-edit component
• Add circa feature to photos-edit component
• Opt-in flow, email only
  • Collect name at time of opt-in
• Restore deleted message
• Deceased functionality
• Calendar event editability (Admin)
• Upload calendar data to FireBase RTD
• Endless scroll deletes message
• Chat delete if no replies
• Label chat icons
• Message sticky
• Only Email option (test across browsers & devices)
• Multiple calendar years should be available[Print PDFs from FTM when home]
• Calendar should be uploadable
• Contacts print should open in hidden iframe
• Edit contact Labels
• Add isSaved to message
• Fix name prompt (chat.component)
• Fix chat naming conventions
• Admin can edit any message
• Chat message cancel deletes existing message
• Chat should be sorted newest first
• All typescript declarations