Web application - React.js + HTML + CSS + Node.js + Express.js + MySQL + JWT

In this project, I developed a web application from scratch. On the client-side, the following technologies were used: React.js, HTML, CSS, and some additional NPM libraries. On the server-side, we used Node.js, Express.js for APIs, MySQL for the database, and JWT for user authentication and authorization. The client and server sides are connected and communicate through APIs. All important security elements occur on the server, which verifies the authenticity of users using JWT tokens. Passwords are encrypted in the database, and all forms are properly validated on the frontend. The goal of the web application is to provide free learning to all users.

The web application Edusify for free learning consists of several key elements. The first important element is user registration and login. Users are required to register if they don't already have an account. Registration involves entering their name, surname, username, email, password, confirming the password, and accepting the terms of use. After successful registration, users are automatically redirected to the login page, where they need to enter the credentials they registered with. The same login process applies to existing users.

The next important element of the web application is the browsing and searching of learning materials. Non-registered users only have the ability to search for learning materials, and for browsing, they are prompted to log in to the web application. On the other hand, registered users have the right to freely browse all public posts by other users, gaining knowledge in the specific areas they searched for. Another key element of Edusify is the creation of learning materials. Users can create learning materials and make them publicly available for all users to view and learn from. Additionally, users can create private learning materials for their own use, including various notes, class materials, lecture notes, and more. Edusify also provides other important features such as editing learning materials, changing personal and login information, viewing other users' profiles, and more.

For the development of the web application, I decided to separate the project into two parts: the client-side and the server-side. The separation of the client and server allows independent development of these components. Separate development enables code reusability. Functionalities used on the client-side can be reused across multiple platforms, such as web, mobile applications, or desktop applications. The same server can provide services to different clients without the need to rewrite the web application logic. Separating the client and server also allows scalability. If the number of clients or requests increases, the server infrastructure can be scaled independently of the client-side. This enables resource adaptation and improves system performance. Furthermore, separation can achieve greater security. All web application logic and data processing can be maintained on the server, reducing the risk of exposing sensitive data on the client-side. It is also possible to implement more complex security mechanisms, such as authentication and authorization, on the server. Separated development also facilitates system maintenance. If a change or fix is needed, it can be executed on one component without affecting the other. It also simplifies testing and bug detection since each component can be tested separately.

The client-side of the web application is what is presented to the user. This includes pages, learning materials, creation of learning materials, user profile display, user logout, and more. The client-side is built using React. React is used to create components that are displayed to the user. During the development of the web application, React has been helpful as it allows writing JavaScript commands with HTML-like code. Doing the same with just JavaScript and HTML would be significantly more challenging. Various NPM packages are used on the client-side.

‍