scottzyang/fotofilter-app

Web-app that enables user to apply different types of filters on selected images.

FotoFilter

FotoFilter is a Web Application created with React, and styled with Tailwind CSS. Users are able to select from a predetermined list of photos, or upload one of their one from their local computer. Once selected, the user can choose to apply several filters onto their photo.

Tech Stack/Libraries

Client: React, TailwindCSS
Libraries: React-Image-Filter

Wireframes

• Wireframes Created with Figma

Mobile Design

Desktop Design

Features/Usage

• Predetermined images for User selection.
• Upload local image.
• Once selection/upload confirmed, user can filter using sepia, grayscale, invert, or duotone dial ranges to alter dark and light RGB tones.
• Responsiveness for Mobile, Tablet, and Desktop users.

Running the Application

In the project directory, you can run:

npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Future Iterations

• Allow users to download their filtered image.
• Allow users to add filtered image to separate Gallery tab.

Attribution

• No Photo Icon - Created by Icon.doit
• Photo and Camera Icons - Created by orvipixel
• React-Image-Filter - Created by Stanko