Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

**Creating a Firebase Database Account and Adding Rules**

Firstly, we need to create an account that I already have. I'm gonna say John crypto and login, and as you can see we got data so we already solved these problems and so yeah this is what we have.

Next, we're going to add our Firebase database rules to make our application a little bit safer. So, for this, I'm gonna go back inside the Firebase so firestore database, go to rules. Now, when we initialize the project, now we are in the development mode where we allow read and write operations for all the operations to be honest, until we're not in the 23rd of May, so we will allow read and write operations.

We would like to change this, so I'm just gonna comment this out and I will write my own rules. So, first of all, we would like to just allow our users to read user documents if and only if they have been authenticated. So, I will create my comment and I will say "user documents can only be read and written by the authenticated users". Now, I will try to write my rule.

So, here is my rule so first we're going to say match, and then we're going to say the users collection, and then we can pass here a dynamic value which I will say user ID. But you could just add user ID, hello, it doesn't really matter. So, here I will open up my curly braces and I'm gonna say "Hello read", right, comma, and so like, Colin if request dot oauth is not null. So, if the user logged in, if user is authenticated and the request but oauth dot uid is equal to this document ID. So, what we have is going to be each document inside users collection. If the user is authenticated and its ID is equal to that I so the document ID then we will allow to read and write operations.

So, I will just tap this inside and now we would like to have one more rule for our problems document. So, I'm gonna say "problem documents can be read by anyone but it can only be written by authenticated users". Right? This is going to be our database Rule, so here we just allow for all users if they logged in or like they logged out they can read the problem they can see the data but if and only if they logged in then they can like the problem right?

So, this is how it looks like. I'm gonna say "match" the problems uh collection and then you'll get a problem ID and open up my curly braces so tap inside allow read if it is true so it's gonna just work in any case and allow right if so colon if the request dot oath is not empty.

**Publishing the Database Rule**

So, now I will just publish this. Now, it's been published and changes can take up to one or two minutes and then so if we just take a look at it here, the so it's been published. It's going to be effect in our application and inside this versatile dashboard we got three different domains and I think I like this one the most.

So, we have the GitHub repository name and then dotversal.app. So yeah, this is the end of tutorial to be honest, and now you can add a lot more stuff into this application. You can expand this problem list or you can just feel free to add your solutions by the way. Into the solution tab where when we click them you will get to my YouTube channel but put your YouTube video IDs into that solution that I showed you in the previous sections.

So, maybe you could add a like the user profile page where when you go to that user profile page you will see all the problems that the user solved and like the um problem submission history which problems did they like they disliked. And maybe you can add a comment section to each problem where users can add their own Solutions with the explanations. So, really a lot more stuff infinite amount of uh so like the possibilities you can add into this project.

**Conclusion**

And if you do that just let me know in the comments and I would like to see your versions. As always, if you like this content and the project and it helped you just feel free to like And subscribe it really supports the channel a lot. If you have any problems any bugs any any stuff that is not working or you would like to just learn it from me or our Discord server just click the link in the description below you can join to other developers who already built this project and you can learn from them.

And I will also be there to help you out. So with all this, I really thank you for watching this tutorial and hopefully I will see you in the next project