The Inspiration behind Tranquility is the fact that a lot of applications are designed to help people with mental health, but tend to fail to connect with individuals. Thus, there needs to be a way to give resources to people in need and establish a connection. Furthermore, these applications are not the easiest to use for people with mental disabilities; therefore, there was a need to simplify the questions in order to get to the result.

What it does

Tranquility is designed to give users the ability to use our application and get resources that would help the user find the solution. The process of using our application is to go to the second tab of the navbar and make sure you are in the card selection portion of the page that displays different emotions. Once there you can hit any of the eight cards, usually the person should pick at least four cards to get a definite output. Depending on what the user picks, resources such as books and videos will pop up and let the user pick what they like. Once the user selects the book or video they are redirected to another platform that allows them to access it.

How we built it

Why Figma? Create an initial mockup with Figma to align our thoughts on the design and functionalities. We used Figma to give the base design for the desktop and mobile version of the app. Furthermore, we decided to go with specific design patterns for text style and colors. Lastly Wanted to decide how components would be integrated.

Why React and Material UI?

Then we decided to build the front-end with React and Material UI, to supply the components needed. Such as navbar sign in/up/out and responsive versatile display.

Why SupaBase?

SupaBase was easy to integrate into the backend to provide the ability to have credentials for customers.

Challenges we ran into

Hector Rodriguez The challenges I ran into are communication problems with our team due to equipment malfunctions. Also time management was an issue due to personal responsibilities and duties that arose.

Liyu Lin The biggest challenge that I faced was using React. This was my first experience creating a Node.js project and I had a problem with installing nodejs. However, I got the solution by a lot of searching and my teammates’ help.

Brandon Torres The biggest challenge that I faced was learning how to dynamically export components and utilize react tools such as usestate and async with utilizing an api. However, I know the basics of react so I was able to help navigate the paths to files and set up basic components and elements.

Alexey Aulov The challenges I ran into as a backend engineer was learning how to use react, also how to implement graphql. I was new to react, I had to understand how the framework is applied dynamically. Furthermore, I was familiar with databases, but I had to adjust how to use graphql. Lastly working as a team presented it’s own challenges like keeping track of things, and also time management skills where to put to the test as well.

Accomplishments that we're proud of

What we learned

Hector Rodriguez This project taught me a lot about scraping data off API and filtering useful data from it.

Liyu Lin This project has taught me not only about how to work in a group, but also a lot about all of the technologies that are required to build an application from scratch. We were able to bounce ideas off each other and create a practical project. We respected each other’s viewpoints and enjoyed the process.

Brandon Torres This project has taught me to constantly keep communicating and improve speaking to keep track of things. Also this project allows me to share my ideas and build creativity with my teammates. This allowed us to expand our knowledge together and learn more.

Alexey Aulov I’ve learned how to utilize graphql to work with react. Furthermore, I learned what are best practices when making responsive design. Also learning the functionality of exporting and importing tools was a useful lesson. Lastly, working with your team tested our ability to listen to each other and make a decision.

What's next for Tranquility

In the future updated versions we plan on implementing a podcasts API and a Video API to provide additional resources and information. In addition to this, we will further pursue our attention on the coding implementation to apply a more robust style of code.

Built With

Share this project: