Diversify

Landing Page
Discover Cultures
Learn about them (1/2)
Learn about them (2/2)
African History
Designing the UI/UX on Figma

Inspiration

At this hackathon, our group is focused on fostering cultural understanding and awareness through our project. We believe that by increasing awareness and knowledge about diverse cultures, we can help to reduce prejudice and foster empathy and respect for people from all backgrounds. Our aim is to create a platform that celebrates cultural diversity and promotes cross-cultural understanding and communication.

What it does

Diversify is an app designed to promote cultural awareness and understanding. With Diversify, users can learn about different cultures through a variety of resources, including articles and quizzes.

How we built it

Our app was built using Python and Flask for the backend, and React, Next.js, and Tailwind CSS for the frontend. To generate information and quizzes, we integrated the OpenAI API with our backend. This allowed us to leverage the power of OpenAI's machine learning algorithms to provide users with high-quality, informative content about different cultures. On the frontend, we used React and Next.js to create a dynamic and interactive user interface, with Tailwind CSS to help us quickly and easily style the app. With this technology stack, we were able to create an app that offers a rich and diverse learning experience, with informative content and engaging quizzes that help users expand their knowledge of different cultures.

Challenges we ran into

One of the main challenges we faced while developing the app was modifying the prompts we provided to the OpenAI API to generate accurate and relevant information and quizzes about different cultures. Initially, we found that the prompts we provided to the API were not giving us the desired output, and we had to spend a significant amount of time tweaking the prompts to get the correct results.

Additionally, at the end of the software lifecycle, there was an issue with connecting to the backend with python. This led to connectivity issues where we would have to temporarily solve by disabling CORS. Despite the workaround, calling and receiving information from the backend became inconsistent as it would lead to Error 500 around 1/3 of the time.

Accomplishments that we're proud of

We made a fully responsive website that accounts for all screen sizes with a modern UI design.

What we learned

We became accustomed to Next.js and learned concepts like Dynamic Routing. We learned how to use Axios and fetch information from a personal backend API.