 Okay, so thank you everyone for joining and let's then begin the session. So I'm going to share my screen and first we begin by exploring some of the areas of opening. So as you can see, this is event.com. This is using the open source open event code base to run basically. As you can see, the homepage has three sections featured events, call for speakers and upcoming events. So basically an event is just like a real life event which can run across several days. It can be online, it can be physically or it can be both. And then there's also my managed event sections where I can see the events I am conducting. I'm the organizer of and then there's even details section and everything. So there are three kinds of users basically on event here. One is the admin. So for example, I can check the admin section of the site which a normal user can't and have access to all the events of the site. Then there's organizer, a person who organizes an event and they can see basically access all the information about the event like who is attending, who is signed up and see the tickets and orders, discount codes and everything. And the lowest tier is a normal attendee. So someone who has bought the tickets. So these are the three tiers of users. There are also other permissions as organizers and we will discuss that in a moment. So the topic of this workshop is how to install and get open event server and frontend up and running. So open event has two components. One is the server, which has all the logic and basically authentication authorization database access APIs and one is frontend, which is basically the site you're seeing. It connects with the API and shows the information it's necessary to process it. So first we'll go through server and then we'll go through frontend. And because basically this is an interactive session, I'll be taking stops in between and asking you questions if you have any doubts. So please write your doubts in chat as well. So whenever I stop, I'll come to chat and see if you have any questions and answer them. So first we'll start by installing the server. So as you can see, I'm on the server repository and the first thing we check out whenever we started an open source project is the readme file, which is rendered by default on GitHub. So here I can see that there's installation instructions. So I'm going to choose local installation instructions and see that the dependency is required to run the server of Python 3.8 Postgres and OpenSSL. So let's do the steps one by one and I'm basically using a clean slate Docker image of Ubuntu. So anything that you face while installing it in a bare matrix machine, I'll face that as well. So we'll solve that together so that I do not skip a problem that you might have on a clean machine, whereas a setup machine, which I already have. So then let's go to step one. So the step one of starting any project is to basically clone the project. And if you want to contribute to a project, you need to fork it and clone your fork. But because I'm going to basically install this project only and I'm not going to contribute, I don't have, I already have a fork and it might be behind a bit. I'm just going to clone the origin, the upstream repository itself. So I'm going to clone this and once it has been cloned, I'll CD into the directory. Now I'm in this directory, I'm on the development branch. Now the next thing I need to do is install the system dependencies. We have instructions for macOS, but the guide assumes that you use Linux. So macOS instructions may be a little bit outdated. So let's go to the Debian Ubuntu instructions which I'm using and also is the recommended development platform for both server and frontend and let's copy this command. Once we CD into the directory, almost all the commands assume that you are in the directory. Sometimes people are not in the open event server directory and they run the command and then they face there. So please ensure that you are in the directory when you are running these commands. So I run this, I put in my password and I press yes on installing the dependencies. So while these dependencies are being installed, I'll ask that if some people have any questions. So by now, I think nobody has any question. So if you do have any question, don't wait and just write it in the chat so that when I take a break, I can look at it and answer them. So when, for example, now you are seeing this error that something was not found. So this happens when your repositories are not updated. So for that, as you can see that Debbie is helpful and it says that you may run this command to face this problem. So I'm going to run sudo update. So this is the first command you basically run when you install a new Ubuntu system or something else. But sometimes the repositories are updated in between and if you face this not found error, you can run this sudo update command. So now let me run the command again and get with the installing of the dependencies. So now this installation command has given me a prompt to enter my time zone information. If you are basically running a configured Ubuntu, it already has the time zone information, but because I'm running it in Docker, it does not. So I'll just put in Asia and Kolkata to set up my time zone. So now the command has completed, but it has given this instruction that if you want to start the database server, you must run this command. So basically most of the time when you install post SQL, it starts automatically, but sometimes it does not. So to check if it is running or not, I can write psql and it is saying that could not connect to server. It means that it is not running. So let's run this command, which was given to us in the installation instructions. So now it's saying that you must run this as cluster owner, postdress or root. So there are two ways you can run this command. Here you can switch the user to postdress and run this command, or you can just run it as sudo. So I'm going to run this as sudo and now the server is running. And if I run this command again, it gives us an error that a roll docker does not exist. Still, it means that it's running. If I want to confirm it, I can again switch to postdress user. And I have now entered the command line interface of postdress SQL. So now it means that the server is running. I'm going to quit it and then move on to the next command. An important thing to note is that the server is only compliant with Python 3.8. So if you have Python 3.9 or Python 3.7, it won't work. So luckily, the Python version which was installed with this was Python 3.8.2, which is Python 3.8, so it will work. But if you do not have Python 3.8 installed by default, then you might need to use PyEMV to install it. So PyEMV allows you to run multiple versions of Python simultaneously. So it's very important. But because we are short on time and I'm just demonstrating how to do this, I'm going to skip that part because I already have to point it. But if you face a problem like that, use PyEMV. So now we will go to the next step and which is installing poetry. Poetry is like PIP. It's a Python package manager. But PIP has limitations like it does not have proper dependency locking mechanism. So sometimes if I install a package and I use it on PIP on server to install it again, it might resolve in two different package versions which might result in incompatibility. So for example, if I say I want request 3, and while I was installing it locally, it was request 3.1. Now once I install it on server, 3.2 or 3.3 might be released. And it might cause a compliancy errors. So poetry locks dependencies versions. And also it has a dependency resolution system which PIP does not have. So in PIP, order of listing dependencies matter. So in poetry, you can list it any way you want. It should always reduce the resultant reproducible bits. So I'm going to copy this command to install poetry. It gives me two errors that curl is not found and pythons not found. First let's solve first error curl not found. So sometimes when you're running some command, it may happen that the required dependency is not being installed. So you might have to install it manually, which we do by app. So sudo apt install curl. So anything which is not found, first you should try to sudo apt install and the name of the dependency. So I'm going to do that and I'm going to run this command again. Now it's saying that Python is not found. But how is this possible? We installed Python just two commands before. So in modern versions of Ubuntu, Python is not installed by default. Or if you're using an old version like Ubuntu 18, Python may result to Python 2 by default. And that's not good because we want Python 3.8 to be used. So a very easy way of doing that is to explicitly write Python 3. So now, as you can see, Python 3.8.5 prompt is created or you can even be even more explicit if you have multiple versions of Python 3 like Python 3.6 or Python 3.7, you can say Python 3.8 and that will also resolve to Python 3.8. So I'm going to run this command and I'm going to say Python 3. Now it will start downloading poetry and installing it. And one thing important to note is the instructions given in the installation prompt, which says that it will add this to this repository, a particular directory, and you have to add it in environment variables, path and everything. So a general rule of thumb is that if you install something and it requires sudo, it is added to the path by default because it is in bin or something else. You use a local bin or user bin. But if you do not install something with root or sudo, it means that you have to manually add it into the path. So as you can see that it's saying that if you log in another time, if you open a new terminal, it will be by default added to your path. But if you want to do this in this current shell, you have to run this command. So I'm just going to copy this command and run it. And similarly, you could also run this command, which would have the same effect. Then the next step is to run poetry install. This throws an error saying that the currently activated version Python 3.8.5 is not supported by the project of Python 3.8.6. We have basically logged the Python version to Python 3.8.6 because we do not want people with Python 3.7 or Python 3.9 trying the project and then coming across errors. But because I know that Python 3.8.5 and Python 3.8.6 are compatible, I'm going to change this in the configuration. However, I recommend that you use PyEnv to install the correct version, the required version of the project. But as we are short on time, I'm just going to edit the project configuration. So we get an error and we're not found. We again use the same command to install win. And then the name of the software we want to install. Now I'm going here and making the Python to be Python 3.8.5. Again, this is a workaround just for demonstration purposes, but you should actually install the required Python version. So I'm again going to run this command poetry install. So now you can read that poetry is treating a virtual environment. So what is a virtual environment? If you install something using pip, like pip install something, it installs it globally. So it may happen that two different Python projects may have different requirements, like one may require Python request 2.4, other may require request 3.6. And it may result in conflicts. So rather using virtual environments, we install a project dependencies in a particular folder. But the project will not know where to look for its dependencies until and unless you activate a virtual environment. And that's why we activate this virtual environment using source and something else. But poetry makes it very easy to do so. It automatically creates a virtual environment and activates it. So if you find yourself that you have installed some dependencies and the project is not finding them, you get treated with module not found error, first see that the virtual environment is enabled or not. So for example, right now, virtual environment is not enabled. And the next step is written that if you want to activate the project's virtual environment, you need to run poetry shell. Once I run it, as you can see, I'm in the virtual environment. And this is signified by a bracket and the name of the virtual environment. So this is how you know that you are within a virtual environment. To deactivate it, to return to a normal, non-virtual environment, you have to write deactivate. But again, I'm going to just run poetry shell to get into the virtual environment. Then I have to run this pre-commit install. So what is a pre-commit? So basically, if you create a full request and it has some changes which like the imports are not sorted, you have imported something and are not using it or the files are not properly formatted. This is something which will already be rejected without going further. So that's why we want to ease the contributors by automatically sorting the imports, removing unused imports and formatting the files. And we have already configured that. So whenever you commit, it automatically runs and does that for you. So for that, you want to pre-commit install. Let me activate the virtual environment again and now pre-commit install. And this is installed now in the directory. Then we come to the next step of creating the database. So till now, does anyone have any question? So if you have any question, again, write it in the chat. So now let's move on to the next section, creating the database. So first what we want to do is we want to make ourselves the super user in PostgreSQL so that we don't have to run the commands as PostgreSQL user using sudo again and again. It's recommended that you do not use sudo. You don't make use of sudo normal because then you may run some command which is not safe. So thus we want to reduce the use of sudo in our time as much as possible. So I'm going to first create myself, make myself the super users. I'm going to run the command and then I'm going to create the database for open event and the test data. Now there's additional information that this method is pre-authentication method does not need password authentication and it is easier to write and do on a local machine. Then we have some instruction from Mac users. If you're using Mac, you can use them. Then we come to the next step of generating the configuration. So first we copy this .env.examplify to .env and let's see what's present in .env. This database URL, this test database URL, then there's some configuration. So basically environment variables on servers are used to configure the software. And when we are developing locally, it becomes difficult to manage environment variables because we don't always know what's set there by default. And you may lose environment variables when you restart your operating system. So we use .env files and the syntax is the name of the environment variable equal and then the value of the environment. Then we see that we have to add a secret key here and this is the step which a lot of people miss. So we need to add the secret key to the project. If you don't add it, it will run but it will give a warning and in production mode it won't run at all. So this secret key is used to sign the login tokens and there's some other cryptographic stuff that happens. And it is very important that you do not share this secret key with anyone else because if two servers have same secret key, it means that one user of the server can log into another user of the server. So that's not good. So for example, if I have a secret key, same as the secret key on inventory.com and I am the user with ID 1 and I generate the token locally, it will also work on inventory.com and I will be logged in as user 1 which might be admin. So that's why it needs to be random and secure. So I'm going to copy the command which is given to generate the random string and then I'm going to copy this and add this in .EMU, secret key and then like this. Then we have next command which is creating the database tables. So I run python3 create dv.py. I have to enter the email for super admin. I recommend you to enter your real email here because it might receive some emails to verify your email and everything. And if you do not have access to the email you put in here, you might not be able to verify it. So I'm going to put a password. This is a new password. You can put anything here but you have to remember it obviously. And then the database tables are now created. I run the next step to stamp the head of the database to mark that the migration has completed. Then in the next case it is written that if you have some different password and username as given in the instruction say you have to change the database you are accordingly. Then we start the application. So we know the salary process for now because it's not needed. It's not compulsory. And we run the application using python3 manage.py and server. And now the server is running. So let me show you that how you can guess that the server is running. If I curl on localhost 5000, I give this entire illegible html. So that's not good. But if I go here, localhost 5000 v1 slash settings, I can get this information which means that the server is running. There are some settings. If I go to v1 slash events, you can see that I get data. There's no event right now but I'm getting the data. So basically the hello world of this server is just slash v1 slash settings. So it's working. But now let me show you that what happens with PX is this localhost 5000 on your machine. So let me... So I'm going to go back to my browser and when I open localhost 5000, I get this documentation. So it is open event API server documentation. It has information about how to authenticate with the server, how to create an event, how to register a user and everything. And similarly, I can go to v1 slash settings. And here I can see that most of the things are null but I have settings. Similarly, there's events. And one more cool thing about it is that we have very basic support, very initial support of GraphQL. So I can come here and write query and settings. And you can see there's auto-complete in here. So I don't have to guess what things will be written in the API. I can get app name. I can get cookie policy. And then if I query, I get the settings back. So this is basically how you set up the server. And now the server is up and running. The next would be how to set up frontend. But before that, do we have any question? Cool. So then let's move to frontend. So the server is the brain of the project. Frontend is the UI. And similarly, we have local installation instructions for frontend as well. It's much easier to install frontend than server. But server as well is not that bad, as you saw. We installed it within 20 minutes. So first let's see the dependencies of the project. So we need git. We have that already. If you don't, you can install it using sudo apt install git. Then you need node 14. So if I go to the link, there's the download link. So you can use that. But I'm going to use the command line for installing it. And let's do that. So as I said, if you want to install something, you generally write sudo apt install. And then if you want to install node, you write node. So if I enter the password, I see that there's no package node. So if you search, you'll find that the package name is called node.js on Linux. So I run sudo apt install node.js and now it will be installed. If I run node dash dash version, you'll notice that it says 10.19.0, but I want node 14. So what happens is that sometimes, as I said previously, you do not have the correct, required version of the dependency. So we need to use something like nvm to install multiple versions of node. So let's go and search nvm. Let's go to the project and we have this installation instruction. So I'm going to copy this and run it. So like when we installed poetry, this also did not use sudo and thus we need to add something in the environment for being able to use the command. So now I've exported the required environment variables. Now if I run nvm, I get this entire information. So you can see the syntax. It's very simple. I run nvm install and 14.16.0. For example, any node version you want to install. So I'll just run it. It will download the proper version of node and search it up for me. So because there was no proper node version installed before, it has installed 14.16.0 and set the default version to 14.16.0. So if I say node-touch-version is 14.16.0, but let's say you installed multiple version of node. Let's say node 15, node 13, node 12, node 10. And if you want to use a specific version or make it default, you can use this command nvm alias default and the node version. But as I have installed and set the correct version as default, I'm going to go ahead with the documentation of front-end. So now I need to install yarn. If I go to the site, you can see that you can install it using npm. So once you've installed the correct version of node, npm is installed with it. So I'm just going to run this command and this work. The next step in the documentation is to clone the project. So again, it is recommended that you fold the project first, but for demonstration purposes, I'm just going to clone it directly. Now the project has been cloned. I seed into the project. And the next thing is that we want to install the dependencies using the yarn command. While the dependencies are being installed, do we have any questions still now? So the dependencies have been installed. Now the next step is to again copy.env.example.env. And let's see what's present in .env here. This is Mapbox access token API host, which we'll talk about in a bit. And some other configuration like server, you can configure the front-end using .env command here as well. Now we run the next command, alternate generate. Now I get this error that getTex is not found. So for this, we need a program called getText. And this is why it becomes difficult for people using windows because a lot of dependencies are not present on windows and are also difficult to install. So for that, I recommend that you use Linux or if you still have to use windows, use WSL2. So I'm going to install getText using sudo apt install getText. Sir, hello. Yeah. Sir, can you hear me? Dave here. Yeah. Yes, sir. Sushant is in it out. Yeah. So Sushant has written. Can we set up this project using Docker compose something like that? What if we don't want to store anything on my local like PostgreSQL can't use Docker image. So for deployment of the project, Docker is recommended. We have instruction for deployment using Docker. But for development, we do not recommend Docker because for development, you may, you will need to then rebuild the image again and again. And there is a way that you can mount the project in the Docker container. But it's not that intuitive. So for local development, we do not recommend Docker. And for frontend itself, Docker would not be feasible anyway because it requires rewatching the configurations and source files and regenerating the project. So if you want to deploy the project, yes. Docker is completely recommended. You do not need to install PostgreSQL or anything. But if you want to develop it locally, anyway would kind of need it, PostgreSQL and everything. We may think in future to have a development version of the Docker image. A lot of people try it and they realize that it's not that great because it requires constant rebuilding. So that's why we do not recommend Docker for development. For deployment, this is the, it is the definitive and supportive way of deploying the open image server and frontend. So I hope that answered your question. And if you have any other, you can write it in the chat again. So you can see that we have finished the generate command. And then let's see what's the next step in the installation instructions. So this important note said about people for people using Mac and other stuff. And then we can start the server using command yarn start. I'm, it's not the frontend is being built. And it's a bit heavy command requires a lot of CPU and then it uses it might take some time if you have less resources. I basically have 16 GB RAM and still takes a huge chunk of my memory. So the duplication warnings and errors you've seen are from the third party dependencies they're using. So unfortunately, this is not something we can solve. So just ignore that if you see anything like that. However, if you get a real error, the build process will stop and it won't succeed. Some people have problems that we think the process is stuck and it's working. So if you think that the process is stuck, you can press enter. And if you return back to terminate means that it's not stuck. So that's a way of knowing that if the process is stuck or not. So now I'm saying that serving on localhost 4200. So let me go to localhost 4200. And now you are able to see that I have this empty page. So it looks like this event.com but it has no events. That's because I'm connected to this local database which does not have any event. So this is basically how you install frontend as well along with the server. Let me first clear the application settings and reload the page. So here you can see it is written open event. And basically this is the dev server it is connected to. If we want to connect it to our local server. So we have local server running on localhost 5000. So if we wanted to be connected to that I can go to .emv file and change the API host to localhost 5000. And when I run the server again it will be connected to my local server. And similarly if you want to solve an error which for example is on event.com you can go to .emv and change the API host to httpsapi.event.com and it will work. It will be connected to event.com as it is connected to the dev server or the local server. So sometimes you see a link on issue on frontend and it says that this is the problem and people flick on it and they say that I cannot access the link. It may be because it's for an event which is not owned by you. So for that you can create your own event on event.com and link the project the frontend project locally to api.event.com and fix it. So for example now it's running again and if I reload the page now it's linked to my local server I can log in. I'll put in the super user email and password and now I can access the admin page as well. So continuing from the thing I was talking about there may also be a link which may link to an event admin section of event.com and that is something that you cannot even create yourself. For example if there's a link for event organizer page you can create your own event and get access to your own event organizer page and solve an issue but if it is a link of admin section if this is a bug or feature implementation of admin section then you cannot access admin section on event.com so you will need to deploy your own server locally and then basically link your frontend development environment to low close 5000. So for example I go to settings or I can see and change settings to my local server. So for example if I change the app name to let's say Hacktoberfest so this app name is event.com I can change it to anything else. Putting in api URL as localhost 5000 that will aim to have fun and save and remove the cache of settings and now if I reload the page you can see it says Hacktoberfest. So for example if you want to deploy the server in frontend for your college fest you can change it to your liking and basically this is how both server and frontend are deployed and connected to each other. So till now does anyone else have any other question. Yes if you have any question you can also turn on your microphone and speak directly. Yeah you can also speak in Hindi if you want. Hello. Hello. What is the error you are getting? Yeah so that's what I explained. So when you install the server in frontend locally you do not have an event. So if you want to have an event you have to create an event. So if you create an event you will start seeing it on the front page if it fulfills some criteria. Otherwise you can create an event and go to management section and you will see it there. So you won't see the same thing as event.com because event.com the database is different. The API is different. So you won't see that locally because your local database is not the same as the database on your Internet. So if you want that you will need to change the .emv file and write api.eventure.com as api host here. So if you write this here and run yarn start then you will see same events as on event.com but then again you don't have access to admin for organization section. So once this builds I'll show you that even on localhost 4200 you'll see those events. Now in this project we are using yarn. So in this project we are using yarn because at that time yarn was much faster than NPM and even today I would say in my experience yarn is much faster. So that's why we are using yarn. So now as you can see I'm on localhost 4200 and I can see the same events as on event.com. So any change you do in open event frontend will be the UI change. So you can still do that. I can go to the event card file. I can change the background color of event card and it will show black here if I change it to black. So you can still do that. But obviously it won't show up on event.com unless that change is merged into the code. Does anyone else have any other question? Okay so then I think we move to the next section which is the exploration of code base. So first let me open up. So this is the code base and this is the server code base and it's vast so we will not be going too much into detail but I'm just showing you some of the things that others also ask. So this is for example drcompose.yml. So the nice thing about this is that if you want to deploy open event server somewhere you don't have to install post address and everything you don't have to configure a lot of stuff. You simply have to do three steps. You have to clone the repository. You have to copy .env.example into .env. You have to add a secret key and then you have to just run the command drcompose up-d. So once you do that we have post address, redis and everything pre-configured in this file. So the containers for each of the required dependencies will run and you won't have to configure anything but obviously it's not recommended for development because you will have to recompile and recreate the images again and again and this we push the images on every commit on development branch and also tag commits on master branch whenever we create a release. So for deployment purposes drcompose the preferred solution this is also how we deploy on production in production and we have integration tests and unit tests. So whenever you create a new features recommended you add that. The main code is present in the app folder and it's separated by layers. So API extension GraphQL models. So models are basically tables you know represented in objects. So for example we have the event model which has all these particular columns and this is what we use basic SQL alchemy model to map between the database rows and Python objects and then we have API which is the crux of the whole ecosystem and we have different APIs like mails API and services and sessions and we are using JSON API to which is a spec API format and it has different spec on how to sort and filter and join and model your relationships. So this is basically the API section of it. Then we have schemas so schemas are related to the JSON structure. So for example a model may have sensitive information like password and you know email that we might not want to leak or also we would want to have some kind of validation that if someone is putting in a minimum quantity and maximum quantity minimum should be less than maximum and so on and so forth. So we add that in schema. So this three layer system goes that and the core we have models then we have schema and the API bridges the schema and model and we use this schema to either deserialize some stuff or serialize some stuff out of the system. So this is basically how the code of the server works. Doesn't anyone have any question related to server architecture? Do they want to ask anything about the server or do they want to understand anything about the server? Then next let's explore. Yes, does anyone have any question? Yes, Arif, I have one. So like event is a big platform so if I want to contribute to a part of it, how can I find that particular component or like that particular part of the project? Yeah, so that's a good question in regards to what we were going to discuss in terms of exploration of front end. So let's go to front end and let me also first, because we were discussing the server itself, show you that if for example you want to search for or debug a particular part of API, how will you do that? Let's say you have to debug a big group button API, right? Or for example, you have to debug video stream API. So we have conveniently named the folders and files in this corresponding to APIs present in them. So if we want to check video stream API, you can simply come here and see that there's a video stream.py file here. And another way is that you write control P and you write video stream. Everything related to video stream will come up, the API, the model, the schema and other stuff. So let's say I go to video stream API and I have several things here like for example, I have join stream endpoint. So whenever you open a particular stream, for example, even this page when you open this route was called and this code ran. So first it found a stream and if it was not present, it gives 404. And then it checks that if the user can access the stream or not. So in the video stream model itself, we have this function user can access or not. So first we check that if the user is moderator, then obviously the user can access it. So user, his moderator function checks that okay, if the user is staff, which means that if the user is admin, or is the user co organizer of the event, then it will automatically return true. Right. So if you are a co organizer or organizer of an event, or the owner of an event, or you are an admin, you are allowed to join the video stream and not only join it, but also join it as a moderator. So if you are in big blueprint, you'll automatically be made a moderator. Otherwise, we check the video moderators and see that the user's email should be in that list. And thus you may will also be a moderator. Otherwise, if you're not a moderator, but you are a speaker of the event, then also you can join a particular video stream. Otherwise, we check that the current user should have a ticket for the event. So if you have a ticket for it, and that ticket has been completed or placed, then also you are able to join a session. Right. So once it is confirmed, if the user cannot access the session, we throw an error that we do stream not on. We don't even want to say that we do stream off on. We just say it does not exist. Otherwise, then we create the big blue button room, and we create the join token. We put in either the public name of the user or the full name or the anonymous name of the user. And we make the user moderator. If the person has moderator access, otherwise the person is an entity and we join it. So basically, this is how a standard flow of authentication authorization works. And similarly, I can also come here to the chat token function. So if you see in the chat, the side panel, there's a chat option. And whenever you click on that, this endpoint is ran. And again, we get this video stream. We check if the user can access video stream or not. And if they can, we get the rocket chat token and return. Otherwise, we handle the error. And then this video stream list object, we do the same kind of checks and balances there before posting. We validate the data or otherwise before getting, we do some stuff as well. So this is how we basically find an API. Similarly, if we want to find setting API, I can write setting here after pressing control P in visual studio code, and I can go to setting API. And then there, I can see the logic here as well. So we have various hooks like before get, before post, before update, before delete, and they get run after appropriate HTTP methods. So this is how you find something in server. Let's say you want to find something in front end. So this is the front end part portion. Hello, I read. Could you please hide a message event.com sharing your please. Thank you. Okay. So this is the front end code base. And this has various parts. So the main project part is present in the app folder. And this has components, config controllers, extensions, helpers, models, routes. So if you want to start on a particular page, and you want to understand it where the code of that page is, the first, the easiest way to do it is to go to router.js. Router.js lists all the pages in the project. And this is where you should start. So for example, let's say you are on this page itself, and it says event.com slash E slash some num some identifier slash video slash workshop slash some 299. So how to find that how where to find this particular page, the logic of that page. So you go to the routes one by one, you slog in register is a password is that you come to this, this dot route public, and you see that the path is slash E slash event ID, which means that it matches with the path which is written in your URE. Right. And then you go again in this route and this it's the nested out. So you come here and you see oh this dot router stream matches slash video slash video name. And then again, here it is route view, which matches stream ID, which means that it is public stream view. And then we have route for that. So if I go to that route, now I am in the entry point of what happens when I go to the URL in my URL bar. So whenever you go to a page in front end, the route is the first part that gets executed. So here I can see that there's tightly token and render template. The main part of the route is the model, model fetches the data, which needs to display on a page. So first we get the event for which we are displaying the video stream. And then we fetch the video stream using the video ID in the parameters. Right. And this is the logic of fetching, but where's the logic of the UI. So it's present in the template. So again, if I search public stream view, I have this template file view.hbs where we can write any HTML, but also we can write use components here. So I can see that we have used a public stream video stream component. And let's then go to this thing, public stream video stream. And now I have a component.ts file and also an hbs file. So first let's say in the video stream.ts file, I have this component which has a lot of instance variables. It's a JavaScript class and it runs setup. So if I go to the hbs file, this is the logic, this is the template which gets run when the route is executed. So I have this, this did insert this dot setup, which means whenever this component is inserted into the page, this function will be run. So in this function, we load the video stream. And if we see that the provider is JC, we stop loading something. If the provider is YouTube, we extract the ID and set the YouTube ID. If the provider is Vimeo, we set the Vimeo ID. If the provider is the YouTube button, then we then we get the URL join URL using this join video stream function we saw in the server just now right now. And we do this all of these things. We set the iframe URL. And in the template, we just use the same instance variable in this component that if something is loading, we show the loader. If we have the iframe URL, we simply show this iframe. So if it is jitc, then the iframe URL will, sorry, if it is big blue button, then we show this iframe URL, which was shown using the join video API call. Otherwise, if the video provider is jitc, we again use this jitc stream component, which we'll come to in a bit. Otherwise, if it is YouTube, then we use this YouTube iframe. If it is Vimeo, we use this Vimeo ID iframe. And then we have this side panel component that you have in all the video rooms. So again, let's say you have a bug in jitc stream. So you can search jitc stream, and you come across this component and also this template. So in jitc stream, we have this div. And we have this function which runs whenever this component is instantiated. We get the stream, we get the channel, we configure what kind of buttons we want to show. And then we call the external API on jitc and insert it into the document. So this is the level by level drilling of how to you reach into the component. But there's another way if you want to visually do this. So let's say I'm on inventia.com, I want to see that what is the component which is used here, I want to change something in this. So you can install ember inspector, which is the dev tool for ember. And if I go here, and if I click on this and say inspect ember component, I will be shown that this is event card. And it is highlighted that what is covered by this component. It is highlighted that what is the argument of this component and what is the function which is part in this component. And this is how basically you do it. The component is made of multiple components. So it is also shown this way here that event card has component of safe image, it has smart overflow, it has event date and time, and it has event venue, and another smart home and so on. So this is basically how you can get to a component or if you want to understand, you know, bit by bit, then it is the route controller component. And this is how you drill into bits and pieces. So by now, does anyone have any question? If you want to ask something about the platform itself, any general question about setting it up or, you know, some kind of thing you're interested in in the platform, how does it work, how something happens. So we can take up those questions as well. So Neha asks, what are HBS files? So HBS files are handlebar files. So handlebar is a templating format. So I am showing you the file itself. So so this is a handlebar file. And like in React, you have JSX and view, you have view templates in Ember, you have handlebar files to do the template formatting and logistics. So if you want to conditionally show something, you can write this statement. If you want to loop over something, you can write the for statement. And you have multiple ways of checking something. For example, if you want to check if something is equal to something else, you use the equal helper. And if you want to check multiple things, you use the end helper and so on. So this is basically how you show something in handlebar file. So this is also, for example, if we go to video room form, you have each helper if you want to loop over something. So let's say I want to show the emails of a video room moderator, I loop over data stream moderators and then show the moderator email and map the action to it. So handlebars is used to conditionally create interactive UIs. So do we have any questions? Anything you want to ask about the platform itself, not necessarily related to coding, but any other thing as well, we can take it up. Yes, Ashu, you can ask something if you want. I can't understand what you are saying. So does anyone else understand what you are saying? Yes, he is asking about good first issues to start with a contribution. Okay. So there may be some issues marked good first in the front-end repository. There are also low priority issues that you can start with. I particularly don't have anything in my mind currently, so I don't know, but other people can help you out on the Gator channel as well. You can join the channel which I think people have linked above and they will be able to point you to some easy issues. Then does anyone have any other question? Yes, sir. Basically Raj is asked about a question about GSOC and he is asking that whether he may ask some mentor to review his application proposal before the time of the proposal submission starts or after. So it depends on organization to organization. If you are asking some person who you know personally, then obviously you can ask them to review it before as well and other organizations have mentors who are available before the period as well. Some of the organizations may say that we only see the proposals once the starting date has begun. So it depends on organization to organization, but if you know the mentor personally, then they will be able to review it before as well. Okay, sir. Thank you. Okay. And yeah, also Mayu has said that proposals are fine, but the most important thing is that previous introduction should be good when you submit the proposal, so that you have a good footing among the competitors. Yes, sir. Yes, sir. Sure. I will contribute to the code base. Then does anyone have other questions? So if anyone else does not have any other question or something they want to, if you're not necessarily a question, if you want to explore a part of the project, do you want to clear something about the project itself? You can do it as well. You can ask questions about contributions. Otherwise, then, if we do not have that, then we might be in the workshop soon. So it's kind of, you know, last chance to get in the questions before we end. Like, if I want to make a trigger for one of the functionality in event year, so where should I write the code of trigger? If you want to change something, what? I want to make a SQL trigger for some action like clicking on some button and after that, action should be performed on database or something related to that. Okay. So you would want to first create an API for that. For example, if you want to insert something into the database, so let's say this is the API we recently created, we wanted to delete the unused discount codes. So first of all, we created a new route for event discount code that we didn't use. We marked that the method it should operate on is HTTP delete. Then we wrote the code here that find the discount codes which do not have any order and for which the event ID is equal to the event ID we got from the URL. And then we delete this and commit the session and return that how many discount codes were deleted. And then on the front end, you would use, let's say there's a button which says that delete the unused discount codes. And then you would write this action and then a function's name. And in the, let's show you the real life example for that. So for example, this is a delete moderator action. And in the template, we have this loop where we are showing the moderator email and on the cross button, we have written this action that this dot delete moderator and then we pass in the moderator as the argument. And here we receive this moderator as the argument. So I'm mixing two things, but basically, if you have a button, you mark an action on it. And then in the JavaScript file, whenever you click the button, this particular action will run. And then here you can call any API. You can call the delete discount code API. And this code will run on the server. And the database change will happen. So you don't trigger NSQL change on the front end itself. So it's not a direct thing that you click on the button and something is triggered in the database. You click on a button, an action is triggered, a JavaScript function is run. In that function, you might call an API. That API will release the server. This function on the server will run and your code will then execute and you can change anything in the database in the server. Okay. Thank you. You explained very well. I have to say you are very good at explaining the code base, Harib. It seems to be so easy. First click the button, action will be bind with the button and on clicking up the button, action will be performed in the JavaScript file. And then the database changes will be happen inside my SQL. Thank you. Yeah. So then we are coming to the end of the session. Does anyone else have any questions before we close the session? Then Shubham, I think that people are clear and they don't have any other questions. So I think thank you everyone for joining and I'll let Shubham take it from here. Yes. Thank you Harib for the stand. And now we will perform our ritual as on the ending workshop. So I'll request all of you to switch on your camera if possible and we'll take a picture as this would be our last session with Harib sir. And I have attended all three workshops and it was great like attending all three's. So if possible you can also switch on your cameras. So we have Mario Ajhar Ali, K Dev. Yes, nice Raj, Ching, Fai, Neha, Eric, Swee. Yes, hello Raj. Yeah, Harib has his own swag like all workshops, wearing his NY cap and sitting with all confidence. Yo, you want to say some words? We cannot hear you Mario, you are on mute. That's correct, that's the famous sentence, you're on mute, you're not audible. So thank you very much for this workshop. We appreciate yeah, of course Harib, thank you very much. It's really nice to see these workshops. So we'll post them in the upcoming hours. You can go back and watch the video on the First Asia channel. And yeah, I hope we see you in the community, we see you contributing or maybe using the platform. So keep in touch and have a good evening. Thank you very much. Back to you Chopam. Yes, so this was our ending of day eight of First Asia summit. Tomorrow we have one more energetic day, one more day with lots of workshops and lots of working. So I hope I'll see you all soon there with no time. So with this I end today's workshop. All of you take care and have a good evening. Goodbye. Good to see you. Bye.