Nowadays, the most popular form of communication is through social media. And the most popular social media apps all revolve around photo sharing and image thumbnails (Instagram, Facebook, Twitter, etc.). Not everyone has a license and certification to Photoshop, and not everyone can afford to spend money, time, or effort to fine-tune their images.

This is how F-Filter was born. The F stands for forever free, friendly, flexible... and fantastic.

What it does

F-Filter aims to have the flexibility of apps like Photoshop with convenience, simplicity, and inclusiveness. You can apply image adjustments by navigating through a list of filters, or just simply speak to F-Filter to get what you want.

How I built it

The majority of F-Filter (so far) lies in the front-end, based on React. The Canvas API allows for the manipulation of each pixel's RGB values. I did research on algorithms to provide filter options such grayscale, tint, and temperature.

The speech functionality only works with Google Chrome due to the Web Speech API only working on Google Chrome. I inputted a grammar file to make the browser put more priority on relevant commands (e.g. "brighten", "warmer", "red", "turquoise").

The back-end is relatively simple; node.js running express for the endpoints and mongoose to manage data in my MongoDB Atlas database. So far, the server allows users to store filters as codes and later retrieve filters from their codes.

Challenges I ran into

  • only Chrome supports the Web Speech API, I had to come to terms with that
  • Heroku was a big hassle to get working due to the set-up of my GitHub repository

Accomplishments that I'm proud of

  • Setting up the voice commands to work pretty fast!
  • Adapted to working in a new environment: TypeScript, Neovim

What I learned

  • TypeScript is super fun but sometimes a hassle to sort out (but it's worth it)
  • I should prepare more on my codebase structure so that deploying my app to Heroku, for example, becomes easier for future projects

What's next for F-Filter

So much more:

  • way more image adjustments! e.g. colour inversion, sharpen/blur, etc.
  • optimization for larger image files
  • a mobile app, given that most people take and share photos from their phones
  • an image classification endpoint that allows users the option to get an auto-filter based on the contents of their image
  • a social network where users can save and share filters with ease.
  • a better UI
Share this project: