When we were young, we were inspired by books and comics about famous scientists and history because they were accessible and easy to read. Now, as we see our siblings struggle with common online materials such as Wikipedia, we decided to make a website that helps foster their curiosity and aid their learning with scientific facts and historical events.
The website will receive the year that the user enters in the search box, and it will output three results, one with the nearest time value, and two others adjacent. The website also has a keyword search function at the top right corner and it will search for events containing that keyword in the respective field.
Our project starts with an AI-driven data-collecting process, filtering information relevant to children. During the ideation phase, we decided to create a user-friendly website using the ReactJS framework, along with HTML, CSS, and JavaScript, integrating EmailJS for communication. We built a database with AI assistance and implemented navigation features like "Search by Year" with binary search and "Search by Word" using mapping and array searching, also highlighting keywords through string processing. Additionally, we designed a basic graphical user interface (GUI) and a logo with AI, finalizing the contact section and email-sending function using an API. These elements combine to create an accessible platform that effectively meets our project objectives.
During the making, we ran into multiple problems in several processes. The biggest one is the ideation of the product, we thought of many designs for our website, from the Alzheimer's Diary mobile app to block-based storytelling and making for children. We also have some issues with collecting data, because we have to discuss whether the piece of information is suitable for children. Regarding the technical problems, our technology lead has to think of an algorithm to search for keywords and highlight those in the matching results; she also integrates email JavaScript into the website.
In the end, what we have created is an easy-to-use, eye-catching, and informative website. We are proud that we have made it possible to search with keywords and display additional results besides what the users find. We were also able to make our mascot cartoony and appealing to children. We cannot believe that we made a functional website in two full days, which I even enjoy using.
After all of these, we reflect on ourselves and see that we have learned a lot from this project. We learn about how data works, how to automate data finding using AI but also how unchecked information can have a huge impact on the users. We learn to think like an engineer and think about what problems can exist and how to resolve them. Only that, we learn that there is no certain final product because we are constantly trying to improve it.
We have discussed how we can further improve our website, but because of time limitations and our first-time experience in a hackathon, these are the features that we think will be suitable for our product: the information will be updated annually with AI, implement report function on top for any misinformation, integration with Quizlet to create flashcards, make the result card show more events in one year, user authentication, a bookmarking system with chronological timelines, more searching customization, dark mode and theme customization, create community tab with moderating systems, feedback tab, rate this website features.
HTML, CSS, JavaScript, EmailJS, ReactJS