StaffNotes

💡 Inspiration

With everything happening in the world right now, teachers and school staff are being stretched thin, creating low morale and bad work environments. We hope to help alleviate all this stress by creating something that lets student express appreciation to the adults in school to create a more positive and engaging environment. We don't realize how much work and time is put in by the staff at school. So, by making this website we hope that this encourages kids to send more thanks to their staff.

💻 What it does

Our website lets students send personal and positive gratitude notes to teachers and staff at their school. This website is specifically designed to help students write notes on how thankful they are that they have wonderful teachers who care about how each and every one of them are doing. Students can sign up and start sending notes about feedback, compliments and more to the adult they think deserves this kind gesture. Teachers will get it in their inbox on the website and will be able to continue their day with a smile on their faces because of what students have sent them.

Additionally, students can send more constructive feedback to staff, perhaps to say any issues or confusions they had with an assignment or lesson that could be improved in the future. This way, not only does it create a better environment for teachers, but students as well.

⚙️ How we built it

We started with the general idea on paper, talking about what sort of features we wanted and how the website would work. After narrowing the list down to things we could accomplish in just a couple days, we started on the design and backend. Collaborating in a Figma doc, we got enough of the website designed to start working on the frontend. We chose to work in a Replit repository to make collaboration really easy. Then, using HTML, CSS, and JavaScript, we slowly built up the website. On the backend, we used Python, Flask, and MongoDB. Deploying was done on Flyio by dockerizing the backend code.

🧠 Challenges we ran into

Going into this, many of us had little experience collaborating on a project with multiple people at once, which is the biggest reason why we chose to code in Replit and not collaborate separately with local versions of our website. It was a challenge working together without accidentally stepping on each others toes, which slowed down development at first. But, as time went on we grew more accustomed to it.

However, on top of this, we didn't have much experience building websites, which made the addition of even a single feature a long and arduous process, even ones that seem trivial and easy to do.

🏅 Accomplishments that we're proud of

We are incredibly proud that we managed to create a version of the website that has many of the core features we initially planned. As was mentioned earlier, much of this was completely new to us, and it sort of felt like being thrown into the deep end with almost no warning. It's amazing that we managed quickly adapt, staying afloat and organizing to collaborate as smoothly as possible.

📖 What we learned

Much of what we learned may seem trivial to some, like centering a div, using a custom font family, or the many quirks of HTML and CSS. But, we like to think of it as evidence of how much we have grown and learned through these couple days. Even the people we had working on the backend had essentially no experience creating and hosting one, making us more proud of the fact that we made a full working website.

🚀 What's next for StaffNotes

Despite having a working version of the website, there's a lot that still has to be done on StaffNotes.

have the API return pages rather than hosting it statically to block people not signed in from visiting them
add support for multiple schools

For the students:

public gallery of notes that students can take inspiration from
sentence starters
more freedom with tags

For the staff:

favoriting notes
searching and filtering the inbox
server checks that try to filter out blatant hate mail or spam
fix time zones causing time to display wrong

Built With

Submitted to

Eduhack

Created by

I worked on the front end with HTML5 and CSS. To create the design for the website. This was a great learning experience for me because before I wasn’t very experienced with front end, I only did html in school.

Kyle
I worked on front-end. I used HTML and CSS to create the website. With other members who also knew Web Dev, I learned a lot of new different shortcuts and ways I can improve my skills on Web Dev.

Sawar Saini
Using Figma, I worked on the designs of this project. I worked on pairing different colors and visualizations that would convey what we wanted best.

Jialan Xie
I primarily created the backend using Python, Flask and MongoDB, then deploying a dockerized container to Fly.io. Additionally, I added functionality to the website and created a simple JavaScript API wrapper to use. I also edited the frontend from time to time.

Kyler Li
I worked on the Front-end, using html and CSS to make the website look like the design we had in mind. I used many functions and learned several new commands that helped me with the development of our final product.

Jerry Yang