Ravot (A realtime dashboard)
Nwanze franklin May 25 Updated on May 30, 2018
What I built
A real time dashboard for a company
for the purpose of test I am dropping a single admin user login and password
Link to Code
How I built it (what's the stack? did I run into issues or discover something new along the way?)
- Project Overview
We worked on a real time dashboard to display tasks, announcements, important events in the future, which music is currently playing etc. Our dashboard was built using Laravel, Vue and Pusher.
Our intent is to display this dashboard on a TV Screen against a wall in our office.
The dashboard(live dashboard end) will have the following:
- Upcoming events scheduled by the admin. An announcement section to display announcement to interns/team members.
- A Scrumy board section.
- Github section to display statistics of our numerous public repositories on Github.
- Bitbucket section.
- The music that is currently playing in the office.
- A clock with the current date and time.
After the browser displays the dashboard for the first time, we’ll never refresh the page again. WebSockets and Vue are being leveraged to update the sections. Doing it this way will avoid having to refresh the page and in turn flashing screens.
Each section is its own Vue component. Laravel’s default scheduler is used to check for scheduled events and fires an event which is broadcasted to pusher when a logic is satified. When data is received, a broadcast event is fired to Pusher.
We had three persons who worked on this project. Team members collaborated on Github and project development began on Friday 18th May, 2018 that's after initial commit on 2nd of may, 2018.
Below are the names of the team members:
- Nwanze Franklin (franko4don): Team Lead
- Timothy Onyiuke (timolinn): Team Member
- Nwankwo Gabriel (gfuns): Team Member
How it was built
We started out with the requirement analysis on the system we proposed to design which is a mini task management system with real time feed. We iterated over a few designs and technologies to use then got our specifications.
After much deliberation we came up with the following
- Laravel, vuejs, Laravel Echo and Pusher will be used for the project, Laravel for backend, Laravel Echo and Vuejs for front end and Pusher as websocket for realtime updates
- Task management module for admins to create tasks while setting the description and the scheduled time of start and completion.
- Task Assignment module for users who will be able to pick tasks, work on them and deliver by clicking a button so that it goes in for review
- Music management module which Enables the admin to create and delete music as well as set the current music to play on the live dashboard view with just a click in real time
- Announcment management module which enables admins create company wide announce ments.
- Gist module for users where anyone can drop the latest gist in shortest words as possible
- Event management module enables admin create upcoming events for display on the live dashboard
- Artist module for managing artists that have music on the platform
- Categories management for adding the category of tasks that can be created
- User Module for managing users on the platform by the admin, the admin can delete a user as well as view a user
- Profile module that enables a user manage his/her profile
- Database analysis
- Version control integration with github
- Creation of migrations and seeders
- Template integration for dashboard(Gentelella alella)
- Simple Autodeploy setup from github to test server
- Design of live feed dashboard with HTML and CSS
- Creation of routes and controllers as well as adding functionalities
- Pusher integration on the backend
- Laravel Echo integration for frontend
- Vuejs setup with laravel mix
- Breaking down html and css designs of live feed dashboard into vue components
- adding functionality to components and setting up listeners for pusher events
- Testing of Each module with fake data
- Fixing of discovered bugs
All this is placeholder text. Use this format or any other format of your choosing to best describe your creation.
Thanks to dev.to and pusher for this opportunity to explore real time apps, This app will later be used for the new technology hub (https://binaryhills.org) we are setting up for managing tasks and daily activities.
This week I want to talk about something that I have used for a excuse quite a few times. Before I finally started getting a schedule going. And that is saying the excuse I don’t have time to learn blank.