Technical Architecture Overview
Below is a diagram that shows the interaction between the different components of this application and how requests are handled and processed.
Client code is all stored in the client folder of the codebase. The client code is responsible for rendering data for the application. The client does not store or have access to user data. Instead, the client needs to request and send data to the back end, which is the server. These requests are usually made as axios post and axios get requests. Then the data attributes in these files are modified in accordance with the data received from server and rendered accordingly in the application.
An example is when the user is creating a new profile from '/connect/register'. All the information entered by the user in the form is stored in the data attributes of the Register.vue file. An axios post request is made to the server, where all this information is sent to the back end and a new profile is made for the user. When displaying the profile, an axios get request is made to the server which sends an API response (user information, user projects etc.) back to the client, which is then rendered on the front end.
The server connects to and updates the database for the application. It also have an API to handle various data updates and requests from the client Depending on the type of request made by the client, the server either retrieves information from the database or updates it. The client can make two types of requests to the server.
- Post request- If the client makes an axios post request to the server, then data is being sent to the back end which needs to be saved or updated in the database for the application.
An example is when a user registers. Data from Register.vue is sent as an axios post request to the server and the information of the user is stored in the database and a new profile is created for that user.
- Get request- If the client makes an axios get request to the server, that means the client is requesting for data from the server. The server then sends data (according to the request) and the front end then renders this data.
An example is when a user tries to search for projects. A request is made from '/connect/search' and the Search.vue file in client makes an axios get request to the server. The server then retrieves projects from the database and sends this information back to the client. This data is then rendered on the search page as project cards.
ConnectEd's main goal is to ensure that students are safely meeting and interacting with one another. To accomplish this, we use a proxy to redirect users to UofT Web Login to handle authentication. This helps us confirm that the user is a registered, UofT student.
When a user sends a web request to login, the request first goes to the proxy server where the user logins in using WebLogin. Weblogin returns the utorid the user who just logged in to the server. Using the utorid, the server can determine if the student as an account on ConnectEd. If a student has already made an account on ConnectEd, the server returns their profile page along with any projects they may have added. If a student is new to ConnectEd, the server directs them to UofT Web Login to '/connect/register' so they can finish setting up a profile.
The database contains all the user information about profiles, projects and tags. The server directly queries the database using Sequelize (which you can learn more about here). The server queries the database and sends the information back to the client for rendering on the application.