LearnEdge - Learn Anytime Anywhere

Click to see the Frontend Deployment

Team

Table of Contents

  1. Introduction
  2. ER Diagram
  3. Relational Mapping
  4. Tech Stack
  5. Connecting Spring Boot with React
  6. User Interface
  7. Additional Features
  8. Links

Introduction

About 🌐

Our online learning platform is a cutting-edge educational hub that aims to revolutionize the way people acquire knowledge and skills. With a user-friendly interface and a vast array of courses, we provide learners of all ages and backgrounds with the opportunity to explore diverse subjects and foster personal growth. Our mission is to make education accessible, engaging, and enjoyable, empowering individuals to achieve their full potential. Learn Anytime Anywhere

Problem 🔍

Traditional education often presents barriers to learning, such as limited access to quality courses, rigid schedules, and high costs. Additionally, the fast-paced nature of modern life demands flexible learning options that can accommodate various lifestyles. Furthermore, the lack of interactivity and personalized teaching in conventional settings can hinder students’ understanding and motivation. Our online learning platform was born to address these challenges and bridge the gap between knowledge seekers and high-quality education.

Solution 💡

Our online learning platform offers a revolutionary solution to the drawbacks of traditional education. By providing a vast library of courses spanning various disciplines, learners can pick subjects that genuinely interest them and learn at their own pace. The platform also features interactive elements, including discussion forums, assignments, fostering a dynamic learning community. Additionally, our affordable pricing model ensures that cost is not a barrier to obtaining valuable knowledge and skills. Through cutting-edge technology and a dedication to excellence, we are redefining the future of learning, empowering learners to shape their educational journey according to their unique needs and aspirations.

ER Diagram

Relational Mapping

Tech Stack

Front End

Technologies Used: React, Javascript, HTML5, TailwindCSS

React :

JavaScript :

Tailwind CSS :

HTML5 :

Back End

Technologies Used: Springboot, Node.js, MySQL

Spring Boot :

Node.js :

MySQL :

Connecting Spring Boot with React:

  1. API Endpoints:
    • Spring Boot defines a set of API endpoints that the React frontend can call.
    • These endpoints are usually implemented using controllers and mapped to specific URLs.
    • Each endpoint corresponds to a specific action, such as retrieving data, updating information, or submitting forms.
  2. HTTP Requests:
    • React frontend uses various HTTP methods (such as GET, POST, PUT, DELETE) to send requests to the Spring Boot backend.
    • For instance, when fetching data, React sends a GET request to the appropriate endpoint. When submitting a form, it might send a POST request with the form data.
  3. Data Transfer:
    • Data is transferred between the frontend and backend using JSON (JavaScript Object Notation) format.
    • Spring Boot serializes and deserializes JSON data to Java objects, while React uses JavaScript objects to work with the data.
  4. CORS (Cross-Origin Resource Sharing):
    • Due to security restrictions in web browsers, frontend and backend may be hosted on different domains.
    • CORS headers need to be properly configured on the backend to allow cross-origin requests from the React frontend.
  5. State Management:
    • React manages its own state using tools like React’s built-in state or third-party libraries like Redux.
    • The backend manages its own state and data storage, such as in a database.

User Interface

  1. Home Page










  1. User Page







  1. Tutor Page







Additional Features

“Contact Us form”

Email