gdg-x/aura

Web App for Community Management | Site

Aura v3

Standard Web App for Tech Communties.
Demo
Version: 3.1.2

Show some ❤️ and ⭐ the repo to support the project

If you are using Aura, Kindly fill this form for Aura Web App Directory

Overview

Aura is the Web App that helps you to mange the Tech Communities like GDGs, DSCs or any other tech communities with Aura Admin.

Features

Feature	Description
Fast and optimized	PWA on Lighthouse
Works offline	Can work offline
Dark/Light Theme Mode	Light/Dark Theme Mode
Mobile first	Mobo Friendly Web app can be installed as a native app on your phone
SEO optimized	index all content and get to the top in search results
Easy in management	Easy in Management by using Aura Admin
Usability	Any Tech Communities can use
Custom Event Page	Now No need to create the website for XYZ event
Public shareable URL for Team & Speakers	Team member public URL for Self Branding and Public Speaker Directory & Public URL for Promotion

Contributors

Maintainer:

1. Vrijraj Singh
2. Bharat Agarwal

Getting Started

NOTE: Kindly Setup Aura Admin first

1. Fork this repository & Aura Admin (Important) and clone both repo locally 1 To Setup Aura Main follow this and to setup Aura Admin
2. Use same Firebase account project for both Admin & Aura Main
3. Setup Environment
   • Install Node.js (v8.9.4 - v12.13.0)
   • Install vue cli: npm install -g @vue/cli
4. Install project dependencies: npm install
5. Kindly use same firebase project Aura Admin for Aura Main as well
6. In the Firebase project console dashboard. Click on create new web app
7. Go to Firebase project Settings and then General Settings Tab
8. Scroll down and go to your app section under Firebase SDK snippet
9. Now click on the config
10. Copy the code which looks similar to the below sample

    apiKey: "Axxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "1:xxxxxxxxx:web:xxxxxxx"

11. Now goto project code and inside src/config/ update the firebase.js file with these codes
12. Update the field name in vue.config
13. Run locally
    • npm run serve
    • For the First Time you will see a text Either Your Internet is not Working or Site is not Configured
14. For the production: npm run build and then one dir will be created dist
15. For testing: npm run test

Deployment on Firebase

1. Install required tools for performing Firebase deployment
   • Install Firebase CLI: npm i -g firebase-tools
2. Login into Firebase CLI using the following command - firebase login
3. Open Terminal/CMD/Powershell in the root directory of your clone of aura-admin repository.
4. Now type firebase login command in your Terminal/CMD/Powershell
5. Update the Firebase Project ID in .firebasesrc file. This value should match the project ID in your Project Settings of the Firebase project you created in the previous section.
6. Go to the Firebase Console Dashboard and Click on Hosting in the left navigation.
7. Click on Get Started
8. Click through all steps till you’re taken to the Hosting page in the console.
9. You’ll be provided with a ready domain with your project ID. It should look like - <project-id>.web.app or <project-id>.firebaseapp.com
10. Copy the sub-domain name of the URL provided. In this case, it will be the project ID. However, to be precise, you have to copy the part before .web.aap or .firebaseapp.com. This is your Site ID
11. Update Firebase.json file, set the site key to Site ID

        {
            "hosting": {
                "site":"Your_Firebase_Hosting_id",
                "public": "dist",
                "rewrites": [ {
                    "source": "**",
                    "destination": "/index.html"
                } ],
                "ignore": [
                    "firebase.json",
                    "**/.*",
                    "**/node_modules/**"
                ]
            }
        }

12. In your terminal at the root directory of the project, build and deploy using the following command
    • firebase deploy

Documentation

1. Full documentation.

Technology Stack

• VueJS
• Vuetify
• Firebase
• Service Worker & PWA
• Workbox

Contributing

Awesome! Contributions of all kinds are greatly appreciated. To help smoothen the process we have a few non-exhaustive guidelines to follow which should get you going in no time.

Using GitHub Issues

• Feel free to use GitHub issues for questions, bug reports, and feature requests
• Use the search feature to check for an existing issue
• Include as much information as possible and provide any relevant resources (Eg. screenshots)
• For bug reports ensure you have a reproducible test case
• A pull request with a breaking test would be super preferable here but isn't required

Submitting a Pull Request

• Squash commits
• Lint your code with eslint (config provided)
• Include relevant test updates/additions
• Pull requests must be made against develop branch. Any other branch (unless specified by the maintainers) will get rejected.

View Website Built with Projects

Community Name	Web App Link
GDG Jalandhar	View Now
DSC NSEC	View Now
GDG Konya	View Now

Facing Any Problem or need any Help?

Write us in issues section. Our team will try solve your issue within 10-12 hours.

aura's Issues

Firestore Issue after Enabeling enablePersistence()

Describe the bug
I enabled firestore offline caching using the following snippet in firebase.js
firestore: firebase.firestore().enablePersistence({synchronizeTabs: true}),
Offline data is now working but when I login to admin panel to send push notifications, it doesnot populate saved notifications list from firestore,
It gives the following error in the console

vue.runtime.esm.js?2b0e:1888 TypeError: firebase__WEBPACK_IMPORTED_MODULE_4_.default.firestore.collection is not a function
at VueComponent.loadData (PushNotifications.vue?d852:325)
at VueComponent.created (PushNotifications.vue?d852:340)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4213)
at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5002)
at new VueComponent (vue.runtime.esm.js?2b0e:5148)
at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283)
at init (vue.runtime.esm.js?2b0e:3114)
at merged (vue.runtime.esm.js?2b0e:3301)
at createComponent (vue.runtime.esm.js?2b0e:5972)

To Reproduce
Steps to reproduce the behavior:

1. set firestore: firebase.firestore().enablePersistence({synchronizeTabs: true}), in firebase.json
2. try to fetch old saved notifications from firestore in admin management
3. check the browser console
4. See error

Expected behavior
Technically it should fetch data of notifications from firestore as it is populating data of the events, team members from firestore without any issue

Expand Code of Conduct on About page

Boomerang has a pretty extensive CoC that could be used/referenced.

The template can be found here.

An example can be found here.

[Admin] Manage Events Page

Admin can manage the Events data:

1. See all the Events (Past/Upcoming)
2. CRUD in Features Events data
3. CURD in Event Data for custom Event Routing
   3.1 CURD Events Data

Cloud Messaging Error

FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:8080/firebase-cloud-messaging-push-scope') with script ('http://localhost:8080/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration).

I cloned the devv#2 branch and added my firebase config to it. All other firebase services like admin login, firestore is working but FCM is not generating token when i try to click on bell icon.
It gives above error. I have generated server key and added it to the notification,vue file's script but still something is broken.
Am I missing something?

[Admin] Manage Speakers Page

Admin can

1. Manage the Speaker data (CURD)
2. Manage the status of the Speaker and profile URL for speaker
   .../speakers/vrijraj_singh

Field:

   {
       "visibility":"true/false",
       "id":"first_name",
       "mbnumber":"number",
        "name":"Speaker_Name",
        "designation":"Designation",
        "company":{
            "name":"Google",
            "url":""
        },
        "bio": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis dolorem numquam modi libero. Quae itaque eligendi asperiores esse neque placeat recusandae ipsum, veritatis quasi corporis omnis? Tempora minima esse exercitationem.",
        "city":"Goa",
        "country":"India",
        "image":"",
        "sessionId": [205],
        "social":{
            "facebook":"",
            "twitter":"",
            "linkedin":"",
            "github":"",
            "website":"",
            "medium": "",
            "email": ""
        }
    }

Fix: Speaker Page not found for speaker info

Speaker Page not found for speaker info

App not loading in Safari: Firebase messaging is not supported in Safari browser

firebase/firebase-js-sdk#1260

This is causing issues in using Safari and so should be resolved prior to MVP

Template Creator

Can the template builder section be removed?

Consider using JSON-Schema for managing and editing component/project data

Looking at something like:

• https://github.com/jarvelov/vue-form-json-schema
• https://github.com/vue-generators/vue-form-generator

may help streamline the 'admin' and 'group' and 'events' interfaces.

Thoughts?

Create project and issues for v2 tasks

To help us coordinate the collaboration on the v2 work we should create a project and open a milestone for the v2 work that needs to be completed.

Github/npm security audit issues need to be addressed

Here's the following output that GitHub is reporting for this repo (NPM's audit results should be similar):

gdg-x / aura
Known security vulnerabilities detected

Dependency
webpack-bundle-analyzer	
Version
< 3.3.2	
Upgrade to
~> 3.3.2
Vulnerabilities
WS-2019-0058 Moderate severity
Defined in
package-lock.json	
Suggested update
#32
Dependency
axios	
Version
<= 0.18.0	
Upgrade to
~> 0.18.1
Vulnerabilities
CVE-2019-10742 High severity
Defined in
package-lock.json	
Suggested update
#28
Dependency
js-yaml	
Version
< 3.13.1	
Upgrade to
~> 3.13.1
Vulnerabilities
WS-2019-0063 High severity
WS-2019-0032 Moderate severity
Defined in
package-lock.json	
Suggested update
#30
Dependency
lodash.defaultsdeep	
Version
< 4.6.1	
Upgrade to
~> 4.6.1
Vulnerabilities
CVE-2019-10744 Critical severity
Defined in
package-lock.json	
Suggested update
#31
Dependency
lodash.template	
Version
< 4.5.0	
Upgrade to
~> 4.5.0
Vulnerabilities
CVE-2019-10744 Critical severity
Defined in
package-lock.json	
Suggested update
#35
Dependency
lodash	
Version
< 4.17.12	
Upgrade to
~> 4.17.12
Vulnerabilities
CVE-2019-10744 Critical severity
Defined in
package-lock.json	
Suggested update
#33
Dependency
eslint-utils	
Version
>= 1.2.0 < 1.4.1	
Upgrade to
~> 1.4.1
Vulnerabilities
CVE-2019-15657 Critical severity
Defined in
package-lock.json	
Suggested update
#29
Dependency
mixin-deep	
Version
< 1.3.2	
Upgrade to
~> 1.3.2
Vulnerabilities
CVE-2019-10746 High severity
Defined in
package-lock.json	
Suggested update
#34
Dependency
set-value	
Version
< 2.0.1	
Upgrade to
~> 2.0.1
Vulnerabilities
CVE-2019-10747 High severity
Defined in
package-lock.json	
Dependency
serialize-javascript	
Version
< 2.1.1	
Upgrade to
~> 2.1.1
Vulnerabilities
CVE-2019-16769 Moderate severity
Defined in
package-lock.json	

Either Your Internet is not Working or Site is not Configured

Hello,

I follow all steps, but i aways have the error: Either Your Internet is not Working or Site is not Configured for local and production in firebase.

Can you help me ?
Thank you in adavance

Push Notification

Create an admin view for sending push notification to all subscribed users with the field

1. Tile
2. Body
3. Image
4. Link

Show YouTube Field in Event Page Template

[Admin] Manage Config Data View Page

In Admin Panel to

• admin can manage the Config(community data) like
  With

1. Community Details
2. Footer Details
3. Partners

Make seasonal feature component customizable

Currently https://github.com/gdg-x/aura/blob/master/src/components/home/wtmInfo.vue is hard coded to feature WTM. But every few months there is another seasonal feature like Cloud NEXT Extended, I/O Extended, DevFest, etc. It should be possible to define the text and image for this component in a config file so that the featured seasonal activity could be updated easily.

2 Navigator on Tablet

Minor Bug

When I am opening the website on Tablet. I am getting two Navigator, Side Nav as well as top nav. Remove one of them because both are doing the exact same links.

Firebase and Basic info setup

In https://github.com/gdg-x/aura/blob/master/README.md#getting-started, it just mentions "Update Firebase Web Setup & Basic Info".

1. It would be nice to have the Firebase info in here (at least I don't see it) with the API keys and specific names removed.
2. It would be nice to have some additional information on how people should update the "Basic Info" as not everyone will be an experienced web developer

Unable to render upcoming events

Describe the bug
Vue error "Cannot read property 'name' of undefined" on upcoming events page.

To Reproduce
Visit https://gdgpos.com/events

Expected behavior
Should render upcoming wtm and study jam event.
WTM Event Meetup
Study Jam Event Meetup
GDG POS aura repo

Screenshots
Stack trace on Dev Server

Network tab in dev tools

Desktop:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

When click on event title on top toolbar, user not taken to homepage

When click on event title on top toolbar, user not taken to homepage
Is this expected?

Firestore Rule

While setting up aura and aura-admin, the firestore rules for both the projects are different. I am not exactly sure how to go with that. Need some help!

MeetupKey.json is no longer needed?

With https://github.com/gdg-x/aura/blob/master/src/config/key.js, it looks like https://github.com/gdg-x/aura/blob/master/src/assets/data/MeetupKey.json is no longer needed or used?

[Admin] Social Wall Page

Admin can add the hashtag in TextField and see the list of tweets/posts on the wall for the event

Add a sponsor's section to home page

For many chapters, featuring sponsors on their home page (landing page) is a requirement. It would be nice to add this and allow it to be customized.

[Admin] Manage Team Page

Adamin can

1. Manage the Team data (CURD)
2. Manage the status of the team and profile url for team
   .../team/vrijraj_singh

There is a text that mention Indian as destination of GDG effort

I have modified it for global in GGD Gran Canaria version in order to avoid locationism of the messages.

[Deprecate] Meetup support

Deprecating meetup support, as APIs are not stable and causing lots of issues

Firebase Cloud Messaging not supported in Safari Browser

Clicking on the notification icon shows the following message:

Tested on: Apple's Safari Browser
Version: 13.x and 14.0

Allow customizing the 'What we do" section

It currently has icons for Angular, Google Cloud, Firebase, Android, Tensorflow, and Assistant.

1. It would be nice to be able to customize this list per chapter.
2. The icons should have tooltips and alt text that is customizable.

Documentation: Admin Panel User Setup

Documentation needs to be updated about the creation of users to access the admin panel for the purpose of managing team members, speakers, insight analysis, push notification triggering.

Security Risk

apiKey,
authDomain,
databaseURL,
projectId,
storageBucket,
messagingSenderId,
appId

are visible here.
Kindly fix this issue as it seems to be a High Security Risk. This information should be kept confidential.

Solution:

• Create a separate file called firebaseConfig.js.
• Add your details

const firebaseConfig = {
  apiKey: "Axxxxxxxxxxxxxxxxxxx",
 authDomain: "xxxxxx.firebaseapp.com",
 databaseURL: "https://xxxxxxxx.firebaseio.com",
 projectId: "xxxxxxxxx",
 storageBucket: "xxxxxxx.appspot.com",
 messagingSenderId: "xxxxxxxxxxx",
 appId: "1:xxxxxxxxx:web:xxxxxxx"
}

module.exports = firebaseConfig

• Import file firebaseConfig.js in firebase.js
• Add following line of code in .gitignore file in root directory.
  firebaseConfig.js
• And Commit, issue will be solved!

Happy Hacking! :)

CORB Issue

When I tried to add use photo url in admin panal or in the team.json file it gives CORS issue.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Admin Panel-> New Team Member-> Add profile Image URL'

2. Click on 'Team Tab on the webpage, it woll not render the photo'

3. See error in the console.
   Error says,
   Request been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Same happened when tried added image in local JSON file for team data.
Finally ran Apache on Local Machine and added local url and ran npm run serve on same but got same issue.

Null / missing data for components

When a component - such as an event - does not have the full data - the component should still render. At the moment, when data is missing the site fails to compile.

If possible allow for missing data, especially on things that could reasonably not be needed - such as a physical location or map data for a fully online event.

Upgrading to Vuetify 2

Is your feature request related to a problem? Please describe.
Current Vuetify version is v1.5.2
Latest being v2.0

Describe the solution you'd like
It would require to upgrade the project to use v2.0
Upgrade guide here

Describe alternatives you've considered
We have to follow the upgrade guide

Deploying via Netlify

Steps to deploy on Netlify
It makes the deployment much easier to manage and comes with preview links when a PR is created.

I can update the documentation with the steps if that's okay?

Meetup API Key Revoked - Oauth2

Meetup did not support API Key more. Oauth2 is required now.
Have you able to have a look on it?

Feat: ADD Logo in drawer

Site is not able to fetch details from Meetup.

Description
Site is not able to fetch details from Meetup. It's because Meetup has updated its API usage. The client needs to be updated.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Events Page'
2. You will see a forever loading spinning wheel