minor-rtw

Real-Time note taking app

Live version

📖 Introduction

With YouPad you can take notes with other students, in real-time! Load in a youtube video through the url and off you go. You don't even have to create a profile. Just log in with your Google account and you are settled.

1. Enter your Youtube URL
2. Hit add to get the Youtube video
3. Take notes in the box below
4. See notes from other students

Events

• User connection: Add a user in the topbar when conntected.
• User disconnected: Remove user in the topbar when disconnected.
• Video add: Update the video on all clients.
• Emit notes: Emit the changes in notes to all clients.
• Video change: Update the video based on event manipuation (play / pause).
• Offline: The user gets a notification when the client is offline.

To make sure the iFrame works over sockets it's wrapped with the MediaElement library. The iFrame is now HTML5 video and I can call the event and methods of the video.

Data life cycle

To use the google profile returned by Google Sign on the room page I used localForage to store it in localStorage. It adds the socket.id with the userProfile data to the connectedUser. When a client disconnects that client gets removed from the array.

⚙ Installation & Development

Prerequisites

Software

• Make sure you have node installed on your machine.

Installing

Node server

Here are the instructions to get the node server up and running.

1. Clone this project to your local machine and change directory/

$ git clone https://github.com/dandevri/minor-rtw.git && cd minor-rtw

1. Install the dependencies and start the server.

$ npm start

1. You should see the following message in your terminal.

Server running 0.0.0.0:3000

Built With

• express 4.15.3: Web application framework used for basic routing
• ejs 1.0: Client side templating engine
• socket.io 2.0.1: Real-Time engine framework
• localForage 1.5.0: Simple storage library for JavaScript
• MediaElement 4.1.1.: Simple storage library for JavaScript

External

• Google Identity: Authenticating flow
• Youtube iFrame API: Video loading

✨ Wishlist

• Refactor search field to search for keywords, not enter a youtube url
• Sync the video playback to all clients using timeUpdate
• Improve note-taking field to make sure notes sync better across clients

📄 Contributing

Please read Contributing for details on how to contribute to this project. I am always up for improving my code! To see a list of everybody who participated go to the Contributors page.

✅ Todo's

To see all upcoming todo's and features please navigate to the GitHub Projects page of this repo.

💼 License

This project is licensed under the MIT License - © Danny de Vries 2017

Acknowledgments

• Tutus Wormer for the free coffee.
• Laurens Arnoudse for the shoulder to cry on.