An-Najah National University Faculty of Engineering and Information Technology Computer Engineering Department Graduation Project I Dima Eid & Sema Hodali Supervisor: Dr.Emad Natsheh Presented in partial fulfillment of the requirement for a Bachelor's degree in Computer Engineering Feb,2025 Acknowledgments First and foremost, all that we have accomplished in this project is because of Allah’s guidance and blessings. This project represents all the knowledge we have learned throughout our journey in computer engineering; also, we have applied and shown various features and software engineering skills. We want to express our deepest gratitude to our supervisor, Dr. Emad Natsheh, for his experience, guidance, and insightful guidance. His mentorship not only improved the quality of this project but also transformed it into something far beyond our initial vision. To my beloved parents and family, thank you for your support, patience, and love. Your belief in us has been my source of motivation. To our friends, we do appreciate your support and the moments we shared. Finally, we dedicate this achievement to our beloved country, Palestine. Despite the challenges we face, the resilience, strength, and spirit of our people inspire us to strive for excellence. Completing this project in such difficult times is not just our success, but a shared victory. Disclaimer This is based on the requirements of the Computer Engineering program of An-Najah National University. It represents the culmination of the student’s work, thoughts, and interpretations. As such, these academic materials should be used only if suitable for this purpose. The information, methodologies, and materials presented in this project are the result of the authors' research and dedicated efforts. Any opinion stated in this project does not specifically reflect the official views or policies of An-Najah National University. Contents 1 Abstract ……………………………………………………………….. 6 2 Introduction …………………………………………………………….7 2.1 Problem ………………………………………………………..7 2.2 Objectives ……………………………………………………...8 2.3 Scope Of the Work …………………………………………….8 2.4 Report Organization ……………………………………………8 3 Constraints, Standards, and Earlier Coursework………………………...9 3.1 Constraints and limitations……………………………………...9 3.2 Standards……………………………………………………….12 3.2.1 Four Tiers Architecture………………………………..12 3.2.2 Agile Model in The Development Of EduPro…………14 3.3 Earlier coursework 4 Literature review…………………………………………………………15 5 Methodology …………………………………………………………….16 5.1 Application FrontEnd Development …………………………….18 5.2 Application Backend Development………………………………20 6.1 SignUp………………………………………………………………….24 6.2 Verification ……………………………………………………………..26 6.3 Login Page………………………………………………………………28 6.4 Forget Password…………………………………………………………29 6.5 Profile Page………………………………………………………………31 6.5.1 Profile Card ………………………………………………………….31 6.5.2 Welcoming box……………………………………………………… 32 6.5.3 Calendar Component……………………………………………33 6.5.4 Daily streak ……………………………………………………..33 6.5.5 Tutor Description Component…………………………………...34 6.6 About Page………………………………………………………………..36 6.7 Chatbot……………………………………………………………………37 6.8 Home……………………………………………………………………...38 6.9 Courses……………………………………………………………………45 6.9.1 Authenticate Tutor experience ………………………………………..45 6.9.2 Create Course Structure Page………………………………………….49 6.9.3 create course main page……………………………………………….54 6.10 Courses Main Page………………………………………………………56 6.10.1 Course Categories and Organization……………………………….56 6.10.2 Interactive Elements and Navigation……………………………… 57 6.10.3 course page…………………………………………………………..59 6.11 Shopping Cart…………………………………………………………73 6.12 Payment Page…………………………………………………………..75 6.13 Loyalty Points………………………………………………………….75 6.14 Favorites Page………………………………………………………….76 6.15 My Courses Page………………………………………………………76 6.16 Search Drop-down…………………………………………………….77 6.17 Search Filters…………………………………………………………80 6.17.1…………………………………………………………………..80 6.17.2…………………………………………………………………...82 6.18 Tutor Profile………………………………………………………….82 6.19 Notifications…………………………………………………………..84 6.20 Chat……………………………………………………………………86 6.21 Recommendation System……………………………………………………94 6.22 Admin panel…………………………………………………………………98 7 Mobile…………………………………………………………………………...99 Chapter 1 Abstract EduPro is an educational and social media platform that supports microlearning principles. We have created this project to serve students and experts in our community in the first place and people all around the world. EduPro has three users, the admin has full view and control of the system. Students can learn many skills through courses, test their understanding with quizzes, track their progress, chat with others, follow their tutors, and add reminders. Tutors can perform all user actions in addition to creating posts, and courses which is the core feature of the project. Tutors have the flexibility to create many sections inside courses that may include videos, documents, quizzes, and coding exercises, also they have the guidance to do so. They can interact with their students by creating posts others can comment on or like, also they have profiles so users can view their courses and general info. Our chatting system supports sharing documents and photos. We developed using a combination of modern technologies, including TypeScript for frontend and Django for the backend. Our Project has a creative and interactive user experience and a friendly user interface. User has access to the same features seamlessly on both web and mobile applications. Chapter 2 Introduction 2.1 Problem In today’s growing digital age, learners and educators rely heavily on online platforms for accessing and sharing knowledge. However, many existing e-learning platforms have significant challenges that obstruct their effectiveness. One major issue is the consistency in user experience across web and mobile applications; not all platforms support the same feature on both. Also because of the complexity and overlap of procedures and resources, instructors struggle to design and organize courses, which makes it hard to finish the course. Moreover, to enable them to focus on producing high-quality content rather than facing technical issues, this process must be made simpler and more real. On the learner’s side, any beginner or student needs guidance, someone to answer his questions, and personal experience, which we do not have on many platforms. Moreover, people usually are not committed to their progress, especially in a self-paced online environment. There is a need for tools to track and show their achievements, so we need features to do so. One of the main problems that motivated us the most was the situation in Gaza; many well-educated, talented individuals, with the skills and knowledge to educate others, were seeking jobs by posting on social media. They needed a platform that they could rely on to educate, earn money, and reach the audience. We have taken all these factors into account while designing the EduPro system. We aim to create a platform that fills the gap between educators and learners and provides a smooth, accessible, and supportive learning experience. EduPro is designed to provide educators with easy-to-use tools for course creation, learners with personalized guidance and progress tracking, and a consistent user experience across the web and mobile. By addressing these factors, EduPro aims to make education more inclusive, effective, and sustainable for communities worldwide, including those facing special challenges like Gaza. 2.2 Objective EduPro aspires to create a combined platform for distance learning whereby course creation is made easier for teachers and learning simpler for students. The platform will run to provide a consistent and seamless user experience across their web and mobile applications for accessibility purposes. 2.3 Scope Of the Work The EduPro project is aimed at the study and implementation of a great e-learning platform meant to address issues pertinent to learners as well as educators. This platform will ensure cross-platform compatibility of its application. 2.4 Importance EduPro idea came from our experience in using many e-learning platforms, we struggled with many issues using these applications. We needed a community to communicate with, experts to ask and colleagues to be motivated to work with. We wanted to serve our local community in the first place. Palestinians have great potential to provide knowledge, but we need a platform where we can deliver our experience and make money. What happened in Gaza moved us, EduPro gives any tutor the ability to teach without even having a laptop. EduPro has many tools that enable any tutor to produce high-quality course content with all that the student might need. Tutors can interact with their students, they have profiles, and students can follow them, tutors can post on our platform, moreover, they can learn any field like any other learner. Students can have complete interactive tools, we recommend them courses, and they have the flexibility to study the courses and move between their sections. We track their progress, so they can stay motivated, also it is a personal space where they can add their notes. All these features we need to commit to our learning process, that is why we combine them all in one place. 2.5 Report Organization First you are going to read our project overview, then Chapter 3 Constraints, Standards, and Earlier Coursework 3.1 Constraints and limitations 1. Technical Constraints ● Cross Platform Consistency: Implementing the same features including advanced ones like course creation, file uploads, and real-time chat on both mobile and web. ● Performance Limitations: Ensure consistency due to the high load of resources on servers, and deliver resources without delay. ● Database Management: Creating a scalable database structure was hard in terms of large amounts of user details, and course content. 2. User-Centric Constraints ● Usability for Beginners: Design an easy-to-use user interface with dynamic flows even with complex functionality. ● Offline Access: Offline access implementation needed more additional storage and synchronization logic. 3. Resource Management ● Limitation of File Size: It's essential to place limits on files for uploaded resources without sacrificing quality, especially in the case of videos. ● Video Streaming: This became difficult as the need to ensure smooth video playback to users with different bandwidth capabilities would mean that adaptive bitrate streaming technology must, as much as possible, be used. 4. Payment and Pricing ● Currency Support: Dealing with multiple currencies and real-time exchange rates was complicated. ● Loyalty Points System: The implementation of a dynamic point system will have added back-end logic to calculate, track, and redeem loyalty points appropriately. 5. AI-Driven Recommendations ● Suggested Courses and Content: Data set collection causes a bottleneck for training AI models to offer personalized recommendations. ● Automatic Abrove: It was challenging to design automatic approval to allow course publishing based on tutor experience. 6. Responsiveness and State Management ● Responsive design: The platform's UI required relevant design iterations to accommodate the various devices, screen sizes, and resolutions while ensuring usability and consistency. ● Shared State Across Pages: Managing user sessions and ensuring the proper flow of data across multiple pages require the integration of state management mechanisms such as user context into the application, which increases the complexity of development. 7. Course Structure and Standards ● Course Content Enabling the user to build the course content and structure dynamically, including videos and quizzes was challenging in addition to displaying them to the user and interacting with his answers. 8. Interactive Coding Exercises: ● We faced difficulties in integrating a compiler that executes codes with default code and test cases. 9. Chat: ● We supported not only text but files and images. 10. Time: ● Time was a huge issue, because of the amount of features we needed to implement, we wanted to build a complete system. Some of the features did not work properly the first time and we needed to rebuild them differently. 3.2 Standards 3.2.1 Four Tiers Architecture EduPro was built based on a four-tier architecture, that divides an application into four distinct layers: Presentation Tier, Application Tier, Database Tier, and Integration Tier. Each layer has specific responsibilities, they all provide modularity, scalability, and maintainability. The user interacts with the application through the presentation layer, which is responsible for handling the user interactions. We developed using React and React Native. The application layer is the core of any system, it is responsible for handling business logic and application-level operations. It was built using Django, this layer manipulates user requests, validates data, orchestrates the communication between the frontend and database, and stands as an isolation layer to protect the database. It ensures users' authentication and controls their access. The database tier is responsible for storing and managing data required inside any system. In EduPro Django ORM was used which provides consistency and security. Also makes sure queries are handled effectively. The integration tier manages interactions between the application and external services and APIs, including payment, video streaming, and AI-powered recommendation services. This layer guarantees that the platform be able to incorporate new features and capabilities without affecting the structure of the core of the system. We have many complex procedures so we used 4-Tiers architecture to ensure robust program flows and to implement those features in a flexible approach. For the program development in the near future we needed scalable and modular system. Also, we needed to reduce the computational load to provide users with the best access they can get. 3.2.2 Agile Model in The Development Of EduPro Agile Development The approach we took when developing EduPro is called the Agile method—an approach that promotes flexibility, collaboration, and incremental progress. In elegant simplicity, the method will help us manage the complex and evolving design and developments of the platform around creating courses, individualized tracking of progress, and online engagement in real-time. How We Used Agile in the Developing EduPro: 1. Flexibility and Adaptability Our development of the Agile enabled readjustment towards changing user requirements throughout the development process. Some features, like offline access and real-time chat functionality, were noted in the early feedback. Due to the very beginning planning of all these features, whenever a need arises for tags, we could cater to their evolution and seamlessly build them into the evolving platform without displacing the course of the present work. 2. Incremental Development We split the project along the line of smaller sprints, each rolling out particular functionalities like the course creation module, user authentication, and progress-tracking components. Using agile development, we iteratively often provided the early working versions of components for feedback and worked on polished features until acceptable delivery was made. 3. Collaboration and Continuous Feedback Regular team meetings and sprint reviews kept all developers, designers, and stakeholders aligned. Feedback from teachers who tested the course creation module filtered back into each subsequent sprint, improving ease of use and functionality. 4. Testing and Risk Reduction Every sprint included testing, which enabled us to identify and fix issues early on, such as database bottlenecks and API mismatches. This reduced our risk by ensuring such features as secure authentication and personalized tracking were practically seamless in their integration. 3.3 Earlier coursework First of all, what we have accomplished is a result of all those years we spent studying and working in the computer engineering department. We needed to look for an idea for our project, daily problems we face as engineers are the source of our inspiration. After deciding on the idea, we set the core features that our application should have, then we chose the languages that would serve our goals and we started learning them. We had prior experience in Django, but we learned Typescript and react native for frontend development. Additionally, our knowledge of JS, HTML, and CSS played a big role. Chapter 4 Literature review There are plenty of motivations and causes that push us to think about such a project. There are many traditional educational platforms out there like Udacity and Udemy but lack the community that any learner needs to interact with to develop his skills and knowledge. An evaluation of the Udacity platform demonstrated an enormous difference exists between educational technology platforms and interactive social media systems. Most learning processes combined with tutor and student interactions as well as course community associations occur outside of Udacity on communication tools such as Circle. Udacity's platform design creates obstacles for users to receive bulletins and contact tutors and participate in meaningful discussions with the learning community. and Udemy but lack the community that any learner needs to interact with to develop his skills and knowledge. From our experience with Udacity, this suggested a huge gap between e-learning and a good social communication tool. While Udacity offers some good courses, most of the learning, tutor-student, and course-community communication happens on an external tool, like the Circle app. This separation makes it difficult to access announcements, get hold of tutors, or really communicate with any meaningful discussion in the learning community. The requirements force us to think deeply about the relationship between e-learning practices and social interactions. Our project incorporates social media elements into e-learning systems to create smoother communication paths that enhance learning experiences through improved collaboration among users. Combined features into one interface enable learners to access their courses alongside community interaction and platform notifications while enhancing the ease of communication. With EduPro users get everything they need to learn while they develop professional networks as well as earn revenue from making accepted content for our platform based on their skills or experience. EduPro created its distinct loyalty point system for e-learning which stands apart from all other educational technology firms. Users on EduPro earn reward points that correspond to each purchased course through the system. Acquired loyalty points function as discounts for upcoming ordering opportunities. Through its economy-of-scale model the system entices students with enhanced partnerships to save money on educational material while offering opportunities for students to pursue more courses. The rewards structure in EduPro's system both boosts learning experiences and makes premium education available at more affordable prices. Chapter 5 Methodology All project development follows systematic approaches to construct an e-learning system which includes social media capabilities. The launch of development started after dealing with user requirements alongside the flaws of current e-learning systems that existed at a large scale. We chose React TypeScript (React TSX) for web front-end development and Django for back-end responsibilities together with React Native for mobile development to ensure smooth user interactions. The integration of these technologies under one framework results in an extensive solution with scalability features and cross-device compatibility. Our team used Agile development practices to enable work cycle evolution alongside continuous user feedback for fast adjustments that met user requirements. A system of sequential steps makes it possible to develop an e-learning ecosystem that supports social learning throughout connected educational spaces. 5.1 Application FrontEnd Development The front-end development of EduPro sought to develop an interface that would provide a seamless user experience across not only the web but also the mobile aspect. React was used for the web application while React Native was used to develop mobile applications. Both technologies are built on JavaScript and offer the flexibility, performance, and scalability to cater to the ever-changing demands of the platform. React for Web The web front end of EduPro was built with React as the primary framework. It provided rich capabilities, along with the right kind of developer-friendly features. A component-based architecture enabled a reusable and modular element, and thus, maintained both uniformity and efficiency in the application. For example, the various UI components, such as navigation menus, progress trackers, and forms, were designed on the very first occasion and used throughout the platform. The Virtual DOM of React enables the effective rendering and updating of the user interface, thus facilitating a constant level of smoothness in operation, even with complex features working in real-time, such as the design of progress trackers and dynamic course recommendations. This, combined with React's abilities to provide advanced state management tools such as Redux and the Context API, enables simple management across user sessions, course progress, and any dynamic information rendered across page loads. This ensured that users enjoyed seamless navigation and interaction with the platform. The front-end development of EduPro was working on an application that will not only bring a seamless experience to the web interface but also push technology on the mobile interface. React was used for building the web application, while React Native was utilized for mobile application development. Both are built with JavaScript and bring in the flexibility, performance, and scalability most ideally suited for the evolving needs of the platform. Web using React The EduPro was built as its web front end using React as its core framework. It provided rich features with just the right amount of developer-friendly capacities. Its component architecture enabled reusability and modularity of components; this maintained uniformity and improved overall efficiency. For example, UI components such as navigation menus, trackers, and forms were designed and used throughout the platform right from the start. React's Virtual DOM allows the rendering and updating of the user interface in an efficient manner; therefore, with complex features working in real-time, as progress trackers design and dynamic course recommendations, applications continue to operate smoothly. This enabled React to take advantage of advanced state management tools like Redux and the Context API to easily manage information across user sessions, course progression, and dynamic information included with page loads. This made for an enjoyable and seamless experience when users navigated through and interacted with the platform. React Native for Mobile Development React Native, in combination with its native counterparts, allows the development of the application for the two major competitive smart device platforms—iOS and Android—from a single code base. The cross-platform functionality means timely release and less resource consumption of an application built with React Native. Native components provide fast mobile applications and guarantee a smooth user experience, almost like that of native apps. Also, the fact that Ferris was able to utilize shared logic with React allowed them to reuse app features and components such as authentication flows and course browsing on both the web and mobile devices. This ensured greater efficiency during the development phase and a more consistent design and functionality delivery across both platforms. Strengths and Benefits React and React Native aided a lot in EduPro development. It also enabled a very large pool of developers to work with several libraries, simplifying the integration of rather complicated functions, such as authentication, push notifications, and file upload. The easy modularity and expandable frameworks of these technologies were guaranteed for the subsequent addition of future features, such as live video classes and analytics based on artificial intelligence. Simultaneously, React and React Native were alike; this creates the best user experience, as the user can hardly see the variance in switching between the web and mobile apps. 5.24 5.2 Application Backend Development Django was used to build EduPro's backend. Which is a high-level open-source web framework written in Python. It follows model-template-views the architectural pattern. The main purpose of Django is to simplify the development of large, database-based websites. In particular, the framework stresses the reusability and "pluggability" of its components, as little code as possible, minimal coupling, fast development, and the mantra of 'don't repeat yourself' (DRY). We chose Django because it has built-in tools that provide various advantages in development, such as authentication, which includes functionalities like user login, registration, permission manipulation, URL routing, database management, and many others. Also, we needed to handle the security since we have payment procedures. How we built the backend? First, we planned the features, and then based on them we defined the best database schema in parallel with backend development to ensure that all data relationships were correctly mapped. Second, we created models that define the database structure, primary and foreign keys, data types, etc. Django’s ORM automatically handles database queries. SQLite DB was used in the project as the database that Backend side will interact with. We used a relational Database since we have sensitive payment, course content data that we need to ensure its integrity and it doesn't affect any other tables so it can be edited once only. Third, we used Django REST framework serializer to convert the model into JSON format and visa versa to validate incoming data for all APIs requests. Fourth, we built the repository layer to encapsulate database logic. Inside the repository, we declare all functions we need to interact with the data. It keeps database interactions centralized. Fifth, we created a component layer that implements the core functionalities and the methods we declared inside the repository. This layer contains the business logic and handles operations. sixth, we built the RESTful API methods inside controllers, they receive requests, call necessary components, and return JSON responses to the frontend. Seventh, the Django URL routing system mapped API endpoints to the appropriate controllers. Chapter 6 System Features and Implementation EduPro offers all the features that any learner would find desirable, and so it caters to both students and tutors. In this section, we will describe each feature in detail for both web and mobile platforms, highlighting its functionality and complete user flows. Besides, we will also explain the technologies and tools used for these functionalities, guaranteeing a smooth experience among platforms. Finally, we will demonstrate how these characteristics contribute to learning and teaching while providing consistency and usability. 6.1 Signup A user enters the required information to be able to sign up with EduPro, as we can see on the screen above. If the user's university is listed then his university majors will be automatically listed. We added the college to serve users' networks. Here I have chosen NNU and its majors were listed, if the user chooses another university another major related to that university will be listed. Users can add their college or university if not listed. The sign-up process requires to fill proper data, either way error msg will be displayed. 6.2 Verification When GET STARTED button is clicked, a verification link that contains the token will be sent to the user's email. When this link is clicked it will be directed temporally into the verification page that is displayed for less than a second to redirect the user to the login page. 6.3 Login Page The user enters his email and password. Correct password validation as we can see. 6.4 Forget Password when forgot password button from signin page clicked forget password page open When user Email entered an email wit reset password link sent to user This link will redirect the user to reset password page When reset password clicked user redirected to signin page to signin with the new password EduPro Application Interface: Since EduPro has 3 user types, admin student, and tutor, a tutor has a bit more tools than a normal user or student so we are going to explain the difference between them by providing screenshots of the user interface. 6.5 Profile Page This is a personal page for each user we have in the system. 6.5.1 Profile Card It displays the user's name, major, and email. Users can change their profile photos or edit their information. Additionally, users can view their saved posts or the tutors they follow. When the pin icon on the profile image is clicked this modal will appear: The user can either upload a new image or remove it then the default image will be displayed. 6.5.2 Welcoming box It welcomes the student with a welcoming message about the current time date time, 6.5.3 Calendar Component Users can write all their notes inside the calendar, specifying the year, month, day, and the note itself. They can also edit or delete their notes. When a user logs into their account, the calendar automatically opens to the current date or the date on which the user logged in. Users can add a calendar by clicking on the + add to calendar button. When the user enters the reminder, the time displayed is the current date and time to make it more user-friendly. Users can choose a date, time, and note then click on save, and a new note will automatically saved and displayed. 6.5.4 Daily streak This component is designed to motivate our users to engage with our application, as the tracker shows the user how many times a week they use our app. 6.5.5 Tutor Description Component When the user is a tutor, this component will appear on their profile. This description is entered by the tutor to be displayed on their tutor profile, which all platform users can see. The tutor can add or edit the description also he can navigate to his profile to see what it looks like. Edit description when clicked rich text editor appears to enable tutors to enter the description they like. 6.6 About Page This page shows what is EduPro platform, what does it do, and our engineers. 6.7 Chatbot We created a Gemini-based chatbot, one of the latest state-of-the-art AI and LLM models formulated in conversational AI and natural language understanding. Gemini leverages deep machine learning methods and massive dataset training to make the chatbot helpful, context-aware, and adaptive. The chatbot can also process complicated questions, fulfill individual requests, and smoothly integrate with different applications to improve user interaction. This is how the chatbot looks on a page when it is closed and opened. 6.8 Home Home is the main page for socializing with EduPro community its the bridge between courses and social media with posts and suggested tutor and course card In the home page users can show tutors posts which can be attached with pictures and courses, users can join the course directly from the button shown in the post for easier user experience , users can like, comment and interact with posts and display the number of likes and comments in each post, and save posts to find it later using the book mark that user can find later in user profile. in the profile page user can find their saved posts and click to one of them to go to save posts page User can comment in the posts and ask questions The recommendation home card contains suggested courses and tutor based on users enrolled courses titles and description ,this system utilises TF-IDF vectorizer to analyze course title and description and transfer them to numerical features, and cosine similarity to recommend courses and tutors meet with user interest. The system selects only highly relevant courses (after already enrolled courses excluded) to display in suggest card in home page. 6.9 Courses Tutors have created course tools in the header, which students do not have. 6.9.1 create course main page We provide flexible and dynamic flow to enable tutors to create course main information easily. Each field has max number of characters that the user can enter, to reserve a well-structured course. In our system, we support 2 currencies, dollar and shakel. The primary currency is dollar but it can be changed to shakel based on the current currency pricing. Tutors can add up to ren objectives for their courses. Users have the flexibility to add cover image for their courses and can set the image properly. This is the image after it's cropped. Promotional videos shouldn’t be big because they should have a limited duration, we made sure high-quality videos can be uploaded. The process cannot be completed unless the tutor filled all fields. 6.9.2 Create Course Structure Page Users cannot access this page unless a course is created on the main page. We added a question mark icon as a guide for tutors to understand how to use the system. We support four types of topics for each section: video, PDF, quiz, and coding exercise. Users can freely add and organize sections and topics. Each topic has title, description, expected duration to be progressed, and file upload if it is video or pdf. We support microlearning where videos are not too long, videos are the main course content. Tutors should enter title, description, duration, and up to four choices and they should choose the correct one. We support a compiler and code space in our application, so we need the tutor to enter the title, question, and default code to guide and help students, along with up to two test cases including input and output. 6.9.3 Authenticate Tutor experience After creating the course structure the user is directed to this page. We aimed to build a reliable and trusted platform that offers courses from experienced professionals. For this, we introduced an automated approval flow to help the admin to process the requests effectively. This step also allows the teachers to load annexed documents, e.g., certificates or curriculum vitae (CV), to support the teachers’ credentials for delivering a given course. We included DeepSeek API that extracts their uploaded document text and seeks the match between this text and the user-provided course title and description. For this integration, we used prompt engineering with the DeepSeek model, learning to write accurate instructions in order to obtain precise and relevant responses from the model. Each time we hit a request to the Deepseek API certain number of tokens will be consumed. If the user uploads a document that doesn’t match course requirements this modal appears, which means Deepseek has not approved to publish the course only the admin can approve it. If Deepseek approves the course successfully, this modal is displayed. Then the platform directs the user to the course page, where the user can view his published course. All these icons are dynamic. 6.10 Courses Main Page EduPro is designed to provide an interactive experience to enable users to discover, access , and select courses. 6.10.1 Course Categories and Organization In EduPro, courses are divided into sections to facilitate course discovery and user interaction. A "Top Picks" subsection describes courses that have the largest number of enrollments, revealing learners' popular selections. Courses in the "Trending Courses" section are highly rated by selected criteria based on user feedback and interaction. The "New Arrivals" category shows the newly added courses to the platform and that they are accessible to users. Moreover, the "Recommended for You" section uses AI-based recommendations, in which user interests, previous communications, and learning content are used to offer an individual, customized learning experience. 6.10.2 Interactive Elements and Navigation To enhance usability, EduPro integrates interactive sliders. Users can explore different courses using left and right arrow navigation, allowing them to browse multiple options without excessive scrolling. 6.10.3 Course Page This Page gives all the course content, any user can see the main course information but can’t access the course content unless he pays for it. How course content would look like to the course’s tutor. 6.10.3.1 Course Card This component displays the course cover image when the user clicks on the play button course promotional video starts playing. The card also contains the course title, subtitle, rating, price, favorite, and cart buttons. Moreover, the user can rate the course by clicking on the rating stars. 6.10.3.2 Course general information 6.10.3.3 course content If the user hasn’t purchased the course yet, the course content will appear as locked, and they won’t be able to access it until payment is made. The sections and topics, as mentioned before, are visible. Each section displays an estimated time, calculated based on the total topics within it. Each topic type is represented by a unique icon to enhance the user experience. Tutors have the ability to edit and add to their course content. If the user buys the course this is how the course content would look like: Each subsection has a check button that allows users to track their progress. When all topics within a section are marked as completed, the section is automatically marked as completed. Users can click on any topic to view and study it. 6.10.3.4 Topics 6.10.3.4.1 Videos and PDF We have downloadable Videos and PDF documents that will be opened in a new tab then the user can navigate between sections and topics unconditionally. 6.10.3.4.2 Quizzes When the user first clicks on a quiz topic, a modal window displaying the question with multiple choices will appear. Additionally, we have an interactive feature that indicates whether the user’s answer is correct or incorrect. Also, the icons we used are dynamic. 6.10.3.4.3 Coding Exercise The platform has an integrated compiler in which the students can write and execute coding exercises within the application. In this feature, one can enhance a real-time coder's environment, planning, writing, running, and testing of their code directly on exercises. The compiler is capable of dynamic feedback, providing error messages or results immediately providing students with the opportunity to both learn and improve their coding skills interactively. Users can click on Coding Exercise then the compiler tab gets opened. 6.10.3.4.4 Compiler The code that is shown in the Code Editor by default is the first code provided by the tutor when creating the course. Our compiler is able to perform multiple programming languages with the possibility to add more, if necessary. It is possible that by taking advantage of the code execution, result visualization, and error reporting, users could execute their code, see the results, and receive feedback in the event of any detected errors. Besides, the editor and test case validation is provided to confirm the code respects the desired results. To improve user experience, we have also provided the option of light and dark mode, so users can tailor their coding environment. 6.10.3.4 Tutor Information The tutor information card contains essential information about the tutor of the provided course, such as the name, rating, reviews, students, courses, followers, etc. A short biography introduces their expertise to potential learners. Follow/Unfollow functionality enables users to interact with the tutors they like most. The button changes from "Follow" to "Following," and the number of followers increases when clicked, while unfollowing changes the application, which implements real-time updates. 6.11 Shopping Cart EduPro shopping cart allows users to purchase courses, the cart displays a list of selected courses, including course name, instructor, price, rating, and description, along with a remove button to delete items before checkout. On the right, the order summary provides a breakdown of the purchase showing the subtotal, applied discount from the loyalty points, tax, and the final total amount. Users can also select their preferred currency before proceeding with payment. 6.12 Payment Page The user enters his card information to pay for the courses, in this page the final total is also displayed. 6.13 Loyalty Points We added a loyalty points feature to our system to encourage users to purchase more courses. For each course, a user buys, their loyalty points increase by 10. For every 100 loyalty points, a $10 discount is applied to the total purchase amount. As we can see this user bought 3 courses, so earned 30 points. 6.14 Favorites Page This page contains the liked courses by the user. 6.15 My Courses Page Here students can show their enrolled courses. 6.16 Search Drop-down When the user first clicks inside the search bar, recommended courses are displayed to the user. We have two search categories inside the search dropdown, Courses where the user can search for any course he wants. When any course is clicked the system navigates to the course page clicked. The other category is Tutors where users can search for tutors. When an item is clicked system navigates to the tutor profile that was chosen. 6.17 Search Filters EduPro search and filtering system enhances course discovery by allowing users to choose their courses based on the craterias they want. This feature ensures that learners can quickly find courses that match their interest, budget and learning preferences. Users can access the Search Filter page using the Sidebar or view more inside the search dropdown. As u can see here we searched based on three criterias, category, most attended and price. 6.17.1 Courses Search Filters Category, course topic, most and least enrolled, prices from high to low and low to high, and rating. 6.17.2 Tutors Search Filters Users can search using tutr name and popularity based on his followers. Filters for Tutors are different from course filters to ensure system efficiency. 6.18 Tutor Profile This page provides an overview of an instructor's profile along with the courses they teach. It includes course details, pricing, instructor information, and interactive options for users to follow or contact the instructor. 6.19 Notifications User will notify if one of their following create post or course or followed him and all of their notification will appear in header notification lis with All and Unread filter 6.20 Chat Our website includes an interactive chat system, which enhances the user learning experience by connecting with users and share knowladge User can use chat bar to search about all users the community to start a new chat or continue existing one Users can share files, links, videos, images and texts with other users, student can ask tutor questions about his courses and ask about tips. user can show and download media shared in the chat (files, images,..).i In the chat info page users can show all media, files and links shared in the chat in one place to make it easy to find them later. For more flexability user can search in text chats to review and find chats about specific subject easier 6.21 Admin panel For easier data management and faster development we used react-admin (which is a framework especially designed for creating admin panel in react) to build customized admin panel. Admin panel dashboard shows a brief study about the website for admin, grid to show day weather (external api ), and grid to give him new advice every time access the system, admin panel dashboard shows the number of website users and the number of total students, tutors,admins, courses, unapproved courses, admin can click to unapproved courses to show unapproved courses table with full details and approve them if it meet the criteria. From the left bar admin can access all system tables (Admin, student, tutor, course, unapproved course, post,..)and can update, create, delete rows and data. Chapter 7 Conclusion and Recommendations 7.1 Conclusion This project developed an educational and social media platform, as a result we were able to create an application for microlearning that includes courses, posts, and chat. The program was thoughtfully created to be user-friendly and accommodate the needs of students all around the world, especially students who can't learn in person at universities and schools, and don't have time for long sessions and meetings. 8.2 Future work We are extremely sure of what we are doing and have a very optimistic outlook on the future of EduPro's success. We believe that EduPro has the potential at some future point to be a big e-learning platform similar to Udemy, DataCamp, and Udacity. The intention is continual platform development and expansion so that this platform can be accessed by a crowd and incorporate a wider educational experience. In order to bolster the credibility of EduPro we will strive to accredit and legitimize its certificates to give weight to declared learning achievement. In addition, we postulate an ad system for how tutors can advertise their classes broadly. A couponing system will further be provided to discourage and incentivize enrollments through discounts and promotional rates. A central challenge as we scale up is to enlarge the platform's capacity to reliably support a sizeable crowd of students and faculty, with a high level of performance and stability. For this, we plan to use AWS cloud computing to improve database management, scaling, and security. In the very near future we will attempt to boost the AI capabilities of EduPro for its practical application in analyzing the user's interaction, learning, and engagement behavior patterns. This will allow us to provide customized course recommendations, optimize learning routes, and provide real-time feedback on quizzes and coding assignments. In addition, AI will offer tutors data-based and remedial information on what to design and improve in both the content of the course and the student experience. These advances will lead to a healthy, intelligent, and user-focused learning experience. Chapter 8 mobile