The Miracle Portal

Landing Page - student can enter class code or teacher can access teacher portal
Teacher sign up page to create an account
Teacher view of classes they've created, can also add classes
Teacher view of files they've uploaded to a class, can also add more files
Teacher view of uploading new file
Student view of an individual class
Student view of files uploaded by teacher

Inspiration

We chose The Miracle Project as the nonprofit organization for our project, because we wanted a chance to be a part of the groundbreaking opportunity they provide to so many people with such a wide range of disabilities. Many of the participants and students in The Miracle Project seem to have trouble navigating online sites to access various files and class materials provided by the teachers. One of the worst feelings in the world is one of dejection when you feel like you're not good enough. We've all been there before- the crushing weight of defeat when our worst enemy is our own mind- and we beat ourselves up thinking that we're not enough. No one deserves to feel like that. So we built a classroom portal that focuses on accessibility and ease of use for students and teachers respectively to receive and upload classroom materials.

What it does

For students, they can either receive a class code from their teacher to paste into the root page of the portal, or better yet, get hyperlinked to the class materials. Each "class" has a unique id, and from the student view, they will only need to select from two buttons - Documents or Media. This will take them to a page which cleanly lays out all of the uploaded Documents or Media files that their teacher uploaded for that respective class. Clicking or tapping on any of these file boxes will download that file for the student to view/use. We made each step into large buttons that can be easily accessed through a simple tap. For teachers, there is a simple authentication system that will take them to a different portal listing out all of the classes they've created. From here they can either select a class to edit or add a new class. For any class they they create/edit, they can upload files to either be tagged as a document or media file that will then upload to the server such that students can see it from their end of the portal.

How we built it

Miracle Portal was made using the NextJs 13 App router on a serverless design using prisma connected to a postgres server and utilizing aws s3 buckets to store files.

Challenges we ran into

We were very tight on time and pretty tired toward the end of the hackathon. We had three programmers and no designers so we struggled with coming up with a design for the portal. This meant we spent a good amount of our time changing the CSS and testing out the look and feel of different designs.

Accomplishments that we're proud of

We landed on a design that we all agreed looked good. We finished implementing close to 90% of the project in terms of functionality. We were also able to deploy the project.

What we learned

We learned that design is really hard and that we shouldn't have spent as much time on trivial styling issues. Although we also learned how important design is and how much it changes a user's impression of a website despite functionality features.

What's next for The Miracle Portal

Honestly, there is much to be desired in terms of design. While we created a design with calm colors for the students, the sizing proportions as well as overall color scheme and shapes could be improved on with more time to research accessible design. The next step would also involve creating some additional routing options for accessibility of navigating the different pages throughout the portal.