EdButBetter

Overview
Landing Page with Threads
AI generated summary of important announcements and threads
AI Q/A to answer questions only based on forum
New Thread
Rant Section - your rants are turned into gibberish so it doesn't offend anyone!
Profile Edit Page
Sign in / Sign up Page
Mobile Responsiveness

Inspiration

We've all been there – lost in a sea of endless threads on clunky, outdated educational forums. Trying to find a simple answer to a homework question felt like navigating a labyrinth. We saw how much time students (including ourselves!) were wasting, and how often these platforms hindered collaboration instead of helping it. We were inspired by the potential of online forums for learning, but frustrated by the reality. We wanted to build something better, something that leveraged modern technology to create a truly intuitive and enjoyable learning environment. We were particularly inspired by the advancements in AI, and how it could be used to organize and contextualize information. We'd also all experienced that feeling of needing to vent about a tough course or assignment, but not having a safe, appropriate outlet.

What it does

EdButBetter is a reimagined educational forum designed for the modern student. It's built to be:

Organized: Clear sections for each course, lab, and assignment keep discussions focused.
AI-Powered: Our "What's Happening?" feature provides instant summaries of important announcements and popular threads, saving you time scrolling. Our AI Assistant answers questions based on the forum content itself, providing contextually relevant help and preventing plagiarism.
Engaging: A clean, modern interface and the unique "Rant" feature (which turns your frustrations into harmless gibberish) make participation more enjoyable.
Secure and Anonymous: Students can ask questions and contribute without fear of judgment, thanks to anonymous posting options.
Accessible: Designed with a mobile-first approach, so you can access the forum on any device.

How we built it

EdButBetter is built using a modern, robust tech stack:

Frontend: React forms the foundation of our interactive user interface. We used functional components with hooks (useState, useEffect, useRef) for efficient state management and side effects. React Router handles navigation between different sections of the forum. React Markdown is used to beautifully render user-submitted content, supporting formatted text, code snippets, and more.
UI Components: We leveraged Material-UI (MUI) for a consistent and visually appealing design. MUI's pre-built components (like Box, Paper, Typography, Button) allowed us to build quickly and maintain a professional look. We customized the MUI theme to create a unique visual identity.
Backend: Firebase provides the essential backend services. Firestore, a NoSQL database, stores all forum data (threads, posts, user information). Firebase Authentication manages user accounts securely and supports email/password and Google sign-in. We use Firestore's real-time listeners (onSnapshot) to keep the forum data updated instantly.
State Management: We used a combination of React's built-in state management tools. React Context API (specifically a CacheContext) is used for caching data fetched from the backend, reducing unnecessary API calls and improving performance. Local state is managed within components using useState hooks.
Styling: We used CSS-in-JS through MUI's sx prop for styling. This allows us to write CSS directly within our React components, making styling more organized and maintainable. A custom theme, with responsive typography, ensures a consistent look and feel across different screen sizes. The design is mobile-first, ensuring a great experience on phones and tablets.
AI: The "What's Happening?" and "AI Q/A" features utilize the Gemini API. We make API calls to the model passing system instructions to the model to answer based on the threads data only.

Challenges we ran into

AI Integration: Getting the AI to reliably answer questions only from the forum content and to accurately summarize diverse threads was a significant challenge. We spent considerable time refining our prompts and system instructions to the Gemini API, and implementing robust error handling. We needed to handle cases where the AI might not have enough information, or where the threads contained conflicting information.
Real-time Updates: Ensuring that the forum data updated instantly and reliably for all users required careful management of Firebase's real-time listeners. We had to optimize our data fetching and caching strategies to prevent performance bottlenecks.
Data Modeling: Designing the Firestore database schema to efficiently store and retrieve the hierarchical structure of courses, sections, threads, and posts was complex. We had to balance flexibility with performance considerations.
Responsive Design: Ensuring a consistent user experience across a wide range of screen sizes (from mobile phones to large desktops) required careful planning and testing.
Markdown Implementation: We needed to account for security-related issues such as XSS (Cross Site Scripting)

Accomplishments that we're proud of

Functional AI Integration: Successfully implementing the "What's Happening?" and AI Q/A features, providing a core differentiator from traditional forums.
Real-time Functionality: Creating a seamless real-time experience, where new posts and updates appear instantly.
Clean and Intuitive UI: Designing a user interface that is both visually appealing and easy to navigate.
Mobile-First Design: Building a forum that works flawlessly on mobile devices.
Rapid Prototyping: Building a fully functional prototype in a short amount of time, demonstrating the core functionality of EdButBetter.

What we learned

AI Model Capabilities: We gained a deep understanding of the capabilities and limitations of large language models like Gemini, and how to effectively utilize them in a real-world application.
Firebase Real-time Database: We learned how to leverage Firebase's real-time database for efficient data management and synchronization.
React Best Practices: We honed our React skills, particularly in areas like state management, component composition, and performance optimization.
Team Collaboration: We learned how to work effectively as a team, dividing tasks, managing code, and communicating effectively.
Problem-Solving: We faced numerous technical challenges and learned how to approach them systematically and creatively.

What's next for EdButBetter

Enhanced AI Features: We plan to explore more advanced AI features, such as live multimodal interaction.
Improved Search: Implementing a more powerful search functionality that allows users to easily find relevant content.
Moderation Tools: Adding tools for moderators to manage content and ensure a positive community environment.
Integration with Learning Management Systems (LMS): Exploring integration with popular LMS platforms like Canvas and Blackboard.
User Testing and Feedback: Conducting thorough user testing to gather feedback and iterate on the design and functionality.
Scalability: Optimizing the platform for scalability to handle a large number of users and courses.