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.