GIF Maker Documentation
Overview:
The GIF maker is a web application that allows users to create GIFs by uploading multiple images. The GIF generation process is managed through a sequence of API calls, user interactions, and state management within React components.
Features:
- Image Uploading: Allows users to upload multiple images for GIF creation.
- GIF Preview: Before generating the final GIF, users can preview the sequence in which images appear.
- GIF Speed Adjustment: Users can adjust the speed of the GIF using a slider input.
- GIF Generation: On user request, a GIF is generated from the uploaded images.
- GIF Storage: The generated GIF is stored in a Prisma/Planetscale database.
- GIF Library: Users can view all saved GIFs in a grid format, with the option to delete any GIF.
Technical Components:
gif-maker.tsx:
State Variables:
- urls: Stores the URLs of uploaded images.
- generatedGif: Stores the URL of the generated GIF.
- error: Stores any error message.
- currentIndex: Tracks the current image index for GIF preview.
- gifSpeed: Stores the speed of the GIF.
- handleError: Handles and displays error messages.
- isValidUrl: Checks if a string is a valid URL.
- handleSpeedChange: Updates the GIF speed based on slider input.
- handleFinish: Appends newly uploaded URLs to the urls state variable.
- clearData: Clears stored image URLs and generated GIF.
- generateGif: Initiates the GIF generation process.
gif.ts:
Dependencies:
- sharp-gif: Used for image processing.
- node-fetch: Used for making fetch requests.
- sharp: Used for image resizing.
- PrismaClient: Used for database interactions.
- handler: API route to handle GIF generation.
library.tsx:
State Variables:
- gifs: Stores an array of saved GIFs from the database.
- fetchGifs: Fetches all GIFs from the API and sets the state.
- handleDelete: Deletes a GIF from the database and updates the local state.
Database Schema (Prisma):
Datasource Configuration:
Provider: MySQL
Connection URL: Sourced from environment variable DATABASE_URL.
Relation Mode: Prisma
Model: Gif
id: An auto-incremented primary key.
url: A nullable string that stores the URL of the GIF. It has a unique constraint, ensuring no two GIFs have the same URL.
gifData: A nullable field of type Bytes. It maps to a BLOB in MySQL, suitable for storing binary data, such as the content of GIF images.
createdAt: A timestamp indicating when the GIF record was created. It defaults to the current time.
User Flow:
- User navigates to the gif-maker.tsx page.
- User uploads multiple images via a standard file upload process. The system allows these images to be previewed sequentially to ensure they are in the desired order.
- User adjusts the GIF speed using a slider, allowing them to visually control the animation speed.
- Upon clicking ‘ Generate GIF ‘, the user triggers an API call that sends the images to the server.
- The gif.ts handler processes the images, generates a GIF, and saves it in the database. This happens in the background, and the user is notified upon completion.
- The generated GIF‘s URL is displayed to the user, providing a direct link to view or download the GIF.
- User can navigate to the library.tsx page to view all saved GIFs in a visually appealing grid format. They also have the option to delete any unwanted or outdated GIFs.
Future Recommendations:
- User Authentication: Implement user authentication to allow users to have their own private library of GIFs.
- Search and Filter: In the library, provide search and filter functionalities for better management of GIFs.
- Optimize for Mobile: Ensure the application is fully responsive and optimized for mobile devices.
- Enhanced Error Handling: Implement more robust error handling and user feedback mechanisms.
- GIF Editing: Allow users to edit existing GIFs, such adding captions, adding effects, or resizing images. Also, the application only accepts images larger than 1 MB in size, this can be enhanced to allow for much larger images.
Tech Stack
- Next.js
- TypeScript
- Sharp-gif
- Node.js
- Planetscale (Prisma Database)
- Vercel