adarshaacharya / mentorlabs

Learn, collab and grow together to the moon. :rocket:

Learn, Collab & Grow Together.

View Demo · Report Bug · Request Feature

MentorLabs is a a WebRTC based video conferencing app. Apply for mentorship to the top mentors recommended by our powerful algorithm based on your profile. Enjoy one-to-one live mentorship in our interactive video streaming labs for free.

⚠️ This is pre-released (experimental) version of Mentor Labs website. That means we are still working to improve the site and breaking changes may occur anytime. So please avoid providing your real profile details as the app isn't fully secure and data may get erased any time. Meanwhile, you can help us by raising an issue if you find any bugs in the project.

Features

• Authentication and Authorization
• Personal Dashboard for Mentor and Mentee
• Recommendation System
• Apply and Respond Mentorship Request
• Create and join private room
• Video and text based chat
• Screen sharing

Tech Stack

• Frontend : Typescript, React.js, Redux Toolkit
• Styling : Ant Design, Custom Css with BEM naming convention
• Backend : Typescript, Node.js, Express.js
• Database : TypeORM with PostgreSQL database
• Tesing : Jest, React Testing Library
• Realtime Communication : simple-peer (WebRTC), Socket.io
• Algorithms : Jaccard Similarity, Supervised recommendation algorithm, QuickSort Hoare
• Deployment : Server, Client and Database hosted on Heroku

Local Development

Before running app locally make sure that you've install flowiing things in your machine:

• Node.js version v14.18.1 (if you are using nvm try nvm use 14.18.1 ) and yarn version v1.22.17
• PostgreSQL >= v12.8
• Download and install Beekeeperstudio as database toolkit for easy database setup. (Optional)

Step 1: Clone the repo

https://github.com/adarshaacharya/MentorLabs.git

Step 2 : Install dependencies

cd into the directory

 cd MentorLabs

In the root folder do:

  # first install server deps
  yarn

  # also install client deps
  cd client && yarn

Step 3 : Configuration

1. Create .env file in the root directory.

  touch .env

2. Open .env.example file, copy everything

3. Paste the content in .env file

4. Create database named mentor-labs with Beekeeper Studio or postgres-cli from your terminal. (You don't have to create tables for database)

  CREATE TABLE "mentor-labs";

5. Again open .env file and replace fields like DB_USER, DB_PASS with your own credentials.

6. Create account on Twilio and open the Twilio dashboard.

7. Copy TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN keys and paste it on .env file on their respective fields.

8. For client too, we have small issue (might be fixed on near future). Go to client folder and create .env file.

  cd client  && touch .env

9. Copy everything of .env.example located inside client directory and paste it inside .env file of client directory. (You ca leave REACT_APP_SENTRY_DSN field empty)

The configuration is quite hard tbh, if you encounter any problems in setup you can directy create issue. We will try to work on that.

Step 4: Usage

Now, you can run application by

yarn dev

# Server runs on http://localhost:5000 and client on http://localhost:3000

Production Deployment

There is a Heroku post build script so that you do not have to compile your React frontend manually, it is done on the server. Simply push to Heroku and it will build and load the client index.html page

Contributing

Contributions, issues and feature requests are welcome. After cloning & setting up project locally, you can just submit a PR to this repo and it will be deployed once it's accepted. Read CONTRIBUTING.md for complete contributing guidelines.

Contributors

• WIP

License

Copyright © 2021 Aadarsha Acharya. This project is MIT licensed.

mentorlabs's Issues

feat: view outgoing requests

Features to be done :

• make route name /...requests
• show all outgoing requests by you
• make card showing small description about request
• on click go to individual page of request
• individual page should show table like request details
• make sure data is fetched from backend for all features

[docs] : create proper documentation

create documentation describing about the whole project, its tech stack, some screenshot, and installation guidelines.

[fix]: images loads too slow

since we are storing our images in heroku server the image loads too slow in our fronten which results in shifting of layout after user has opened the loadin, create account page.

Plan : store img in cloundary, use some packages to load that image fast something like gatsby image would help.

[feat] write unit test for frontend and backend

• test the react code using react testing library
• test the backend express code using jest

you don't have to test everything with coverage 100% but some parts like authentication needs to be tested so that it fulfills the requirements fo Minimum Viable Product(MVP).

[refactor] : convert vanilla js webrtc to react code

as of now we have implement local stream and peer stream in vanilla js with generates some of the weirdest cases in my life. But that was for quick prototyping as react code wasn't working out well.
Now, the streming part is working perfectly I want to refactor that vanilla js part to react part. The code for vanilla js is available in client/src/services/wss.ts.

If you want to work on this issue then please let me know I would be glad to help you from setting up the project to making you understand the code base.

refactor: modify date, startTime and endTime format

for now date, startTime and endTime are stored as string, which i believe isn't good for long term, and validation pipeline is also setup on backend as string.
I want to refactor such that it will be stored in the normal form and while retrieving on client side only moment will format it. It will help to customize the date/time format on future if needed.
Thank you.

[Feature] Add User Card in Home Page

• The user card should consists the photo, name, location, title, description of the user.
• On click the card it should redirect to the user profile.

[Feature] Build User Profile Page

refactor: change primary column to uuidv4

since we are using incremental id now, this is tooo much predctable and has bad user experience so, please change to uuidv4 which is inbuilt in typeomr.

Change all the id reference in backend and frontend then.

Code for refactoring :

 @PrimaryGeneratedColumn("uuid")
  id: string;

[feat]: add algorithm to recommend mentors based on interests

• add the toggle button to turn on smart filtering technique to discover the user based on our own interest
  -- you can use any recommendation algorithms

feat: response to request

make feature to reply/response to the teacher

• create response entity
• map one to one with mentorship request
• build api
• limit only to teacher
• build form ui for response
• after submission of response it should be displayed to both teacher and student
• dont display form after response

[feat] : add algorithm for user recommendation

recommend the teachers based on the content based filtering algorithm.

feat: create room page

create room page where you can do everything you want

dont want to write anything you can add feature whatever you want ..

note : this is ❤️ of project sooo please use websocket and WebRTC for peer to peer connection. 💯

[Feature] Create apply for mentorship

• create the button in the mentor profile page if the user has profile
• on click button show modal where user can fillup the form
• create the form and link it with the backend and store data in database.
• • show notification that form has been submitted

[docs]: add contribution guidelines documentation

add contributing.md file with installation and other contribution guidelines.

[bug] CSP errors on google fonts and sentry

If you look at console, you can see so much errors abou CSP policy and fails to load google fonts and sentry. We have to find the root cause of this issue and fix it asap.

[fix] : hide password sending data to client

for now we are sending whole column data in the response for client in multiple places.

Refactor the backend code so that it doesn't send unncessaryd ata like passwords and others.

feat: create join and create room page

• create form with join and create room along with some img/video for now

feat: create session/ room page

create page for video session, can be named as room too...

process :

• first create prototype
• then create socket/ webrtc server
• test features
• then integrate backend if needed

Features to be included :

• chat
• screen share
• video support
• audio sharing support
• show participants who are in the room

fix: double message on join room

for now when new user joins room, then the message gets displayed double.

similarly, when someone creates room joined message is also displayed.

The issue is mainly on Room component where we use sideeffect to fetch data when component mounts.