Skip to content

Meme generator for my 2023 web developer exam using React.js, Typescript, and TailwindCSS.

Notifications You must be signed in to change notification settings

Nekuzaky/Meme-Generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Meme Generator

Crée un meme à partir d'une image aleatoires.

       

GUIDES

Client: React, TypeScript, TailwindCSS

Préview de l'application

View the site from the https://meme.altcore.fr/

Features

Afficher des modèles de meme depuis l'API Imgflip : Utilisez une requête HTTP pour récupérer les modèles de meme depuis l'API Imgflip et affichez-les dans une grille ou une liste. Vous pouvez utiliser une bibliothèque de gestion d'état comme Redux pour stocker les modèles de meme.

Rechercher des modèles : Ajoutez un champ de recherche qui permet aux utilisateurs de rechercher des modèles de meme en fonction de leur nom ou de leur tag.

Ajouter du texte aux images : Utilisez une bibliothèque JavaScript comme Fabric.js pour permettre aux utilisateurs d'ajouter du texte à l'image de meme. Vous pouvez utiliser des contrôles de formulaire pour permettre aux utilisateurs de modifier les attributs de texte tels que la police, la taille et la couleur.

Déplacer le texte sur l'image : Utilisez les fonctionnalités de Fabric.js pour permettre aux utilisateurs de faire glisser le texte sur l'image.

Ajouter plusieurs textes : Permettez aux utilisateurs d'ajouter plusieurs textes en cliquant sur un bouton "Ajouter du texte" ou en utilisant un menu contextuel.

Télécharger le meme finalisé : Utilisez la bibliothèque FileSaver.js pour permettre aux utilisateurs de télécharger le meme finalisé en tant que fichier image.

Créer un meme en téléchargeant des images de bureau ou en insérant une URL d'image : Utilisez l'élément input de type "file" pour permettre aux utilisateurs de télécharger des images de bureau. Pour les images provenant d'URL, utilisez une bibliothèque JavaScript comme Axios pour récupérer l'image à partir de l'URL.

Lancer le projet

Step 1: Cloner ou installer le projet

Step 2: Ouvrir le dossier

cd my-app

Step 3: Installer les packages

npm install

Step 4: Lancer le projet

npm start

Step 5: Exporter le projet

npm run build

API Reference

Imgflip API is used to fetch all the meme templates. It returns an array of 100 meme templates.

Get all meme templates

GET https://api.imgflip.com/get_memes

About

Meme generator for my 2023 web developer exam using React.js, Typescript, and TailwindCSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published