Atanu789 / ClassCoLatest

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ“š A Hybridized Offline and Online Combined Web Application Named "ClassConnect"

πŸŽ“ Smart Education Web Platform

The Smart Education Web Platform is a cutting-edge digital ecosystem designed to transform the traditional learning experience by integrating innovative features and AI-powered functionalities. This platform serves as a comprehensive hub for students, teachers, and administrators, offering a seamless and interactive educational environment.

🌟 Core Features

  1. πŸ” User Authentication and Role-Based Access:

    • Students: Register with permissions from teachers and administrators.
    • Teachers: Register with permissions from administrators.
    • Administrators: Manage user registrations and oversee platform operations.
  2. πŸ“ Profile Management:

    • Students complete profiles using unique enrollment IDs, class details, etc., after successful authentication.
  3. πŸ“‚ Assignment Submission Portal:

    • Students submit videos based on daily topics assigned by teachers in the assignment section, adhering to guidelines, instructions, and deadlines.
  4. πŸ€– AI-Powered Video Grading:

    • Students upload self-made videos, which are converted to audio.
    • Audio content is further converted to text using AI technology.
    • The platform analyzes the text to match the understanding of the specific topic taught by the teacher.
    • Automated grading provides instant feedback without the involvement of teachers, revolutionizing the assessment process.
  5. πŸ… Reward System:

    • Students earn rewards based on video assessments, quiz points, and participation in extracurricular activities, fostering motivation and engagement.
  6. πŸ“Š Enhanced Task Management:

    • Integrated task management tool for students to organize, prioritize, and track their academic tasks effectively.
  7. πŸ“± Attendance Tracking:

    • Students scan QR codes generated by teachers to automatically record attendance in the web application, streamlining the attendance management process.
  8. πŸ“ Collaborative Note-Making System:

    • Students can upload notes privately for personal revision or publicly to collaborate with peers, promoting knowledge sharing and collective learning.
  9. πŸ“Š Poll and Quiz Section:

    • Students actively participate in interactive polls and quizzes related to the topics provided by teachers, accumulating points that contribute to the reward system.
  10. πŸ“ˆ Performance Analytics Dashboard:

    • Showcases students' progress through interactive line graphs, highlighting their achievements in video grading, quiz participation, and extracurricular activities.
  11. 🎨 Monthly Extracurricular Activities:

    • A dedicated section for students to showcase their talents by uploading videos, fostering creativity, and building a sense of community within the classroom.
  12. πŸ“š Vocabulary Section and Worddle Game:

    • Daily words are displayed to enhance students' vocabulary.
    • A Worddle game is included to increase engagement and reinforce word learning.
  13. 🧠 Memory Games:

    • Interactive memory games are included to boost students' memory power, making learning more fun and effective.

🌟 Unique Selling Proposition

The standout feature of this platform is the AI-powered video grading system, which automates the assessment process by converting student-submitted videos to text, matching the concept understanding with the topic taught, and providing instant grading without manual intervention. This innovative approach sets the platform apart from other educational web platforms, offering a more efficient, objective, and personalized learning experience for students while reducing the workload on teachers.

In summary, the Smart Education Web Platform aims to revolutionize education by combining advanced technology with interactive features to create a dynamic, engaging, and student-centric learning environment that caters to the diverse needs of modern learners.


πŸ› οΈ Installation Steps:

  1. Frontend Setup:
cd client

npm install

npm run dev
  1. Backend Setup:
cd backend

npm install

npm run dev
  1. Chat Setup:
cd Chat
cd client

npm install

npm run dev

  

cd server

npm install

nodemon

  

cd socket

npm install

nodemon

πŸ–₯️ Tech Stack:

  • Frontend: React.js, Tailwind CSS, Bootstrap

  • React.js: A JavaScript library for building user interfaces, particularly single-page applications.

  • Tailwind CSS: A utility-first CSS framework for quickly building custom designs.

  • Bootstrap: A popular CSS framework for building responsive and mobile-first websites.

  • Backend: Express.js, MongoDB

  • Express.js: A fast, unopinionated, and minimalist web framework for Node.js.

  • MongoDB: A NoSQL database program, using JSON-like documents with optional schemas.

  • Real-time Communication: Socket.IO

πŸ“š Libraries and Dependencies:

Frontend:

  • tailwindcss: A utility-first CSS framework for rapidly building custom designs.

  • react-bootstrap: Bootstrap components built with React.

  • react-calendar: A modular toolkit for building calendar-related things in React.

  • recharts: A composable charting library built on React components.

  • yup: A JavaScript schema builder for value parsing and validation.

  • react-helmet: A reusable React component to manage document head tags.

  • qrcode: A library to generate QR codes in React.

  • formik: A form library for React to manage form state and validation.

  • axios: Promise-based HTTP client for the browser and Node.js.

  • bootstrap: A popular CSS framework for building responsive and mobile-first websites.

  • moment: A JavaScript date library for parsing, validating, manipulating, and formatting dates.

Backend:

  • bcrypt: A library to help you hash passwords.

  • cloudinary: A cloud service that offers a solution to a web application's entire image management pipeline.

  • cookie-parser: A middleware to parse cookies attached to the client request object.

  • cors: A middleware for Express.js to enable Cross-Origin Resource Sharing.

  • dotenv: A zero-dependency module that loads environment variables from a .env file into process.env.

  • express: Fast, unopinionated, minimalist web framework for Node.js.

  • multer: A middleware for handling multipart/form-data, primarily used for uploading files.

  • nodemailer: A module for Node.js applications to allow easy email sending.

  • nodemon: A tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected.

  • Socket.IO: A library that enables real-time, bidirectional, and event-based communication between web clients and servers.

Application Overview: link

About


Languages

Language:JavaScript 88.1%Language:CSS 11.6%Language:HTML 0.3%