TutorScape

• 

  Home Screen

• 

  Find Peer Tutors

• 

  Update Profile

Inspiration

As a high school student, I understand the challenges of finding study partners, whether due to social anxiety or lack of classmates' willingness to collaborate, and the steep costs of hiring tutors. After careful consideration, TutorScape emerged as a solution, aiming to bridge these gaps and provide accessible peer-to-peer learning opportunities.

What it does

TutorScape is an innovative online platform facilitating peer-to-peer tutoring without financial exchange. For instance, when Sam, seeking biology help, connects with John, who desires Algebra 2 guidance, they exchange their expertise through free Zoom calls. Leveraging cutting-edge AI technology, TutorScape strategically matches users, fostering collaborative learning experiences between individuals with complementary knowledge and interests.

How we built it

I harnessed the capabilities of cutting-edge web development tools like JavaScript, React.js, React Router, HTML, CSS, and AI to craft an advanced platform. Within React's arsenal of tools lie reusable components, state management, and context, while React Router facilitated seamless page transitions through intuitive client-side routing. I prioritized accessibility by optimizing the website for screen readers, allowing inclusivity for all users. Furthermore, with CSS, I developed a visually captivating user interface, enhancing the overall user experience. Leveraging OpenAI's GPT-3 model, users effortlessly pinpoint their ideal matches as it navigates through its extensive database, identifying the most compatible individual based on user preferences. Node.js and Vite were used in the backend to act as the project's backbones.

React Router - Client-side Routing

React Router set up the foundations of TutorScape, as it allowed for client-side routing. In essence, traditional websites operate by having the browser ask a web server for a document, which includes downloading and assessing CSS and JavaScript assets before displaying the received HTML. When a user clicks a link, this cycle restarts for each new page. Client-side routing, on the other hand, allows applications to modify the URL from a link click without needing another server request for a new document. Instead, the app updates the interface and uses 'fetch' to request data, refreshing the page with the new information. This approach enhances user experiences by eliminating the need for the browser to request an entirely new document or re-evaluate CSS and JavaScript assets for subsequent pages. It also enables more dynamic interactions, such as smoother animations.

React

ReactJS includes a wealth of advantages, notably in reusable components, state management, and context utilization. Reusable components elevate code efficiency and organization significantly. State management not only facilitates data storage and updates but also seamlessly triggers component re-renders. Furthermore, the versatile context feature enables seamless state sharing among components, be it child, parent, or sibling components.

Challenges we ran into

One of my significant challenges revolved around handling a multitude of pages, especially considering my limited experience in developing applications of this scale. Additionally, I delved deeper into React Router to meet the demands of my project, as my prior knowledge was insufficient for the ambitions I aimed to achieve.

Accomplishments that we're proud of

I take pride in effectively managing the multitude of pages within my website while significantly advancing my expertise across the technologies utilized.

What we learned

I honed my time management skills and stayed level with the fast-paced evolution of modern technologies, ensuring my skill set remained current. Moreover, I deepened my abilities in harnessing AI's captivating advancements, going further into its intriguing nature and groundbreaking capabilities.

What's next for TutorScape

I envision AI-driven assessments to gauge users' proficiency in specific subjects and AI-powered content recommendations tailored to suggest study materials based on the individual's needs. I also want to elevate the user interface even more, ensuring seamless optimization across a variety of devices and platforms.

Built With

• css
• html
• javascript
• node.js
• react
• react-router
• vite