If you're not already aware of this, the concept is that we have 1 million checkboxes rendered out on the page and these are kept up to date. The state of these is kept up to date through all connected clients using Realtime. Let's go ahead and look at a demo of how this works and then we will talk about the huge amount of challenges that come with building something like this with this

amount of data. Okay so the concept is really simple. Anyone can connect to this site and when you check a checkbox this goes ahead and updates state for everyone who is currently connected. So we can just check as many of these as we want and everything is kept up to date. Now the challenges with this project are first of all on the client side. We need to somehow render out 1 million

items and there are genuinely 1 million checkboxes on this page without crashing a browser. So with that we can't physically render out in one go 1 million checkboxes or the browser would run out of memory and we would have issues. What we're going to do is use a conditional scroller which means we will only render out what is currently being scrolled to. So although it looks like these are

all rendered out on the page they are technically being rendered as we scroll and they are being gotten rid of as we don't see them anymore. So that's the first thing that we need to focus on. The next issue that we have is if we had say thousands of clients connected to this we can't be sending network requests down to our back end to broadcast this data. We would receive way too

many events at the back end and this would just really quickly slow down and it would mean that the client wouldn't be kept up to date because we would have delays. Of course we could queue these events to then dispatch and update the state on the client side but then everything would become out of sync. So what we're going to do is use client to client broadcasting and we're going to

use bi-directional web socket functionality to listen in for any client events and then mark these on the back end as checked and then of course that state will come back to the front end to then give us the fresh state. Now speaking about storing this data in the back end how are we going to do this? Well using a database is going to be pretty slow. We're going to have to update each of these

1 million records and then when we retrieve this state it's going to be slow as well. So we're going to use bit arrays within redis to handle this and we're also going to be using bit arrays on the client side as well. We'll talk about those when we get to them in the course. There are a load of other issues here like how do we store the state in the client side of everything that is being

checked. Within Vue we can't really use a ref or a reactive object for this because storing 1 million items within there is once again going to crash the client side. So there's a huge amount to learn here even though this is a fun project you can take this away and apply any of the concepts in this course to something else where you're handling a huge amount of data. Probably

not always 1 million check boxes but it should help you out. Okay so I'm just going to give the page a final refresh and as you can see it's incredibly quick to load this state in. Let's go through the course and see how we can build something like this out without crashing our server or the client.