DEV Community

loading...

Ravot (A realtime dashboard)

franko4don profile image Nwanze franklin Updated on ・4 min read

What I built

A real time dashboard for a company

Demo Link

https://realtime.bluebecks.com/
for the purpose of test I am dropping a single admin user login and password

https://realtime.bluebecks.com/login
email: franko4don@gmail.com
password: tomcat

Link to Code

https://github.com/RealDash/realtime-dashboard

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:

  1. Upcoming events scheduled by the admin. An announcement section to display announcement to interns/team members.
  2. A Scrumy board section.
  3. Github section to display statistics of our numerous public repositories on Github.
  4. Bitbucket section.
  5. The music that is currently playing in the office.
  6. 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.

This powerful service (Pusher) leverages websockets to carry over server events to clients in real-time. On the client side we used Laravel’s echo. The JavaScript library that makes handling those Pusher events very easy. Still on the client side each Vue component will listen to new events to update on the displayed sections.

Team Members

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:

  1. Nwanze Franklin (franko4don): Team Lead
  2. Timothy Onyiuke (timolinn): Team Member
  3. 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

  • Specifications
  1. 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
  2. Task management module for admins to create tasks while setting the description and the scheduled time of start and completion.
  3. 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
  4. 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
  5. Announcment management module which enables admins create company wide announce ments.
  6. Gist module for users where anyone can drop the latest gist in shortest words as possible
  7. Event management module enables admin create upcoming events for display on the live dashboard
  8. Artist module for managing artists that have music on the platform
  9. Categories management for adding the category of tasks that can be created
  10. User Module for managing users on the platform by the admin, the admin can delete a user as well as view a user
  11. Profile module that enables a user manage his/her profile

*Processes

  1. Database analysis
  2. Version control integration with github
  3. Creation of migrations and seeders
  4. Template integration for dashboard(Gentelella alella)
  5. Simple Autodeploy setup from github to test server
  6. Design of live feed dashboard with HTML and CSS
  7. Creation of routes and controllers as well as adding functionalities
  8. Pusher integration on the backend
  9. Laravel Echo integration for frontend
  10. Vuejs setup with laravel mix
  11. Breaking down html and css designs of live feed dashboard into vue components
  12. adding functionality to components and setting up listeners for pusher events
  13. Testing of Each module with fake data
  14. Fixing of discovered bugs
  15. Deployment

Additional Resources/Info

https://blog.pusher.com/writing-realtime-apps-with-laravel-5-and-pusher/
https://vuejs.org/
https://laravel.com/docs/5.5
All this is placeholder text. Use this format or any other format of your choosing to best describe your creation.

Conclusion

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.

Discussion (54)

pic
Editor guide
Collapse
nedsoft profile image
Chinedu Orie

wow, I'm blown away. Awesome work guys!

Collapse
made4praise profile image
Praise Sunday

Amazing job guys! Y'all deserve some accolades 👏👏

Collapse
franko4don profile image
Nwanze franklin Author

hope it's not pun intented sir? thanks

Collapse
made4praise profile image
Praise Sunday

Lol 😂, I'm now a pun master😂. No sir, I meant every line of code in that comment

Collapse
saintabrahams profile image
Saint Abrahams

Great job guys.. This is a very cool idea

Collapse
gfuns profile image
Collapse
franko4don profile image
Collapse
5ran6 profile image
5ran6

Great job

Collapse
gfuns profile image
Nwankwo Gabriel Onyedikachi

5ran6, Android and Arduino Lord. Thanks bro

Collapse
5ran6 profile image
5ran6

Lol. You're still my boss sir

Collapse
stephenjude profile image
Stephen Jude

This is cool

Collapse
iphytech profile image
Ifunanya Ikemma

This is great. Congratulations

Collapse
rony4d profile image
Ugochukwu Aronu

Great job guys. We nice work. The app will really help us at binary hills. Nice insight.

Collapse
tess_tha_phenom profile image
Teslim

Gfunsssssss. I sight u. Great job guys, you people need to get out of this country, Do well for yourselves and come back. You got potentials

Collapse
gfuns profile image
Collapse
divineobeagu profile image
divineobeagu

Nice one guys, it's nice seing a design thinking inspired coding. This is real code solving real life problem. I am blown away.

Collapse
gfuns profile image
Nwankwo Gabriel Onyedikachi

Brotherly! Thanks bro

Collapse
franko4don profile image
Nwanze franklin Author

thanks and cheers to the team

Collapse
piusanzaku profile image
Collapse
frankumeadi profile image
Frank Umeadi

Great work guys! Success!

Collapse
leonardookpeh profile image
leonardo okpeh

Nice work my people..This is just the beginning...

Collapse
gfuns profile image
Nwankwo Gabriel Onyedikachi

The Digital Marketing Apostle. Thanks boss

Collapse
realwok profile image
Wisdom

Nice work guys!!

Collapse
gfuns profile image
Nwankwo Gabriel Onyedikachi

Engr Wok Thanks boss

Collapse
jokemstores profile image
Jokem

Welldone guys...Welldone

Collapse
aktiviti1 profile image
Akaolisa AktiViti

Beautiful.

THIS IS AWESOMELY COOL.

Collapse
bamayi01 profile image
aruleba gbolahan

Good work man

Collapse
franko4don profile image
Collapse
chikwadoisrael profile image
Collapse
walecloud profile image
Wale Ayandiran

Well done 👏👏👏 you guys have my vote already

Collapse
onyekaxtt profile image
onyekaxtt

I'm impressed

Collapse
ferdieuche profile image
FerdieUche

Kuudos bro

Collapse
enwokoma profile image
Nwokoma Emmanuel

Keep up the good work. This is indeed awesome!

Collapse
ooiginla profile image
Collapse
danielordonez profile image
Daniel Ordonez

Awesome (^∀゚)ъ
♪v('∇'
)⌒☆
But,
const opinion = ()=> return design.responsive ? "Perfect" : "Almost there";
opinion();

Collapse
franko4don profile image
Nwanze franklin Author

Thanks, Making it mobile responsive defeats the aim of the project. I thought of checking the screen width of the device on page load and then decide whether or not to display the page or prompt the user to use a larger screen. ES7

Collapse
danielordonez profile image
Daniel Ordonez

Yeah, it doesn't make any less impressive 🤟 and interesting.
Bests of luck with the dashboard project and the binaryhills 💪

Thread Thread
franko4don profile image
Collapse
nwosu247 profile image
Nwosu247

This is awesome. I need it on my desktop now. Weldone, Frank.

Collapse
franko4don profile image
Nwanze franklin Author

that can be arranged

Collapse
jeremiahnweke profile image
NWEKE EMEKA

Nice one guys. Very cool

Collapse
rinzadz profile image
rinzadz

Nice work

Collapse
nyeluofficial profile image
chukwunyelu okeke

Frank ma akwukwo

Collapse
devifeoma profile image
Judith Ifeoma Nwokike

Congratulations

Collapse
anichijioke profile image
anichijioke

Dis is dope...keep it pushing dudes

Collapse
charlesogomola profile image
Ogomola Charles

Nice concept guys, quite innovative and creative.