Inspiration
We were inspired by widely used and tested education apps like Camino, Class Dojo, Google Classroom, and Aeries. By studying how other developers tackled similar problems, we were able to combine proven interface designs and adjust them to our solution. This allowed us to immediately establish a clean and highly user-friendly experience for HighView staff.
What it does
HighView Portal securely stores and manages all student engagement data in one place. It allows staff to track attendance, create events, and award bonus points. The system also provides statistics of student progress, including a sortable Leaderboard and filtered Student Rosters (based on cohort). It provides an efficient platform to store and manage your class data, monitor progress, identify students needing support, and manage incentives and awards efficiently.
How we built it
Front-end: We built the user interface with a dynamic Single Page Application (SPA) using React, JavaScript, and HTML, formatted with CSS. The design process began in Figma to envision the user experience before development. We utilized React Router DOM for structured navigation (including nested routes within the dashboard), and managed component state efficiently with React Hooks.
Backend: We used Flask to create RESTful APIs to connect our frontend to our backend. The database we stored our user’s data and the students’ data is hosted on DynamoDB, a secure and reliable AWS service. We created tables and allowed the user to add, edit, update, and access the student’s data. We also gave the ‘forgot password’ option in case the user forgot some of their sign-in information. Flask gets the API requests from the frontend, processes them, and then returns the modified data with DynamoDB.
Challenges we ran into
Most of the team had never used GitHub before, so navigating it was a bit challenging at first. Additionally, we are a young team, one member was a sophomore and the rest of the members were freshmen; and it was the first hackathon for three of the members. We also had to learn how to use AWS services and various professional softwares we've never had experience with before.
On the backend side, we originally were using Aurora & RDS to host our database. However, we ran into some difficulty in accessing the database with our permissions and using the query editor. We later switched to DynamoDB for our database to combat this problem. We were unable to connect our frontend to backend with the APIs
Accomplishments that we're proud of
We're proud of how far we got with our code. Since many of us started with limited knowledge of the tools we were working with, being able to learn how to understand and utilize databases, APIs, React, and AWS services was very exciting, and we are eager to keep learning more.
We are proud of the individual work we did in our frontend and backend groups, even though we weren't able to connect them together in the end.
What we learned
For the backend, we learned how to create, store, and access databases using AWS services such as 'Aurora & RDS' and 'DynamoDB'. We also learned how to use flask to code API's and how to test them with Postman, and how to encrypt them using JWTs.
We successfully navigated and integrated a full-stack architecture while adapting to learning new professional tools. We gained hands-on experience building the API layer with Python Flask and mastering modern React architecture, utilizing Hooks for complex state management like dynamic filtering and sorting. Crucially, we learned to provision and connect to AWS database services, setting up both the relational Aurora/RDS and the DynamoDB. Finally, we learned the essential process of merging our front-end and back-end work collaboratively using GitHub.
What's next for HighView Portal
We have many ideas for where to take the HighView portal next:
Google Classroom Integration: We plan to implement Single Sign-On (SSO) and Roster Sync with Google Classroom to eliminate manual student enrollment and sign-in codes.
New Educator Hubs: We will develop a Community Hub for managing student interactions (study groups) and a Career Hub for staff to manage student mentor requests.
Student Portfolio: We will add a personal student section to track accomplishments, badges, and completed projects, directly supporting students in building their resumes and college applications.
Log in or sign up for Devpost to join the conversation.