Historic Events and Artist

• 

  Historic Event Page(Main page)

The opt-in prizes you'd like to be considered for: Best Beginner Hack (all team members are first-time hackers), Best Financial Hack, and Best Use of Google Cloud Best Use of Google Cloud

Inspiration

Art is one of the most essential part of human history. Artworks are always inspired by the culture of the time that the artists live on. Here we want to introduce the artists along a history timeline, and show how different ages shape the styles of artwork.

What it does

It's a web app that provides an overview of important historic events along a timeline, and user are directed to the famous artists that live in the time of the event when they click a historic event on the timeline. Artists live in the same time/region are grouped together, which is a very interesting way to learn about them; Also, we provide a gallery view per artist to provide users with an overall feeling of an artist's work. It's a great tool for K-12 education, as well as a learning window for adults that have an interest for art.

How we built it

1. Techniques/tools used: React, Node.js, HTML, CSS, JavaScript, Google Cloud(MySQL), Google drive
2. The frond-end and back-end are implemented simultaneously with great teamwork; The interface was designed ahead of time, so that we could work in parallel
3. Data are downloaded from Kaggle; We picked this dataset since we are all art fans.

Challenges we ran into

Design a user-friendly experience to provide a smooth user experience was the first challenging at the very beginning. The history is long, and the number of events huge. Eventually, we made a balance between events to cover and pleasing visual experience.

We need to use ~1000 images and we want to grab them by the url automatically generated by Google Drive. However, Google Drive generates the link with hashing method instead of by the name of images, so we need to have a mapping of links and picture. Luckily, we found an add-on for Google sheet that can automatically generate a table of links of the images in an assigned Google Drive folder, and we used the generated table as part of our dataset.

### The hackathon lasts only a few hours; To improve team efficiency, we found a tool which allows us to collaborate on front-end design and implementation, which was proved to be useful

Accomplishments that we're proud of

We managed to handle unexpected events quickly, and proposed feasible resolving methods

What we learned

The tools to build the webapp

The spirit of teamwork

To build an app, end-to-end design and implementation requires clear communication together with good design doc

What's next for Art Gallery

To save time, we only picked a few historic events in Europe in our project; We want to cover more events and artist worldwide in the future

We are going to rent a server, and host the website on it, so that we could continuously use it and improve it. Also, we want to provide it to the public

If the number of visiting increase, we'd like to practice how to scale up the service

Built With

• google-cloud
• javascript
• mysql
• react