Git Product home page Git Product logo

shopsmall's Introduction

ShopSmall - Creatica Hackathon 2020

Inspiration

I was inspired by the countless ads and videos striving to promote small businesses I've seen on social media. I always wanted to look for a database containing these small businesses exclusively but could never find one, so I decided to create one. The format of ShopSmall was also inspired by the format of the Amazon website, with search options and different categories to look through. Recently, because of the global pandemic, many owners are relying on their shops to earn money and stay afloat, but they often go unnoticed despite the high-quality items and top-notch customer service they provide.

What it does

ShopSmall is essentially a database of small businesses that are often overlooked and underappreciated; users can search and look through different categories to find these shops. They can then be redirected to a specific shop's website if desired. No matter what, when on the site, users are always supporting a small business, which is what is unique about ShopSmall and sets it apart from other online shopping stores.

How I built it

I built ShopSmall using HTML, CSS, and Javascript. The Javascript file was used to move the collapsible navigation bar and also to search the list of shops after a user inputs something into the search bar. The IDE I used to build ShopSmall is repl.it.

Challenges I ran into

I ran into a couple of challenges with formatting all the pictures, navigation, and search bars. It was difficult to have everything fit onto the page and look balanced at the same time. Also, with the large amount of pictures that I included in this webpage, I ran into small bugs which were often quite difficult to find; a single mistake could mess up the whole page.

Accomplishments that I'm proud of

I am still relatively new to web development and hackathons, so I am proud that I was able to successfully complete my project in the short amount of time that was allotted. Right from the start, I made a plan of when I was going to complete what, and this helped me to think realistically and to have a finished project that I was satisfied with by the deadline. I was also extremely proud that I was able to figure out how to implement a collapsible navigation bar on my own.

What I learned

I learned how to create a collapsible navigation bar, and I also learned how to search for substrings within a string! In general, my debugging skills have definitely improved with this experience; I find myself to be much more resourceful now.

What's next for ShopSmall

In the future, I hope to add tags to the pictures so that users can search for the shops more easily. For example, a jewelry shop could have tags such as "gold," "earrings," and "necklace," and be found when a user inputs one of these words. In addition, I hope to add short descriptions to each shop to provide users with a better idea of the different small businesses. I would also love to turn ShopSmall into an app at one point!

shopsmall's People

Contributors

crystalrchen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.