Frontend roadmap

Based on your project requirements, here's a comprehensive summary for your frontend developer:

Frontend Development Tasks Summary

1. WebRTC Integration

Implement WebRTC for real-time video/audio sessions between tutors and students
Handle peer-to-peer connection establishment
Manage media streams (camera, microphone)
Handle connection states and error handling

2. Token Management

Approval Flow: Allow students to approve token spending for the LangDAO contract
Deposit Flow: Enable students to deposit tokens into the LangDAO contract
Use useScaffoldWriteContract with contractName: "LangDAO" for these transactions

3. Tutor Registration

Create tutor registration form/flow
Collect tutor information and preferences
Submit registration data to backend API
Handle registration success/error states

4. Tutor Availability System

Become Available: Button/action to set tutor status to "available"
Backend Socket Activation: When tutor becomes available, trigger backend socket connection
Stay Available: Tutor remains available until manually setting to "unavailable"

5. Student-Tutor Matching

Request Tutor: Student can request a tutor based on preferences
Socket Communication: Send request via socket to backend
Queue Display: Show queued tutors to student
Accept/Reject: Student can accept or reject available tutors

6. Call Management

Incoming Call View: Tutor sees incoming student requests
Accept Call: Tutor can accept incoming calls
Socket Events: Handle accept/reject events via socket

7. Session Management

Start Session: Student calls startSession transaction on LangDAO contract
WebRTC Call: Both parties enter WebRTC session
Session State: Track active session state

8. Session Monitoring (Bonus)

Time Tracking: Monitor session duration
Top-up Warning: Show warning when student's balance is low
Real-time Updates: Update UI based on remaining time/balance

9. Session Termination

End Call: Either party can end the session
End Session TX: Call endSession transaction on LangDAO contract
Event Listening: Listen for session end events from contract

10. Receipt & Restart

Receipt Display: Show session receipt after endSession event
Restart Cycle: Allow both parties to restart the matching process
Tutor Availability: Tutor remains available for new sessions

Technical Implementation Notes:

Scaffold-ETH Hooks to Use:

// For contract interactions
useScaffoldWriteContract({ contractName: "LangDAO" })
useScaffoldReadContract({ contractName: "LangDAO" })
useScaffoldEventHistory({ contractName: "LangDAO" })

// For contract info
useDeployedContractInfo({ contractName: "LangDAO" })

Socket Events to Handle:

Tutor becomes available
Student requests tutor
Tutor accepts/rejects call
Session start/end notifications
Real-time status updates

Key Contract Functions:

approve() - Token approval
deposit() - Token deposit
startSession() - Begin tutoring session
endSession() - End tutoring session

This covers the complete flow from registration to session completion with proper WebRTC integration and smart contract interactions.

Navigation Menu