Building a GIF generator platform using Directus and Next.js

[TechMakanaki]

What is your idea?

A webpage/app to generate GIF images according to your specifications and able to upload GIFs. This will be developed using Directus as the backend and Next.js as the frontend framework.

Prerequisites

• Node.js and npm

Set Up Directus

1. Install Directus
   • Run npx create-directus-project my-project
   • Navigate to project directory: cd my-project
   • Start Directus: npx directus start
2. Set Up Directus Project
   • Complete setup at http://localhost:8055/admin
3. Create Collections
   • Create a gifs collection with fields: title, description, url
4. Set Permissions
   • Configure permissions for the gifs collection

Set Up Next.js

1. Initialize Next.js Project
   • Run npx create-next-app gif-generator
   • Navigate to project directory: cd gif-generator
2. Install Dependencies
   • Run npm install axios directus-sdk
3. Create Environment Variables
   • Create .env.local with NEXT_PUBLIC_DIRECTUS_URL=http://localhost:8055
4. Fetch Data from Directus
   • Create lib/directus.js to configure Directus SDK
5. Build Pages and Components
   • Create the page to display GIFs
6. Create an Upload Form
   • Create the pages/upload.js for uploading new GIFs

Customize and Enhance

• Styling: Apply styles using CSS or CSS-in-JS libraries
• Authentication: Implement authentication as needed
• Additional Features: Add features like search, filters, or user-specific content

What are the key takeaways from your post?

Users will learn how to build a GIF generator app and implementation of directus with Next.js.

Country of residence

Nigeria

Terms & Conditions

• You understand that submitting this form does not mean we accept your proposal. We will accept proposals at our discretion.
• You understand that to be paid you will need to generate an invoice with a 30 day payment term and send it to us once the final draft of your work is accepted (we will share how to do this once finished).
• You understand that you will require a bank account in one of the countries listed here (https://help.bill.com/direct/s/article/360007172671).
• You understand that you need to set up a Directus project by either running locally, self-hosting, or using Directus Cloud, but being a guest author does not entitle you to extended trials or free credit.
• You understand that you will grant us an unlimited license to post and promote your work as part of this program. You may repost, but using our copy as the canonical source.
• You are aged 18 or over.

[github-actions]

Thank you for submitting an idea for our guest blog.

We work through new ideas every few weeks as we put together our content schedule. This means you may not get an immediate response as to whether your idea has been accepted, or any follow-up questions we have to clarify your idea.

If your idea is accepted, we will provide a deadline for first draft and how much we can pay you for the post. You will have a few days to confirm whether you are still able and willing to write the post.

If you have any questions in the meantime, feel free to add a comment to this issue.

[BB-Loft]

Thank you for submitting this idea, but unfortunately we are not accepting it as part of our guest author program. Please feel free to submit additional ideas in future.