JasonXu314 / truhacks-2024

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Logo

đź‘‹ Live interactive platform that connects students worldwide with passionate tutors. No matter your location, time zone, or budget, you can now access expert guidance and conquer any academic challenge.


image

image

Inspiration

Driven by a team member's powerful story as a first-generation immigrant, who achieved success through education, we're passionate about making learning accessible to all. Their journey underscores our belief that education is a fundamental human right, not a privilege.

Furthermore, our experience as tutors highlighted the limitations of existing tutoring platforms. College software is often clunky and uninviting, while popular video conferencing tools like Zoom can become expensive for extended sessions. These hurdles prevent students from receiving the ongoing support they need.

That's why we built a free, full-stack web application that removes these barriers. Our streamlined design keeps students engaged, while built-in live, one-on-one video calls with tutors allow for in-depth explanations. To maximize interactivity and collaboration, we've also incorporated a virtual whiteboard with various colored pens.

(back to top)

What it does

Our live and interactive platform empowers students to connect with tutors for personalized learning. Through our intuitive web application, students can easily create accounts and access their dedicated "Student Hub." Here, they can write their questions, choose a subject, and submit them directly to qualified tutors. Tutors, using their own dashboards, can review student requests and choose to accept.

Recognizing the value of face-to-face interaction, we've integrated live video calls into every session. To further enhance collaboration and explanation, students and tutors can utilize a real-time whiteboard with multiple colored pens. Committed to equitable access to education, we offer unlimited session lengths and avoid hidden fees. We believe quality learning should be available to everyone, everywhere.

Features:

  • - Homepage with additional recources
  • - Authentication. Sign up/Sign in pages.
  • - User can select the subject and type out their question. Ability to request a tutor.
  • - Ability to start a tutoring session.
  • - Video/Audio Live Streaming
  • - Collaborative Whiteboard with colors and eraser

(back to top)

How we built it

Design: Figma, Canva. Link for the file.
https://www.figma.com/file/hAdIcWvibrVcMLhtwVwwoz/TruHacks?type=design&node-id=0%3A1&mode=design&t=VsIXoefMQemjE9rR-1

Have built a prototype, developed friendly UI and made sure the design is consistent and easy to navigate.

We used Next.js to create a fullstack application and we are running local server.

Frontend:

WebRTC API to establish video, audio streaming. WebRTC its an open-source application that covers, on a high level, two different technologies: media capture devices and peer-to-peer connectivity. Learning how to live-stream video and audio was quite a challenge. We faced several struggles working with this: couldn’t connect to a peer, couldn’t see/hear the peer.

For better interaction and streamlined learning, we incorporated a whiteboard using in-built Javascript API canvas. We were able to make a whiteboard with eraser and different colored pencil. One of the challenges we faced: making the whiteboard collaborative. We used web-sockets to ensure sable connection between the server and the client. It was really good decision, since they are perfect for real time updates.

Tailwind CSS, Shadcn/Hoverdev Components for quick UI building

Backend:

MySQL to store the data for user profiles, requests, etc.

Bcrypt library and pwd hashing for secure authentication.

Prisma to interract with the database and perform migrations.

Next.js and Express to build REST API.

WebSocket API (WebSockets) to ensure a two-way interactive communication session between the user's browser and a server.

Installation

THis is how to build the project. You would need to run the server too in order to complete the project.

  • npm
    npm install npm@latest -g
    npm run dev

Team

Eric Wong - Frontend/Backend Devlopment - LinkedIn

Jason Xu - Backend Devlopment - LinkedIn

Aiturgan Talant - Frontend Development, UX/UI - LinkedIn

(back to top)

What's next for EducateAll

  • Speech-to-Text recognition to make notes of the sessions
  • Advanced Recources library
  • Google Sign In
  • Profile Tab and have achivements, badges, to make the platform more engaging
  • AI Assistant

(back to top)

Acknowledgments

(back to top)

About


Languages

Language:TypeScript 92.7%Language:JavaScript 3.0%Language:Svelte 2.1%Language:CSS 1.9%Language:HTML 0.3%