Skip to content

Generate an animated GIF from a set of images. Built with React and Gifshot.

License

Notifications You must be signed in to change notification settings

kaboomshebang/kbsb-gif-creator

Repository files navigation

kbsb-gif-creator

Generate an animated GIF from a set of images. Built with React and Yahoo Gifshot. Figma design

Build

# install dependencies
npm install
pnpm install
# run dev server
npm run dev
pnpm run dev

# build
pnpm run build

Todo

  • change nav sizes
  • Fix mobile bug. Solution: .js lib import failed after deploy
  • add components
    • Add pop-up to UploadModal displaying the filenames that are uploaded by the user
    • image sequence
      • add image ordering functionality
      • add the imagename
      • add logic to automatically set the resolution based on the input images
      • add remove image button
    • gif properties
      • create slider component
    • export GIF
    • generate GIF
      • add processing icon
    • create modal component to display output
      • Download button
      • Fix download button on mobile
  • add state to components
  • setup all logic to generate GIF
  • connect components to the GIFshot js lib
  • Add favicon and homescreen icon
  • Fix: width ratio calculation when re-ordering or re-moving
  • Improve: GIF export-modal on mobile (image ratio)
  • Improve: Add logic to lock the ratio between width and height. So that setting a custom height automatically sets the correct width. (Refactor the component hierarchy?)

Retrospective

  • Refactored into function components. I would have probably changed the component structure in a way that would make state management easier.
    • An "ImageSequence" component (step 2) that contains the child-components, so that for example image-size values are easier to manage. I could still use StepSection, StepHeader, etc, but then the 4 steps would have their own state.
  • Refactored into function components. Use .bind(this) in the constructor to set the correct execution context for methods
  • References to passed down state don't re-render. useState only triggers a re-render with new values.
  • Splitting useState in seperate single variables is easier to setup then combining multiple properties in one object/array. (Or maybe I'm unaware of some kind of trick 🤨)
  • Perhaps only use function-components instead of class-compoents. (So managing state accross components is easier?)
  • Using more generic Git branchenames ("add-state-to-components" instead of "add-state-to-export-component") would have worked better when the application is still under construction. Specific feature branches perhaps work better when the application is fully working and new features are smaller.
  • Triggering an unmount CSS transition with a setTimeout is probably something that can be improved. (But how?)

Gifshot

Thanks to the creators and the contributors of the Yahoo Gifshot library.

About

Generate an animated GIF from a set of images. Built with React and Gifshot.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published