we-dance / platform

Community platform for dancers

WeDancePlatform

Community platform for dancers

Do you want to get a practical experience, learn to work in international team and participate in open source project?

Get Involved

Built with

• Nuxt.js – Vuejs framework, which is used as Static Site Generator.
• Tailwind CSS – utility-first CSS framework.
• Nuxt Composition Api – provides a way to use the Vue 3 Composition API with Nuxt-specific features.
• Firebase – used as Serverless framework with Firestore realtime database, authentication and cloud functions.
• Mailgun – used as an email delivery and tracking service.
• Sentry – monitoring platform to log exceptions and errors.
• Netlify – CDN, CI and Hosting provider, that deploys site on each commit.

Setup

1. Go to Firebase Console click Add project, enter any name, click Continue, uncheck Enable Google Analytics for this project, click Continue.
2. Under Get started by adding Firebase to your app click 3d icon (Web), enter name Web, uncheck Firebase Hosting, click Register app, copy generated firebaseConfig.
3. Go to Authentication, switch to tab Sign-in method, click Email/Password and enable both triggers (password and email link); enable Google.
4. Go to Cloud Firestore, click Create database, select Start in test mode, click Next, choose region eur3.
5. Transform firebaseConfig value (from step 2) to one line JSON. This tool might help you.
6. Clone this repository and open the project folder.
7. Copy .env.example file to .env file and set value of FIREBASE_CONFIG to one line JSON you got from step 5.

To activate all services and features see section Services below.

Run locally

1. Install nvm
2. Run nvm install 14
3. Run nvm use 14
4. Run yarn install
5. Run yarn dev

To activate all services and features see section Services below.

Deploy

Watch video tutorial.

Read How to deploy on Netlify?.

• Push your branch to github.
• Sign in to Netlify.
• Click New site from Git.
• Choose GitHub and select your repository.
• Select your branch.
• Build command: yarn build.
• Publish directory: dist.
• Click Advanced build settings and empty value for Functions directory as we don’t use Netlify functions.
• Click New variable and add all keys and values from .env file (URL and some other variables are set automatically).
• Click Deploy site.

To activate all services and features see section Services below.

Services

Activate only those services that you need. In most cases you don't need all of them.

Authentication for custom domains

• Go to Authentication, switch to tab Sign-in method find section Authorized domains, click Add domain and add new.

City auto-complete

• Enable Maps JavaScript API, Places API and Geocoding API in the Google Cloud Console.
• Enable Billing on the Google Cloud Project.

Mailgun

• Create mailgun account.
• Create domain and setup DNS.
• Create API key.
• Enable Pub/Sub, Scheduler, Build API in Google Cloud Console.
• Install Firebase-CLI locally and init project with firebase init.
• Add mailgun confguration to Firebase:

firebase functions:config:set mailgun.key="" mailgun.domain="" mailgun.host=""

• Deploy Firebase with firebase deploy.
• Setup hooks in Mailgun.
• Create firestore index (send test mail, see logs, find link to create index).

Contributing

We encourage you to contribute to WeDance!

We expect contributors to abide by our underlying code of conduct. All conversations and discussions on GitHub (issues, pull requests) and across wedance.vip must be respectful and harassment-free.

Remember that communication is the lifeblood of any Open Source project. We are all working on this together, and we are all benefiting from this software. It's very easy to misunderstand one another over asynchronous, text-based conversations: When in doubt, assume everyone within this project has the best intentions.

We are all humans trying to work together to improve the community. Always be kind and appreciate the need for trade-offs. ❤️

Reporting Issues

A great way to contribute to the project is to send a detailed report when you encounter an issue.

See issues or Create an issue.

Where to contribute

Documentation is almost always a great place to start contributing to a new project. WeDance is an Open Source, community-driven project. Therefore, providing and maintaining quality documentation is one of our most important jobs. You can find more information in our docs guide!

Refactoring, which involves improving the code without modifying behavior, is a great place to help out! Generally speaking, you can rely on existing tests to ensure that your refactor doesn't introduce any unexpected behavior. If an area isn't well tested, you might be asked to include a regression test with your refactoring PR. Refactors can touch many files, so we encourage breaking big changes into small PRs.

Fixing bugs is a super fast way to improve the experience for our users! When you're fixing bugs, we appreciate communication in a GitHub issue. If an issue exists, please claim that issue and link it in your PR, otherwise creating an issue is the best first step! Be sure to surround bug fixes with ample tests; bugs are magnets for other bugs. Write tests around bugs!

Building features requires a lot of communication, but we'd love to have your help with this too! Features tend to be subjective and might spur some debate. Be sure to create an issue for new features before getting started! If your feature involves design changes, including design mockups can be very helpful. As always, when in doubt, ask!

👉 Join our team on Slack

How to contribute

We'd love to see your pull requests, even if it's just to fix a typo!

However, any significant improvement should be associated to an existing feature request or bug report.

Getting started

• Setup project locally (see Setup).
• Make changes to code.
• Checkout new branch and commit your changes.
• Deploy to Netlify.
• Create a Pull Request and include a link to your Netlify demo.

Code Style

js, html, vue

As you might have noticed already, we are using ESLint to enforce a code standard. Please run yarn lint before committing your changes to verify that the code style is correct. If not, you can use yarn lint --fix to fix most of the style changes. If there are still errors left, you must correct them manually.

git

We use Conventional Commits. See examples of good commits and bad commits.

Tools

Code Editor: VSCode with following plugins:

• Prettier
• Vetur
• Tailwind CSS IntelliSense

Browser: Chrome with extensions:

• Vue.js devtools

Site structure

This site is a Nuxt.js application. See Directory Structure and official guide for more information. Also most of folders in this repository has a README.md file.

functions folder contains Firebase Cloud Functions.

The bottom line

We are all humans trying to work together to improve the community. Always be kind and appreciate the need for tradeoffs. ❤️

platform's Issues

Regular events

As Organiser I want to be able to select multiple days while creating events in order to create regular events.

Delete account

As a User I want to be able to delete account

Acceptance criteria

• Account settings have button Delete account
• Click on this button shows popup Confirm that you want to delete account by entering your username with input and buttons Confirm and Cancel
• Confirm button deletes profiles and account

Sort by current language

Show first profiles and events with a browser language

Filter as pills

As a User I want to see legend of icons that are used in the calendar

Calendar page - https://wedance.vip/events

Actual:

• the event list uses a dropdown to choose the filter of the event type (TDropdown)
• TInputButtons breaks layout and doesn't support horizontal scroll

Expected:

• filter options are shown as pills, i.e. buttons in one line with horizontal scroll (TPills)

[Bug]: databaseURL required on firebase config file

Contact Details

No response

What happened?

when you go through the setup for the project you have to put the firebase config in env file but for me, i have to put databaseURL but that was not in firebase config file

What browsers are you seeing the problem on?

No response

Relevant log output

ERROR  Missing or incomplete config for current environment 'development': key 'databaseURL' is required!

Code of Conduct

• I agree to follow this project's Code of Conduct

/[username] not found

• Sign up with google produces /[username] not found promise rejection
• Sign up with google should not trigger a promise rejection
• Bug detected in developer-tools with Google Chrome Version 92.0.4515.107

i18n: Post Editor

As a translator I want to be able to localise these pages:

• Post Editor - https://wedance.vip/posts/-/edit

Follow i18n style guide in #70

i18n: Auth

As a translator I want to be able to localise these pages:

• Register - https://wedance.vip/register
• Sign in - https://wedance.vip/signin
• No password - https://wedance.vip/nopassword
• Popup "Members Only", which is shown on any page for not-logged-in users who try to do interact with content ("Star", "Watch", etc.)

Follow i18n style guide in #70

Settings: Profile: Cannot read focus of undefined

• Error "Cannot read focus of undefined"
• Bug can be reproduced by signing up with google then navigating to profile settings and selecting a new city
• Bug detected with developers-tool on Google Chrome Version 92.0.4515.107

Localization

Share event posters in local timezone

Steps to reproduce

• Open any event, for example https://wedance.vip/events/65GWbAiKvxMQLdR087ib
• Click share and download image (poster)

Actual result

• time is shown in GMT+2

Expected result

• time is shown in user's preference timezone

Additional

• Click Share for the first time and it will trigger poster generation
• Share/Refresh image will trigger poster generation
• Poster generation triggers cloud function via API share/events/<eventId>?timezone=Europe/Berlin
• Cloud function makes screenshot of the page events/<eventId>/share
• Timezone should be a new configuration field in Account Settings
• Timezone Europe/Berlin is hardcoded, but should be taken from new field Account Settings Timezone

i18n: Event Dashboard

As a translator I want to be able to localise these pages:

• Event Dashboard - https://wedance.vip/events/2e7DJP7C39iy8ibbEq0w/dashboard

To access Event Dashboard:

• Create event: click "plus" icon in the header of https://wedance.vip/events/ page, fill the fields and click save
• On the event page click more (three dots in the header) and click Dashboard

Follow i18n style guide in #70

i18n: Chat

As a translator I want to be able to localise these pages:

• Chat - https://wedance.vip/chat
• Conversation - https://wedance.vip/chat/alejito

Follow i18n style guide in #70

Share any post to instagram

As Ambassador I want to export any event, profile or post from feed as image in order to save time creating posts to social media, which is now done with Figma templates.

Acceptance Criteria:

• there is a button Share on page of any event, profile and post
• when I click on button png file is downloaded
• size: 1080x1080
• instagram template is used

Examples of output for dancer profile:

Editor.js for descriptions

Integrate https://editorjs.io/ as a new field type for forms, to be used instead of markdown in fields like description.

Errors in console during registration

• Bug detected when trying to register
• Bug can be reproduced by visiting the registration page then leaving all fields in the form empty and trying to register.
• Project should not produce any error when registering with empty fields.
• Error produced is TypeError: Cannot read property 'trim' of undefined
• Lastly, bug was detected while using Google Chrome Version 92.0.4515.107

[Bug]: Test

Contact Details

No response

What happened?

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior:
A clear and concise description of what you expected to happen.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Welcome email not sent

Exception in Firebase:

Error: City Munich not found
    at exports.welcomeEmail.functions.firestore.document.onWrite (/workspace/lib/index.js:108:15)
    at process._tickCallback (internal/process/next_tick.js:68:7)

i18n form fields

As a Developer I want to use t() functions inside ~/use/ libraries.

Change sender for email notifications

New sender: [email protected]

Event: Edit Team

Team:

• List of team members
• Add member -> popup

Add Member:

• Name or Link to profile (similar to venues)
• bio
• role

{
    "name": "I'M YOUR DJ New Year 2022",
    "team": [
        {
            "uid": "dfgiouoi234",
            "username": "alejito",
            "name": "Alejito",
            "photo": "https://...",
            "bio": "Dancing since 2007",
            "role": "Instructor",
            "tiktok": "alexrazbakov",
            "instagram": "alexrazbakov",
            "facebook": "alexrazbakov",
            "youtube": "",
        }
    ]
}

i18n: Feed

i18n: Event View

As a translator I want to be able to localise these pages:

• Event View - https://wedance.vip/events/2e7DJP7C39iy8ibbEq0w

Follow i18n style guide in #70

Festivals 2022

Partner search requests

As a Dancer I want to see list of dancers still looking for partner in order to find partner faster.

1. Create your profile: show your face, tell your dance story, what's your dance experience, languages you speak.
2. Create a partner search request: which dance style, what's your objective, where you prefer to meet.
3. You have 3 slots for offers: send offers to existing requests or wait to receive an offer to your request. Every opened offer occupies one slot.
4. Each offer expires in 24 hours. During this time you can accept or decline the offer.
5. Once all 3 slots are used, your request temporarily disappears from the list.
6. Your request will expire in 1 week. You will get an email to reopen your request if you want to keep looking.

i18n: Calendar

i18n: Settings

As a translator I want to be able to localise these pages:

• Settings - https://wedance.vip/settings

Follow i18n style guide in #70

Team Page

As a User I want to see who is in the team and find ambassadors in other cities

Acceptance Criteria

• Profiles of all ambassadors, consuls and team members are shown at https://wedance.vip/WeDanceTeam

Can't empty fields in the form

Steps to reproduce

• Go to "My Profile" page
• Click "Add event", set title and description to "test", click save
• Edit event and remove description, click save
• Update page of the event

Actual result

• Description is "test"

Expected result

• Description is empty

Show profiles without photos

As dancer I would like to be listed in People section and see also others without picture.

Acceptance Criteria

• Visibility of new profiles is set automatically to Public
• Pictures without photos are shown in People section

Non-existing posts froze page

Steps to reproduce

• Open non-existing-post

Actual result

• Tab gets frozen and not responding

Expected result

• Error 404 is shown

It is possible to create event with no name

Contact Details

No response

What happened?

Steps to reproduce the behavior:

1. Klick on "Add a new event
2. Enter text to all fields except event name
3. Save event

Expected behavior:
Event creation not possible. Error Message, please enter event name

Actual behavior:
Event is created

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Notify organiser about rsvp

As Organiser I want to be notified about new rsvp in order to know how many people registered

• User registers at event
• Organizer gets an email with name, email , phone and information, partner and total amount of guests

Event Microdata

As an Organiser I want event page to have microdata so that users can find it in Google

Resources:

• https://developers.google.com/search/docs/advanced/structured-data/event?hl=en
• https://schema.org/Event and section "More specific Types"

Register in <30 sec

As a new user I want to register in less than 30 seconds

Acceptance Criteria

• Registration form includes only: email, password, username, I dance in (city/community name)

i18n: Event Editor

As a translator I want to be able to localise these pages:

• Event Editor - https://wedance.vip/events/-/edit

Follow i18n style guide in #70

Upgrade to Nuxt Bridge

i18n: Profile View

As a translator I want to be able to localise these pages:

• Profile View - https://wedance.vip/alejito

Follow i18n style guide in #70

Username fast input

• Username input field in registration skips letters when typing username fast
• Username input field should not skip letters when username is typed fast
• Input field validation seems to work on key-up event
• Bug was detected while using Google Chrome Version 92.0.4515.107

Commenting a post freezes the page

Steps to reproduce

• Revert TFormComment.vue of 9488d05
• I open any post from Feed
• I enter comment and click post

Actual result

• Tab gets frozen and not responding

Expected result

• New comment shown in the comments list

TField: floating labels

Acceptance criteria:

• label-position option is removed
• all labels are floating
• label property is used for labels, fallback to placeholders

Resources:

• https://notiz.dev/blog/floating-form-field-with-tailwindcss
• https://tailwindcomponents.com/component/floating-form-labels
• https://morioh.com/p/fa3bbbbedb21

Design v2.14

Notification Settings

As a user I want to be able to opt-in and unsubscribe from marketing emails and still be able to receive transactional emails.

Acceptance criteria

• Signin has a opt-in checkbox
• New user who opted-in subscribe to newsletter
• Account setting have a checkbox to subscribe/unsubscribe from newsletter.
• On account deletion email is unsubscribed from newsletter

Checkbox label:

I want to receive emails about dance community and platform updates

Publish events and profiles in Feed

As a User I want my actions be visible to other users in order to get reactions and feedback

Use case for Profile:

• I open Profile settings
• I edit dance story
• I see activated checkbox "Publish as post on Feed"
• I click Save
• New post with my dance story is shown in the Feed

Use case for Event:

• I create new Event
• I edit Event Name
• I see activated checkbox "Publish as post on Feed"
• I fill all required fields for Event
• I click Save
• New post with event announcement is shown in the Feed

upgrade tailwind to v3

i18n: Home

As a translator I want to be able to localise these pages:

• Home - https://wedance.vip/

Follow i18n style guide in #70

Community Profile

As a User I can create multiple profiles and claim other profiles

Create your dance profile

As an unlogged user I open someone's profile and want to see a button Create your dance profile in order to create similar profile.

Create dance profile takes me to signin page.

Like button in profile page unresponsive

• Like button under user profile unresponsive
• Like count should be responsive when clicked and like count should increment by one
• Bug can be reproduced by signing up with a google account and then navigating to the profile page to test like button
• Bug detected on Google Chrome Version 92.0.4515.107

Cancel Event

As an Organiser I want to cancel event. As a Guest I want to know if event is canceled.

Acceptance criteria

Event menu has Delete button if:

• no attendees
• created <1h ago, i.e. no one saw it: event wasn't promoted in social media or as part of calendar

Event menu has Cancel button. On click:

• Ask organiser "There are N attendees of your event. Let them know why you cancel." and post his answer as a comment and switch state of the event to cancelled

Event with state cancelled:

• Event title gets [Cancelled]
• hide "Register for event" and show red text "Event is cancelled" instead