matthiku/chatter

Messenger PWA based on Laravel 5.6 + Passport, with Laravel Echo, Pusher and Vue.js (Vuex + Vue-Router)

chatter - A full-stack Messaging Tool

This is a Web Application that can run on any device -

based on Laravel 5.6 with Laravel Echo, using Pusher. SPA front-end using Vue.js.

Prerequisites

Some basic understanding of the Laravel architecture is mandatory.

A free Pusher account is necessary in order for this to work!

Installation

1. git clone https://github.com/matthiku/chatter.git
2. composer install
3. cp .env.example .env
4. fill out .env!
5. create a database
6. php artisan key:generate
7. php artisan migrate
8. npm install
9. php artisan passport:keys
10. npm run watch (for development only)
11. npm run production

Note: the first user to register on a new installation will have the id of 1 and will be the Admin.

Screenshot from ChatterBox on a mobile device:

(C) 2018 Matthias Kuhs, Ireland

chatter's Issues

June List of minor enhancements and issues

• (1) simplify Vue component registration using require.context
• (2) re-route '/' and '/index.php' always to '/home'
• () turn "reload" into a button for better visibility, change text "User Profile" to "Your Profile"
• () provide option to add/change avatar

Add Vue.Router for future enhancement options

e.g. to perform the login/register processes within Vue and API calls

Create components for Users List and single chat room

ToDo List BackEnd

• (1) Improve Laravel Mix setup (BrowserSync etc)
• (2) use username as login credential instead of email address
• (3) Email confirmation
• (4) Laravel Socialite with Google or GitHub authentication
• (5) Routes: Move API-like requests into the API route file
• (6) Add/integrate Laravel Passport
• (7) Allow for multiple chat rooms - create Migrations and Models
• (8) Allow for multiple chat rooms - create proper routes and controllers for rooms and messages
• (9) Allow for multiple chat rooms - provide multiple chat room channels
• (10) Provide simple list of all users
• (11) Add broadcasting event for adding/removing a room
• (12) Add functionality to update an existing room (name, members list)
• (13) Make main chatroom name configurable
• (14) Make Socialite callback URL more flexible: [app_url]/login/{provider}/callback
• (15) Error after Google login callback (username missing when creating new user)
• (16) Include Facebook as valid login provider
• (17) Enable switch of locale (between English or German)
• (18) choice of username is not working properly when logging in via Socialite
• (19) send email to admin whenever a new user gets added
• (20) use more random channel names to avoid clashes with other apps

Implement Pagination for messages

At first, only show the 25 newest messages and update the list once the user starts scrolling backwards

ToDo List - Bugs

• (1) After renaming a chatroom it will appear twice in the list
• (2) missing dates in the room_user pivotal table
• (3) When deleting an open room, the displayed room list is empty, nothing is shown
• (4) regularly check for a working presence channel
• (5) properly handle success or error with subscribing to the chatroom presence channel
• (6) newly created chatroom should appear at the top of the list
• (7) clicking on the title of a just deleted chatroom should not open then next one
• (8) don't open chatroom when user clicks on 'leaving room' icon
• (9) Not properly removing a chat after being deleted
• (10) Not properly opening a new chat right after creating one while another chat is open
• (11) not properly updating reading progress after adding field to pivot table

Add support for photos and voice messages

Backend:

• (1) add upload method in Messages controller
• (2) add route for upload
• (3) extend Message model to allow fields 'filename' and 'filetype'
• (4) delete file when message is deleted
• (5) delete files when chatroom is deleted

Frontend:

• (6) add vue2-dropzone project via NPM
• (7) add modal to show dropzone
• (8) close modal after upload
• (9) reset dropzone after upload to always show only one item
• (10) click on image shows full-size image(s) as a slideshow
• () show preview of images also in notification email
• (11) show smaller previews on smaller devices

Vue-DropZone:
https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/props
https://appdividend.com/2018/04/18/vue-file-upload-using-vue-dropzone-tutorial/

Configuration:
http://www.dropzonejs.com/#configuration-options

MediaRecorder:
https://github.com/Mido22/MediaRecorder-sample

May List of minor enhancements and issues

• (1) improve layout of list of chatrooms - choose alternating BG colours
• (2) improve layout of main dropdown menu icon/avatar
• (3) improve layout of main dropdown menu items
• (4) less padding for modal dialogs on smaller devices

Stop scrolling of whole page, scroll only within the chatroom

• () Stop scrolling of whole page, scroll only within the chatroom

Indicate reading progress of each user in each chatroom

• (1) BACK-END: update room_users table when user sends a message
• (2) show member names or avatars within the messages log
• (3) BACK-END + FRONT_END: update room_users table when user opens an existing chat
• (4) When another user is added to the chat, their reading progress should be the start of the chat
• (5) Don't show the current user as they are always up-to-date
• (6) when starting chatter, indicate the chatrooms with unread messages - The reading progress helps indicating how many messages a user has not read yet in a chat room
• (7) invalid calculation of unread messages
• (8) in message log, show indicator where new messages start

Option to send email notification of new messages when offline

Frontend:

• (1) change button to edit room properties to be enabled for all users
• (2) add select box in modal dialog for this option
• (3) change layout of EditRoomProperties component to handle room owner vs. room member
• (4) move "leaveRoom" logic from ChatRoom component to EditRoomProperties component
• (5) add functionality to handle the change of this setting and sending it to the backend

Backend:

• (6) add POST route for "/api/rooms/{room_id}/setemailnotification"
• (7) add logic in Room controller to handle this setting
• (8) add field "emailNotification" in chat_user pivot table for this setting
• (9) add logic to handle the change of this field

Frontend:

• (10) read the setting from the backend and show it in the modal dialog box

Backend:

• (11) Add event listener for "MessagePosted" event
• (12) add logic to find out who is actually off-line and - see comment below
• (13) add logic to actually send email notifications to those users

Issues:

• (14) Frontend: Not properly remembering the setting after changing it
• (15) if message was an image, show it in the email - same for audio messages (voicemails)
• (16) Improve link in email to go directly to the corresponding chat room
• (17) make "Email Notification" the default setting for new chatrooms
• (18) GIF uploads causes PHP error "array to string conversion"

ToDo List - Feature Requests

• (1) Always push current chatroom to the top (basically when opening it)
• (2) chat room to remain open when moved because of updates (new messages)
• (3) show number of unread messages in the header and on the chatroom header
• (4) open chatroom when only one is available
• (5) Improve UI of dialog box for new chatrooms
• (6) show a popup-menu on smaller devices to make out for the missing Username-Dropdown menu
• (7) immediately open the newly created room
• (8) Go to (closed) list of all chats when clicking onto header title text
• (9) Go to new message and open chat when user clicks on red number of new messages
• (10) Show number of chats in Title area as well, e.g. "My Chat Rooms (3)"
• (11) Show name of current chat, number of unread messages and number of online users in page title
• (12) update Window title when a new message arrives into the currently open chatroom
• (13) When chatroom is open, use highlighted and bigger font in room header
• (14) convert text that looks like a link to a real link
• (15) Smileys support (convert ASCII smileys) and provide list of common ones
• (16) show date/time of message in a format depending on age, e.g. today only show time etc.
• (17) show "typing" besides user names if they are online and typing text into an open chatroom
• (18) make the 'bin' icon in own messages light red and only dark red on hovering
• (19) Show icons (avatar) of users in a chat
• (20) Allow change of username
• (21) keyboard - ESC - should get you out of a chatroom back to the chatrooms list
• (22) scroll to bottom of all messages when opening chat room
• (23) don't show name until the next msg is from a different user; don't show date of msgs from the same user written within 120 secs
• (24) discover and re-direct to login when session has expired
• (25) remove showing number of chatrooms in header bar and increase height of individ. chat header
• (26) use a versioning system to see if clients have an outdated version

April List of Small Enhancements and Minor Issues

• (1) hide footer when room is open
• (2) improve UI of header bar
• (3) directly open a new chat when user clicks on another user name in the title bar
• (4) show number of online users in the browser title
• (5) if user has a proper avatar, don't show the rectangle around it in the header bar
• (6) make chat headerbar sticky to the top
• (7) Dropdown-menu is partly underneath the area below and needs a higher z-index
• (8) Better indication of chat owner in the list of chat members
• (9) Unable to edit chatroom that was just created
• (10) show 'Room Properties' menu item in main drop-down menu when a room is open
• (11) When all chats are closed and a new msg arrives, open that chat accordingly
• (12) Increase min height of Chatroom header on mobile devices
• (13) showing incorrect number of online users when more than 2
• (14) PHP error "Undefined variable: username" in LoginController line 147
• (15) Add sentence in Email Notification on how to unsubscribe from these kind of emails
• (16) Swap menu items 'Close Room' and 'Room settings' and add icons to the menu
• (17) not closing chat room from menu when just one exists - IGNORE FOR NOW
• (18) Chatroom name: in a chat with just 2 members, if name equals your username, use the other member as the room name
• (19) have more checkpoints to look for newer versions (continuous delivery)
• (20) provide option to add/change avatar
• (21) Show Avatar instead of username in chat header and online user list
• (22) Improve header alignment and list of room users / online users
• (23) Show name of user in page title when just one is online

ToDo List FrontEnd

• (26) Order the rooms by last update, with the newest at the top
• (25) include moment.js to show message dates/times
• (24) Enable switch of locale (between English or German)
• (23) show a little space between the rooms and better design of header area
• (22) set default name of a new room to the owner's name
• (21) Add option for chat members (not the owner) to leave a room on their own
• (20) instead of just removing a deleted chat, show a notification that it was deleted by the owner
• (19) Allow users to delete their own messages (being replaced by a 'deleted' comment)
• (18) not showing messages in a newly created room!
• (17) Open a newly created room (make it not collapsed)
• (16) when being added to an existing chat room, get all messages for this room
• (15) improve design of messages
• (14) indicate to others the owner of a room
• (13) Ask for confirmation before finally deleting a Chat Room
• (12) add a delete button to the Edit Room dialog
• (11) when a room is removed, the listening channel should also be closed
• (10) When a room is updated or added, check if the current user is member or not
• (9) add logic and UI elements to add/remove users to a chat room
• (8) Improve "Create new Room" dialog (button text, close the dialog)
• (7) add new online users also to the generic list of users
• (6) add logic and UI elements to delete a chat room (only by the owner)
• (5) add logic and UI elements to create a new chat room
• (4) provide simple list of all users
• (3) show currently online users
• (2) add logic to properly add messages to a chat
• (1) Allow for multiple chat rooms and use Vuex for state management

Turn this into a Progressive Web App (PWA)

• (1) adding manifest.json
• (2) adding icon files of various sizes
• (3) Add basic Service Workers
• (4) Remove Laravel Navbar after login
• (5) Service Worker for background notifications
• () Turn Login/Register into Vue components

https://medium.freecodecamp.org/how-you-can-make-a-progressive-web-app-in-an-hour-7e36d560610e

https://www.nativescript.org/vue

https://medium.freecodecamp.org/why-progressive-web-apps-are-the-future-of-web-development-13db7dd5f640

https://dev.to/remejuan/progressive-web-app-with-webpack-ecj

Caching strategies

https://dev.to/s1hofmann/the-road-to-pwa---part-3-398j

Background Sync

https://ponyfoo.com/articles/backgroundsync

Several resources

https://www.udemy.com/progressive-web-app-pwa-the-complete-guide/learn/v4/t/lecture/7867396?start=0

Split main Chat component into smaller sub components

• (1) page header with main menu, online-users list and add-new-chat button
• (2) separate component for single chatrooms