helppery-com / meetnav-frontend-base

meetnav-frontend-base

Quasar APP frontend for meetnav

Let's talk

This project is a test for a distributed development of an open sourced project based on gig economy

Only issues tagged as help-wanted will be paid.

How to apply for a help-wanted issue

If you want to apply for help-wanted issues:

• Post a comment with a reference to your work on any freelancer paltform, linkedin, ...
• We'll contact you and agree on the price
• Clone repository and submit pull request to get paid

Collaborators will have preference when assigning help-wanted issues, will be offer you to become a collaborator based on the quality of your work and reliability.

Colaborators

They are the preferred developers for the project. Have access to repository and will be able to review/validate Pull Request as well. They will get paid for developments and repository maintenance.

Development requirements

• Visual Studio Code
• Docker

How this project work

Simple way to collaborate with this project is:

• Build image (see CICD Build)
• From your dev resposiroty execute the DEV container (see CICD: Run DEV)
• Pick a issue and create a pull request
• If is a paid issue you must first agree the price in the follwing platforms:
  • Freelancer
  • Fiverr
  • Or comment if you work with any other

Project structure

CICD

github webhooks and project demo

Build

Build the image for the github webhooks and app

(docker build \
  --build-arg GIT_WEBHOOKS_SECRET="SECRET_HERE" \
  -t meetnav-frontend-base:demo \
  https://github.com/helppery-com/meetnav-frontend-base.git#main:docker)

Run Demo

docker run -d --name demo -p $APP_PORT:8080 -p $CICD_PORT:8081 -it meetnav-frontend-base:demo

Run DEV. First time will clone and build run project at meetnav-frontend-base folder under current directory

docker run --name demo -p $APP_PORT:8080 -p $CICD_PORT:8081 \
-v $PWD:/github meetnav-frontend-base:demo 

Now you can access the app at http://localhost:$APP_PORT test github webhooks at http://localhost:$CICD_PORT

quasar

Quasar.dev app

docker

All docker related stuff

meetnav-frontend-base's Issues

Home page

Help wated payable 10€ - 20€

Please read how to collaborate before
Let's talk

Issue

Implement current design for Home page /

Notes:

• Add store
• Add i18n

This issue will be paid by sponsors
Please post a comment below if you want to be assigned to this issue

Login Register dialog

Help wanted payable

Please read how to collaborate before
Let's talk

Issue

Implemente login/register dialogs

Expected bahavior

From home page Login / Register section invoke dialogs

Add new module to store user

Login: Invoke store "user" action login. Fake an async action returning user object and update state

{ 
 "username": "username",
 "avatar": 'https://eu.ui-avatars.com/api/?name=username"
}

Register: Invoke store "user" action register. Fake an async action, update dialog to show confirmation message

Please check your email to confirm your account

Activation: New route to home page /activate/xxx-xxx-xxx-xx where xxx-xxx-xxx-xx is an activation code. Fake store useraction register with same behavior as login for code xxx-xxx-xxx-ok and show error message for xxx-xxx-xxx-ko

Invalid activation code

User logged:

Update MainLayoutaccordingly

Notes:

• Use store for login/register actions and change state to loged user
• Use i18n

This issue will be paid by sponsors
Please post a comment below if you want to be assigned to this issue

Search results page

Help wanted payable

Please read how to collaborate before
Let's talk

Issue

Implemente search results page

Notes:

• Create store module search actions and update state with last search
  • Actions: search (topic)
  • State: { "q": "", "results": []" }
• Use i18n

Search results example:

meetnav-frontend-base/tests/data/search.json

Line 1 in 281a520

{

This issue will be paid by sponsors
Please post a comment below if you want to be assigned to this issue

User profile

Route www.meetnav/@username should show user's profile

Calendar

Data model example:

{
        username: 'username',
        title: 'AUBA Oversize Style',
        subtitle: '<a href="">@AUBABoutique</a>',
        following: false,
        backgroundPicture:
          'https://media.istockphoto.com/photos/background-of-mannequin-for-female-on-color-canvas-background-picture-id1094745512?k=6&m=1094745512&s=612x612&w=0&h=SC6JoW3rV5xcNI6dSmRVCNK36Sb5dZguPXFGZ3q-Rwc=',
        logo:
          'https://scontent.fpmi1-1.fna.fbcdn.net/v/t1.6435-1/p320x320/130457284_3536493656439221_3369668135175541122_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=1eb0c7&_nc_ohc=zOCWGO34XMwAX_G_eGU&_nc_oc=AQkABq4dsUUYXjA-LWeJe5vlvdny76f-tnnpOCqApQllRE4o4MpnR2M9Hrw18vyWmp8&_nc_ht=scontent.fpmi1-1.fna&tp=6&oh=ee44dec25457994e3db7d59c165f1454&oe=608886D2',
        intro:
          'The store is open, come visit us 😘 #aubaboutique #palmademallorca #womenfashion #fashionoversize #curvyfashion #spana #baleares #spring2021 #happysaturday #mallorca #fashion2021 #spring',
        location,
        online: true,
        social: [
          { type: 'twitter', url: '' },
          { type: 'facebook', url: '' },
          { type: 'instagram', url: '' },
          { type: 'whatsapp', url: '' }
        ],
        gallery: [
          'https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/E1266601_%285398889640%29.jpg/1200px-E1266601_%285398889640%29.jpg',
          'https://static.onecms.io/wp-content/uploads/sites/14/2020/07/15/fashion-header-1-2000.jpg',
          'https://www.criteo.com/wp-content/uploads/2020/07/fashion-featured-image.png',
          'https://www.fbifashioncollege.com.au/wp-content/uploads/2019/11/1.jpg'
        ],
        calendar: [
          { dt: '2021-03-31T10:00:00', username: '' },
          { dt: '2021-03-31T12:00:00', username: '' },
          { dt: '2021-03-31T14:00:00', username: '' },
          { dt: '2021-04-31T11:00:00', username: '' },
          { dt: '2021-04-31T12:00:00', username: '' },
          { dt: '2021-05-31T15:00:00', username: '' }
        ],
        reviews: 124,
        followers: 3200
      }

Add Video/Audio chat to Neko

Help wanted payable

Please read how to collaborate before
Let's talk

Extend project neko (submodule) adding video/audio for participants

• User will have a button to turn video on/off audio on/off
• Evaluate integrating RTCMultiConnection

We expect this functionality to be added to neko main repository, please https://n.eko.moe/#/?id=neko and follow their best practices and guidelines

This issue will be paid by sponsors
Please post a comment below if you want to be assigned to this issue

meetnav, video-browsing for free

Home page

Start session

Accept partcipants

Load cobrowsing

User interaction

Refine home page

Notes:

• Check colors and fonts. Define primary, secondary, accent, dark,...
• Create/Edit illustrations for each kind of room: video, music, games, empty

Profile page

Help wanted payable

Please read how to collaborate before
Let's talk

Implement profile page

Notes:

• Responsive

This issue will be paid by sponsors
Please post a comment below if you want to be assigned to this issue

Create video chat room with RTCMultiConnection

Help wanted payable

Please read how to collaborate before
Let's talk

Create page navroom for video chat using RTCMulticonnection

RTCMultiConnecion Demos:
https://rtcmulticonnection.herokuapp.com/demos/

Notes:

• When navigating to /navroom, create a random room id xxx-yyy-zzz and open new room as admin.
• Users accessing /ravroom/xxx-yyy-zzz will join room xxx-yyy-zzz as guest.
• Admin will be promted to accept guests "Guest xxx wants to join"
• Add video / voice / share screen controls
• Add kick user option to drop users from room
• Shared screen must appear at the center of the room

This issue will be paid by sponsors
Please post a comment below if you want to be assigned to this issue

Fix user video bar arrangement

Users must be places in the video bar top - bottom leaving blank space at the bottom

Current:

To be:

NOTES:

• All users must fit on the bar
• Video height must be bigger when there's enought space
• User dsitribution must be justify start

Add card mode to search results

Add card view to search results:

Create best practices for this project

All participants on this project are invited to discuss the best practices for this project.

File: https://github.com/helppery-com/meetnav-frontend-base/blob/main/CONTRIBUTING.md

Thanks

web designer link

@gbrian
https://www.fiverr.com/web_gfx?