So let's go ahead and let's create this 404 page which appears when we click on something. So I'm going to create that route outside of our dashboard route group. So I don't want it to have this layout with the sidebar, with the organizational sidebar or the navbar. Instead I want it to be a completely blank slate. So I'm gonna go ahead and just create a board folder in the app folder outside of the dashboard and then in here I'm going to go ahead and create a board ID dynamic route.
So this way this will be part of the URL which is dynamic and using that I will be able to load the board information and its storage and history of all the drawings we're gonna have inside. Now inside, it's important that you create a convention file page.tsx, and let's go ahead and name this board ID page. Let's return a div board ID page and important to export default board ID page like this. And now if you go ahead and click on this you should no longer be having a 404 instead it should say board id page like that. Now go ahead inside of this board id and create a new folder underscore components this is where we're going to put some reusable components and let's start with the first one canvas.tsx.
We're gonna mark this as use client because it's gonna be very interactive and let's just export const the canvas component for now. Let's return a div saying canvas. Now let's go back inside of page.dsx here and all I'm going to do is render that canvas component from our underscore component so what you should see is just the text saying canvas. Now let's go ahead inside of the canvas here and let's replace this div with a main element and let's go ahead and give this a class name. The class name is going to be hFull, widthFull, relative, bgNeutral, 100 and touchNone.
So by giving it this bgNeutral 100 it should darken the background a little bit. If you want a better effect, you can go to 500, but keep it at 100. It will look good because our floating elements will be completely white and have a little shadow so it's going to look okay. Now let's go ahead and let's create another component which is going to be called info.tsx. So let's go ahead and export const info here and let's just return a div saying info.
Now let's go back inside of the canvas and we are very simply going to import that info component from dot slash info. And now let's go ahead and actually give this info component a class name of absolute top to left to BG white rounded MD BX 1.5 height of 12 flex, items center and shadow medium. And there we go, you can now see our info component right here in this corner on the right side. So I'm going to write this to do information about the board. There we go.
So you can see how it's going to look when it has a bit more information around it. So in here, we're going to have a logo to click on so we can go back to old boards and then we're going to have the current board name so that we can rename it and in here we're going to have additional options in our reusable actions component to delete the board, copy the board id so we can share it and stuff like that. So this will be floating right here in a fixed position. Great. Now besides info let's go ahead and create another reusable component inside of underscore components which is going to be called participants.tsx.
So let's go ahead inside of participants here and let's very simply export const participants which is going to be very similar. So let's go back inside of canvas and below info add the participants from dot slash participants and now inside of here we're gonna have we're gonna go ahead and write class name absolute height 12 top 2 right 2 background white, rounded MD, padding of 3, blacks, items center and shadow medium. And in here I'm going to write list of users. There we go. So you can see how this is going to look like in here.
We're going to have avatars of the all users which are currently inside of this board and their borders are going to have respective colors to their cursor which will appear right here alongside their name when they are active. And the last one we're gonna create is right here and that's gonna be our toolbar. So let's go ahead inside and create another component here called toolbar.tsx. Let's export const toolbar here toolbar like this and let's go back inside of the canvas component and let's render the toolbar from .slash toolbar there we go, so you should have the info the toolbar and the participants Let's go inside of the toolbar now and let's go ahead and style it as well. So I'm going to give this div a class name of absolute top 50 percent.
So it's at half of my screen then I'm going to give it minus translate minus Y again 50% and then let's give it a left 2, a flex flex col gap y 4 and then inside I'm going to create a div with a class name of bg white rounded MD like this padding 1.5 flex gap y1 flex call items center and shadow medium. And in here, I'm going to write, for example, we can do divs and so then this one is gonna be square. Then this one is gonna be square, then this one is gonna be a circle. Right, so just so you get the idea, this one will be, for example, I don't know, what else do we have? Let's just write ellipsis again.
All right, so that's gonna be like our toolbar here but besides these elements we're also gonna have a one additional kind of part of the toolbar which is separated from this div which has bg-white. So outside of that div which is currently encapsulating this mock items, go ahead and create another div which is going to have a very similar style. So in here we're going to have a class name of VGWhiteRoundedMD padding 1.5 flex flex-column items center and shadow medium like this. And then inside let's create a div and write undo and let's do one for redo. Like that.
There we go. So you can now kind of see the layout which we are going to have. In this corner right here we're gonna have information about the board. In this corner right here we're gonna have a list of active users which is gonna only show a maximum of three users and above that it's gonna just display a number of how many users are there in total. And in here, we're gonna have our toolbar to select the pencil, square, circle, or whatever else we're gonna have.
Below that, we're gonna have our undo and redo buttons right here. And the rest is gonna be the logic which we're gonna work inside of here. Great, so just before we wrap this up let's just go ahead back to localhost 3000 here. Let's confirm that this is surely working. When I create a new board I'm redirected here.
Perfect, let's go back and let me just delete this to ensure this is working. When I go from here as well, that is working. One thing that I'm interested in is that if I favorite this board and go into my favorite boards, it's right here, alright. But if I switch on organization, then it's not here. Perfect, Let me just confirm that in here I should have a new one so this is new org.
So if I add this to favorites that is only inside of this organization. If I go back to the other one then it's unditaled. Perfect! Everything is working just as we expect and now let's just go ahead inside of page.tsx here and let's just prepare our props. So go inside of, let me just close everything, go inside of app folder board, board id page.tsx And let's go ahead and create an interface board ID page props to have params, which are board ID, which is a type of string.
And in here, we're going to have board ID page props. And in here we can extract our params and let's also prepare the canvas to accept the board ID prop from params board ID so we can go back inside of underscore components canvas right here and let's just go ahead and quickly create our canvas props so interface canvas props is gonna have a board ID which is a type of string and let's go ahead and destructure that and now we have our board ID and we're gonna go ahead and use it later in the info component right here. Great! So we created a nice little skeleton layout for our application and now in the next chapter we're gonna go ahead and actually connect to live blocks so that we can actually authenticate the user attempting to enter this board because we are only going to allow users from the same organization to look at a board. We're not going to allow anyone to just join and we're going to make sure that that logic is working.
Great, great job.