Pixel Helper is a web application designed in house by Formulated. In our work we very frequently need royalty free and open source images for use in our clients websites and applications. We realized we spent a lot of wasted time searching for these images and validating the licenses were correct for our uses so we built Pixel Helper. Pixel Helper allows us to find these images fast and with confidence we can use them without legal issues.

Process


For this application we needed to iterate quickly and decided to use the MERN stack. This stack is composed of the following technologies:

  • (M)ongoDB
  • (E)xpress
  • (R)eact
  • (N)ode

This allows us to have a small and highly scalable application in case the need arises. Throughout this application we tried to keep our code as reusable as possible for other projects. To accomplish this a data pipeline was created that scraped data from https://pixabay.com/, https://unsplash.com/, and https://www.pexels.com. Then sent this data through the pipeline that cleans, extracts, and processes this data into a format suitable for our React frontend.

Through this project we were able to experiment with building a Progressive Web Application (PWA). This was a great experience for us. We were able to create a web application that can be installed as a application to iOS and Android as well as providing all the features of a native application.

Thoughts

This process was a fun way for the company to experiment with the MERN stack. While we love playing with new technologies we mostly use Django and Vue. In the future we would like to add a CI/CD pipeline to this application as well as adding proper filtering, searching, and various image sizes.OWA

formulated

Making the world a better place through affordable product contracting.

Solutions

  • Product Development
  • Web Development
  • SEO
  • Marketing

© 2017-2021 Formulated, LLC. All rights reserved.

Ready to do this? Give us a call today! +1-719-900-8036