Newline Storyboarding (Demo)
Let's talk about what we are going to build in this course
This lesson preview is part of the Real-Time Collaborative Apps with Next.js and Supabase course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Real-Time Collaborative Apps with Next.js and Supabase, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:08] For our demo project, we are going to build an application for filmmakers. Where the filmmakers can build a storyboard, collaboratively with other members in the film crew.
[00:09 - 00:21] The filmmakers should be able to create an account and create a storyboard and then share this storyboard with others. So once this filmmaker shared the storyboard, then the shared user should be able to edit this storyboard.
[00:22 - 00:32] What's important is that shared storyboard should not be publicly accessible for any other users other than the shared user. So here, for example, you have user 1, user 2, and user 3.
[00:33 - 00:38] So user 1 can share this storyboard with user 3. And user 3 can edit this storyboard of user 1.
[00:39 - 00:49] And then user 2 is a separate user that he can create a storyboard, but not share. So this is user 2 storyboard is not accessible for user 1 and user 3.
[00:50 - 00:53] Let's go to our app. So I have two windows on the left side.
[00:54 - 00:57] It's a normal window, a incognito window. On the right side, I have a normal window.
[00:58 - 01:04] So I'm going to log in on the left side with one of my emails. And you can see now I logged in with this email.
[01:05 - 01:16] And here I can click on this started storyboard, start creating, and it shows me storyboard page. And on the right side, now if I click start creating, I have to log in.
[01:17 - 01:23] So I'm going to log in with the different user. And as you can see, now on the header, I have two different users.
[01:24 - 01:38] So if I go to the storyboard page in both users, and if I add a storyboard in the left side, it doesn't reflect on the right side. So if I delete it, it's still the same case on the right side.
[01:39 - 01:44] If I add a new storyboard, it is not reflected on the left side. So this is the correct behavior.
[01:45 - 01:55] And then I'm going to share this storyboard with the user in the right side now . And as you can see on the right side, there is a eye blinking.
[01:56 - 01:57] So that means sharing. This screen is sharing.
[01:58 - 02:03] And you can add a storyboard on the left side. It is now reflected on the right side right away.
[02:04 - 02:11] So it's the same case. The user on the right side can do changes, and it's reflected on the left side right away.
[02:12 - 02:20] And same case now I can stop sharing and add stuff on the left side. On the left side, it is not reflected anymore with the right side user.