-
-
Home Page
-
Form
-
Filter
Contact: DiscordID - Sharkface#9495
Inspiration
This is our first time attending a Hackathon and it was amazing to see the diversity of people in this event. Inspired, we wanted to create a site for users like this to come together and share their culture to peers or learn about cultures they may be unfamiliar with. It’s always amazing to see how technology can bring people together and we are proud to be involved in the process!
What it does
Our site is a way for users to interact and learn about other cultures from around the world. Instead of it being a Wikipedia of cultures, it engages users to post their own experience of a culture. Users can browse the site to learn more about aspects of culture from others or share their own for people to see. If you want to know more about a specific culture you can use the search bar to filter posts (more filters to come).
How we built it
The website is built on the JavaScript framework, React. Utilizing React’s simplistic structure of creating a single paged site by re-rendering components, we were able to create a lightweight website for users to easily create posts. To keep our website organized, we used the JavaScript extension, JSX, to assist us in structuring the components. We used CSS to style the components and JavaScript to add functionality to them. Additionally, we integrated Googles Realtime Firebase Database to store and fetch data. Specifically, we used the Firebase Database API to allow our local site to communicate to the cloud database.
Challenges we ran into
Our biggest challenge was scalability. At first, we fetched all the data from the database at once when the site first loaded. Currently it is not a problem since there is not much in the database, but as the project grows and more data is added, this would be an issue. To resolve this, we loaded four rows of data when the site first loaded. Then, when the user scrolled to the bottom of the page, it would fetch 2 additional rows. By doing so it optimizes performance by only fetching data when needed while maintaining a smooth UI. Connecting the database to the project was also difficult. Our experience in APIs were limited so we spend a portion of our time learning about what APIs are and how they function. Reading documentation was challenging at the start, but it became manageable after breaking it down into smaller steps.
Accomplishments that we're proud of
Our team is relatively new to web development, so building a fully functional website was a satisfying accomplishment. We all went through a lot of stressful debugging, but with our strong teamwork it was rewarding to see the bugs resolved. Our communication developed as the Hackathon progressed which will be beneficial for future careers. Overall, even though we started with little, we came out with a lot more knowledge and experience that we can apply to future projects.
What we learned
We learned to tackle problems by breaking them down into smaller ones. Although difficult, we tried to focus on the parts that were most impactful such as database connection and less time on parts such as styling. This improved our time management as well as our workflow. Because we were new to web development, we learned how to structure a website using different front-end features. Furthermore, we learned about APIs, databases and how they all incorporate together to create a fully functional website.
What's next for Culture Connect
Adding a login system is next on our agenda. This would improve user experience by implementing new features such as a liking system, comments, profiles, and deleting/editing posts. We would also like to add filters such as country and genre of culture. Finally, we would like to improve our styling by adding animations and color ranges. Once we have a stable version with these features implemented, hosting our website would be the next step!
Log in or sign up for Devpost to join the conversation.