briansturgis / janteamweek

Epicodus group project in which a prior version of a very limited functionality app was improved into a much robust version. It is a media optimizing tool for video and image files that uses an 3rd party API to make the changes requested.

Prescription

A program designed for developers to quickly compresses and manipulate images or videos

By Brian Sturgis, Zack Rutledge & Chloe Loveall

         

Table of Contents

1. Table of Contents
2. Technologies Used
3. Description
4. Setup/Installation Requirements
   • Installation
   • Cloudinary API Setup
   • API Security
5. Contributing
6. Known Bugs
7. License
8. Acknowledgements
9. Contact Information

Technologies Used

• Adobe Photoshop 2021
• Bootstrap 4.5.3
• Cloudinary
• CSS
• eslint 6.3.0
• HTML
• JavaScript ES6
• Jest 24.9.0
• jQuery 3.5.1
• Node Package Manager 6.14.9
• Postman 8.0.4
• webpack 4.39.3

Description

Prescription utilizes the Cloudinary API and it's widget functionality to allow users to upload photos/videos from their computer, a webpage, Google Drive, Dropbox, Facebook, Instagram or Shutterstock. The image can then be compressed and manipulated with the click of a button.

Current image manipulations include: Instagram-esque filter effects, facial blurring (of one or multiple faces), and image scaling with the user's chosen dimensions. Current video manipulations include: video trimming (from beginning and/or end), slow motion effect, video scaling with the user's chosen dimensions, and the ability to convert a video to a GIF. Additionally, the user can specify the returned file type (.svg, .png, and .svg for images/.mov and .mp4 for video).

Setup/Installation Requirements

Installation

• Clone the repository with the following git terminal command: $ git clone https://github.com/BrianSturgis/JanTeamWeek.git
• Open the project directory in your terminal
• Confirm you have installed Node and Node Package Manager
• Recreate the project environment/install required dependencies by running the terminal command: $ npm install
• Create the production environment by running the terminal command: $ npm run build
• Open the project in the browser of your choice with the terminal command: $ npm run start

Cloudinary API Setup

• Go to Cloudinary to sign up for a free account. This will allow you to acquire a cloud name, API key, and API secret (can be viewed through your account dashboard)
  • In your Cloudinary account, go to: Settings -> Upload -> Upload presets -> Add upload preset
  • From the "Signing Mode" dropdown, select unsigned and then save the preset:

API Security

• Create a .env file in the root directory of the project.***
  • Copy the cloud name, API key, API secret, and preset name from your Cloudinary account and paste into your .env file, but please note the example below does not contain real or valid information:

***A .env file along with the dotenv-webpack will keep your API key secure. Read more about API key security.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the project on GirHub
   • Follow Installation/Setup Instructions above
2. Create your Feature Branch: $ git checkout -b YourFeatureBranchName
3. Commit your Changes $ git commit -m 'Add some AmazingFeature'
4. Push to your feature branch on Github $ git push origin YourFeatureBranchName
5. Open a Pull Request

Known Bugs

• None at this time

License

MIT

Acknowledgements

• Max Brockbank
• Chelsea Becker
• Glen Buck
• Garrett Brown
• Shields
• Choose an open source license
• GitHub Pages

Contact Information

Brian Sturgis [email protected]
Zack Rutledge [email protected]
Chloe Loveall [email protected]