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!

Built With

Share this project:

Updates