Interactive Black History Museum

Home page
Contact Us page
About page
Gallery page top half
Gallery page bottom half

Inspiration

At first we were thinking of making a 3D model with controls that lets the user appreciate the effort and history behind certain artifacts to help African Americans reconnect with their past and come to understand the intricacies of African history.

What it does

The website hosts information and images of cultural and historically significant artifacts in Africa. This allows the user to become more knowledge about culture that should be preserved in the future to ensure that it never disappears. We centralized these artifacts in our website for your enjoyment! We hope you learn something!

How we built it

We started by building a skeleton using HTML, CSS and Javascript and tried to implement WebGL, to no avail. From there we built the home, about, contact and gallery pages. The contact page uses SQL to store user data in order for us to contact them later and answer any questions. In addition to the backend, we implemented many animations in gallery and home page. Lastly we added a chatgpt plugin that allows the user to invigorate interest and allow the user to dive deep in the topic.

Challenges we ran into

Trying to implement the WebGL 3D model of an artifact, mainly due to the fact that there were no 3D models of these artifacts available to the public. One could convert a 2d image into a 3d projection, but we realized quickly that due to the time constraint- it was not feasible.

We also had an issue with storing the information into SQL. The main issue was misguided goals- we were trying to automate an email to send to the recipient using Python and Express, although we hit a security roadblock with email authentication. So instead, we decided to pivot to SQL and Node JS to store the data and use the data later.

Lastly there was the ChatGPT plugin, which uses API calls to give a response to a user input. Configuring the javascript and css in order for box to work properly was especially difficult. There was a long period of time where we tried to fix the error with the API call not working properly- only to realize it was a billing issue and that you can't utilize it until you pay for it. Thus we implemented it to the best of our ability and moved on with the project.

Accomplishments that we're proud of

Animation is what makes modern websites modern, and also what gives websites their signature style. An Apple website does not have the same feel as a Google website. Utilizing javascript and implementing the animations was a challenge mainly due to the CSS clashes that would make the animation look just a little off. Overall, I'm proud of the animations. It makes the website interesting to look at and hopefully inspires people to learn more about African culture!

Participating in the recent hackathon presented me with an invaluable opportunity to develop and hone my skills in web development. This was my first experience in utilizing JavaScript, HTML, and CSS, and the journey of building my first website was both challenging and rewarding.

I am very proud of my achievements, having played a pivotal role in developing the majority of the frontend for our website. This involved not only a grasp of HTML and CSS but also delving into the intricacies of Node.js to create a backend/server system that complements the frontend. showcasing my commitment to expanding my skill set. Through this project,

What we learned

I learned a lot about how Javascript ticks and what exactly I need to do in order to make the animations 1. smooth as possible and 2. maintain functionality of the website. Additionally I brushed up on my CSS skills when there were collisions with JS, which took a surprisingly long time to get just right. In addition I learned how to use Open Api to use Chat Gpt in a plugin and insert it into the website to allow for the user to increase their depth about the topic.

Throughout this project, I have acquired a better understanding of these technologies. This project also served as a significant learning platform in teamwork and collaboration within a tech project setting. The skills and insights gained from this endeavor are, undoubtedly, assets that I will carry forward in my professional journey.