/DeLorean-v2

A Professional Template for GDG DevFests

Primary LanguageTypeScriptMIT LicenseMIT

DeLorean Project - GDG DevFest Website Template

This project was generated with Angular CLI and utilizes Firebase for Database, Storage, and Hosting to create a fully functional and customizable template for your Google Developer Group's DevFest. This project has been designed to continue to be your DevFest website solution without having to create a new site or Firebase project every year. Simply update the Firebase node in the config and the site resets awaiting your next year's DevFest data. All the while preserving your previous year's data in the same Firebase project.

Features

  • Simple site config setup
  • Simple event schedule management
  • Simple sponsor management
  • Simple ticket management
  • Simple speaker management
  • Featured speakers section
  • Featured venue section
  • "My Schedule" for Attendees
  • Session rating (coming soon!)

Table of Contents

Getting Started

  • Install Angular CLI (npm install -g @angular/cli).
  • Install Firebase Tools (npm install -g firebase-tools).
  • Clone this repository: git clone https://github.com/neojato/DeLorean-v2.git.
  • Run npm install from the project root.
  • Create a new Firebase project (if you don't have one already).
  • Grab a Google Maps API Key for your project.
  • Run firebase login and then firebase init and link to your Firebase Project.
    • Select Database, Functions, and Hosting
    • Use default for Database Rules
    • Type dist for your public directory
    • Respond yes to configure as a single-page app
  • Copy firebase.config.ts.template to firebase.config.ts and populate fields with your Firebase and Google Maps Keys.

Contributing

This project is open for contributions, suggestions, and ideas. Feel free to submit a PR and/or create an Issue with bugs, suggestions, and ideas. Stars are always welcome too!

See list of contributors.

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.

Managing Data

Site Setup

  • From the Firebase Console, go to "Authentication" and enable the Google sign-in method.
  • Log into your site using your Google account.
  • From the Firebase Console, go to "Authentication" and copy the User UID for your email address.
  • From the Firebase Console, go to "Database" and create a parent node called admins then add your copied User UID as the key with a value of true.
  • (Optional) Replace hero.png and devfest.png with your own image of Your City or DevFest.
  • (Optional) Create a Google Analytics property and add your GA Tracking ID to line 41 in index.html.

Site Config

  • Click the Profile dropdown in the navbar and select "Site Config" to fill out all the details for your DevFest.
  • NOTE: The uploaded venue image is stored in Firebase Storage if you need to retrieve it later.

Ticket Config

  • Click the Profile dropdown in the navbar and select "Ticket Config" to create ticket boxes to advertise levels available for purchase to your DevFest.
  • NOTE: The tickets auto-appear in a section on the homepage but can only be managed from this admin page.

Speaker Management

  • Click the "Speakers" link in the navbar and then click on the "Create Speaker" button to add a speaker.
  • Rinse and repeat for however many speakers you have for your event.
  • Check the "Featured" option to have that speaker also display on the homepage (it is recommended to set only 4 as featured speakers to maintain styling at this time).
  • NOTE: The uploaded profile images get stored in Firebase Storage if you need to retrieve them later.

Schedule Management

  • Click the "Schedule" link in the navbar and then click on the "Create Section" button to add a section.
    • This allows you to break your schedule into sections like "Breakouts - 10:00 AM" and "Lunch".
  • Click on the "Create Session" button to add a session.
  • NOTE: It is required to have section(s) created in order for sessions to appear!
  • NOTE: It is recommended to have added the speaker prior to adding their session.
  • NOTE: You can Edit/Delete the session from the session's detail page.

Sponsor Management

  • Click the "Sponsors" link in the navbar and then click on the "Create Level" button to add a level.
    • This allows you to break your sponsors into customized tiered levels like "Gold", "Silver", and "Bronze".
  • Click on the "Create Sponsor" button to add a sponsor.
  • NOTE: It is required to have level(s) created in order for sponsors to appear!
  • NOTE: The levels and sponsors auto-appear in a section on the homepage but can only be managed from the Sponsor page.

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.

Simple Production Build

Run sh tools/build.sh to generate an optimized production build of the project.

Deploy

Run firebase deploy to deploy the dist/ directory to Firebase Hosting.

Simple Production Deploy

Run sh tools/deploy.sh to generate an optimized production build and deploy the dist/ directory to Firebase Hosting (along with database rules & Cloud Functions).

Profit!

Congrats on launching your DevFest website!

Who uses the template?

Please let me know if you used this template and will get you added to the list!

Name Name Name
GDG Kanasas City

License

Project is published under the MIT license.
Feel free to clone and modify repo as you want, but don't forget to add reference to original authors, thanks!

The DeLorean Project is not endorsed and/or supported by Google, the corporation.