As high-school teenagers ourselves, our team experiences the stress and anxiety that accumulates throughout the week, whether this may be from the pressures of school or personal issues outside of school. However, knowing how stressful our everyday lives could be, we can not imagine the pain and agony teenagers with PTSD, Post-Traumatic Stress Disorder, must endure everyday. Many suffer from this mental health condition that is mainly caused by the witnessing of a terrifying event such as assault, domestic abuse, and more. While these traumatic experiences trigger flashbacks, nightmares, and anxiety, our team also believes that therapeutic devices can help relieve this stress. We also know that due to certain circumstances, there are many teenagers who do not have anyone to lean on to share their bottled-in emotions and feelings. Therefore, we have been inspired to create an interactive, remedial website that comforts these teens and lets them anonymously communicate with other victims of PTSD, showing them that they are not alone even in the loneliest, hardest times.

What it does:

Our website consists of a multitude of activities and interactive features. Firstly, it has a diagnostic test to check if the user is experiencing any symptoms of PTSD. That way, for users who are unsure of whether they go through this mental condition are able to confirm. The site also contains various calming and self-reflecting activities for users to follow, including meditation, soothing music from two embedded playlists, journaling prompts with a space to type on, a drawing pad, and an inspirational quote generator that we coded. Along with self-activities, our website also includes interactive features. One quality is an anonymous live chat feature – which we programmed ourselves using Websockets and Deno – that allows users to discuss with anyone in the PACE community and voice out their opinions without revealing their identity. Another quality is the embedded Padlet blog, which allows them to rant, ask or answer questions, and help out one another.

How we built it

Our team’s website was designed in Canva and coded with HTML, CSS, Javascript, React, and Deno. As we brainstormed the layout, we created a wireframe on Canva to base the design off of. We then coded our site through the IDEs and Visual Studio Code. Our live web chat is programmed with JavaScript and Deno. Although none of us had prior experience with it, we were eager to learn and followed some online tutorials. The random quote generator was built with a json file of quotes and React hooks. This was also the first time any of us had learned about React hooks, so we also did some online research for this component as well.

Challenges we ran into

With the limited amount of time we had to envision and construct our project, our team experienced several adversities throughout the process. Firstly, some features we wanted to implement required more than just basic HTML/CSS. Because more than half of our team were first time hackers, we had limited technical skills and therefore had to narrow down our choices. Even though we didn’t have much experience, we challenged our skills by going beyond our comfort level by learning some new programming concepts to create interactive elements such as the random quote generator powered by an API and a live web chat. We were set back when we were faced with debugging errors when deploying the quote generator. In the end, we learned that node_modules should not be committed to the GitHub repo.

Accomplishments that we’re proud of

Regardless of the challenges and obstacles that we experienced throughout the coding process, our team accomplished many milestones and goals for our application. Our first achievement is the creation of our diagnostic test; it is one of the unique features on our site that we worked very diligently on through research and debugging. It was also the basis of our project, letting us expand on the idea and providing a starting point for our website. Another accomplishment of our team is the live chat feature. This was one of the most challenging and complex aspects of our site, yet we were able to successfully program it to function properly.

What we learned

Most of our team did not have any prior experiences in hackathons. Additionally, none of us entered the hackathon as coding experts, but instead as passionate, curious high-schoolers who are eager to learn and create. However, we discovered that skills and experience aside, the most important factor is passion. All of our passions to learn and create an innovative application helped us bond very well as a team and make expeditious progress on our website. Another takeaway we learned was that collaboration, devotion, and honest communication are key, as “teamwork makes the dreamwork.” When one of the members’ code wasn’t functioning properly, the rest of the team always jumped in and helped debug the program.

What's next for PACE

This is just the beginning for our PACE application. Our team plans to implement more therapeutic features onto our website, such as a Google Maps API that connects users to therapists nearby and provides their contact information. Another feature we will soon encode is a daily mood tracker for our users to write on. Last but not least, our team would like to make this website an accessible app that is accessible to both phone and PC users.

Built With

Share this project: