rohankumawat / guitar-guitar

guitar-guitar store front

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Guitar Guitar

Do you have the GUTS Hackathon 2022 (University of Glasgow)

“Do You Have the GUTS?” puts teams of 5 against each other to solve challenges from our industry partners, with prizes being awarded to top finishers for each challenge.

The event hosts several workshops to boost your professional image and sharpen your skills for the upcoming internships and spring week programs. You can even chat with the people in charge of these programs and get some insider knowledge on what to expect.

If you are new to programming do not fret, there will be several challenges that are beginner friendly and we will run our own "How to have the GUTS" in order to get you prepared and ready to face the challenges.

Hackathon Project (GUITARGUITAR):

Create an innovative store viewer/page. Take the data (provided by the company), explore it, and devise a creative way to view, filter, navigate, slide or even play through!

Idea:

The idea revolves around the UI/UX of the website and is inspired by the Zara and Netflix website. We've picked a few elements from both Zara and Netflix.

First Page/Front Page: Our first page of the website will look a lot like Zara's current UI, where swiping vertically, the website will show different companies' guitars (Gibson, Epiphone, Yamaha, etc.). Swiping (left or right) horizontally shows different guitars (Acoustic, Electric, and Bass).

zara ui

The first page won't include any filters as a visitor coming to an online e-commerce platform expects to find different types and brands of guitars. They don't need checkboxes at that moment. So, the first page will be reserved for special deals and show them the store's inventory.

Second Page/Full Inventory: Once a person clicks on a type or a brand of the Guitar, they'll be taken to the second page, which will show them all of the guitars of the respective brand/type or all of the guitars together. The filter's location will be horizontal, like Airbnb, as all the filter options will be available at once. All of the filters will have interactive filtering.

airbnb ui

Third Window: When a person clicks on Guitar, a display window appears like a Netflix (Like a dialogue window) series description window. At this window, the person can closely look at the Guitar with its description and the songs allocated to the particular Guitar so that they can listen to the tone of the Guitar and the songs that sound good with the particular Guitar.

Fourth Feature: We've built an Artificial Intelligent ChatBot using IBM Watson Assistant and integrated it with the website. We have included the ChatBot as it will make the user's experience on the website better and easier.

Virtual Assistant ChatBot

Execution:

Under 48 hours of the Hackathon, we were able to build and integrate all of these things together and demonstrate our project.

We were not able to do any kind of Responsive design in the limited given time.

  • First Page:

  • Second Page:

  • Dialogue for Spotify and Youtube Integration with Guitars:

About

guitar-guitar store front

License:MIT License


Languages

Language:JavaScript 83.5%Language:TypeScript 7.2%Language:CSS 6.4%Language:HTML 2.8%