Needle in a Haystack

Discover and share media that you love

Comment

Inspiration

With the advent of complicated recommendation algorithms, it is interesting to see how biases are impacting the media we discover on the internet. Needle in a Haystack presents a simpler sharing platform curated by its users. The goal is to help people find media that is shared and tagged by other users on aspects that social media algorithms may not pick up.

What it does

It is a web application that uses a tagging system to match media with the user's interests. Further, it generates previews of the shared media, to give the users an intuitive experience when searching for media. The application is designed to run seamlessly on desktop and mobile browsers.

How we built it

The UI is a web application, built using the ReactJS framework. It uses KendoReact components across most pages to provide an intuitive interface that is clean and modern. Some of the key KendoReact components used in the application are:

  • ListView and Cards on the discover page to present the media
  • Chips to indicate the categories
  • Forms on the share page to provide easy validation
  • Popups and dialogs across most pages

Further, the entire user interface is designed using the CSS Flexbox layout that ensures a clean looking UI regardless of the device, browser, and resolution that the application is accessed on.

The back-end is an ASP.NET Core Web API built on .Net Framework 5.0. It is written in C#, and uses a JSON file store.

Challenges we ran into

Designing an application with a device independent UI required me to be cognizant of the layout and CSS of each element being put on the screen.

The application is designed to connect to a back-end that can be hosted anywhere. This introduced issues with the CORS mechanism when connecting to the back-end, and required some changes to the back-end code.

Accomplishments that we're proud of

The UI is flexible enough to adjust to any resolution, and there was no need to maintain separate style sheets for different devices. Integration with the KendoReact components also went smoothly, and saved a lot of time when building the application.

What we learned

Enabling and using CORS for web applications. The flexbox layout took some getting used to, but ultimately led to much cleaner code.

What's next for Needle in a Haystack

  • Adding more features to allow for more refined discovery
  • The back-end stores data in JSON files, and adding a database store will definitely help improve performance
Share this project:

Updates