This NextJS application is a learning experience for me and a terrible financial decision, lol. This document will walk you through the project, features, and setup instructions.
- Upload and process GIF files to reverse their playback.
- Use FFmpeg WASM to preform video processing locally in the browser.
- Easy to use UI
- Preview your reversed GIF in realtime
Before you embark on the ReverseGIF.com Next.js web app adventure, let's make sure you have the following prerequisites covered:
- Node.js (version 12 or higher) 📦
- Yarn or NPM 📥
To set up the ReverseGIF.com Next.js web app on your local machine, follow these GIFtastic steps:
- Clone the repository:
git clone git@github.com:abevalle/reversegif.com.git- Navigate to the project directory:
cd reversegif.com- Install the project dependencies:
yarn install- Build the project:
yarn build- Start the development server:
yarn devOpen your web browser and visit http://localhost:3000 to embark on your reversegIF journey! 🚀🌐
The application now includes a blog feature powered by Strapi CMS. Blog posts are fetched from the Strapi API and displayed in a dedicated blog section.
- Blog index page with paginated posts
- Individual blog post pages with rich content
- SEO optimizations for blog content
- Related posts suggestions
/blog- Blog index page/blog/[slug]- Individual blog post page
# Install dependencies
npm install
# Run the development server
npm run dev# Optimize and build for production
npm run build:prod
# Start the production server
npm run startCreate a .env.production file with the following variables:
NEXT_PUBLIC_STRAPI_API_URL=your-strapi-api-url
NEXT_PUBLIC_STRAPI_API_TOKEN=your-strapi-api-token
npm run dev- Start development servernpm run optimize- Run pre-build optimizationsnpm run build- Build the applicationnpm run build:prod- Run optimizations and build for productionnpm run start- Start production servernpm run analyze- Analyze the bundle size (requires @next/bundle-analyzer)