georapbox / meme-generator Goto Github PK

View Code? Open in Web Editor NEW

41.0 4.0 14.0 25.92 MB

A Progressive Web App (PWA) for creating memes.

Home Page: https://georapbox.github.io/meme-generator/

License: MIT License

JavaScript 53.62% CSS 12.20% HTML 34.17%

meme-generator meme-maker memes generator

meme-generator's Introduction

Meme Generator

A Progressive Web App (PWA) for creating memes.

The application is built with web technologies such as HTML, CSS, and JavaScript. It uses the Canvas API to draw the meme text on the image. Processing the image and text is done client-side, so no data is sent to any server.

Features

Create a meme with by:

Selecting an image from your device
Selecting an image from the web (by URL)
Selecting an image from the gallery
Taking a photo with your device's web camera
Using a solid color as background

Screenshots

Development

Below are the instructions for setting up the development environment.

Prerequisites

Node.js (v20.x.x)
npm (v10.x.x)

Installation

Clone the repository to your local machine:

git clone [email protected]:georapbox/meme-generator.git

Navigate to the project's directory and install the dependencies:

npm install

Running the application

To run the application in development mode, run the following command:

npm start -- --open

This will start the development server and open the application in your default web browser.

Building the application for production

To build the application for production, run the following command:

npm run build

This will create a dist directory containing the production build of the application.

Deployment

To deploy the application, run the following command:

npm run deploy

This will build the application first and then deploy it to GitHub Pages in the gh-pages branch.

License

The MIT License (MIT)

meme-generator's People

Contributors

Stargazers

Watchers

Forkers

sreenivas321 ira-shamalpadole ilek2428 basdog22 twinkalsoni vikingdadmedic jeffermarcelino codehunterdev michaelpaulukonis b1nb4s5h baaer treapster 550obac

meme-generator's Issues

how to give store image in database directly when page is lunch

Hi , in my case I have predefined image store in database , and user click on the image , I have the path of the image , how i load image in canvas . Thanks

I make an new JavaScript function but how this work ?

function loadimagefrompath(image_path){

  --- what code I right here to load the image from path

}

Remove text boxes

Provide the ability to remove added text boxes.

By removing a text box:

The text box (text input & settings) is removed from UI.
Canvas is re-drawn with this specific text being removed.

Optimise gallery images

Optimise (reduce size) gallery images
Make "Upload from gallery" method the default one.

Add Progressive Web App (PWA) support

Add a Service Worker to cache resources and provide offline mode.
Update app icons used in web manifest file.

Investigate better approach for handling side effects

When updating the text boxes data, we need to perform side effects, such as re-draw canvas or update other parts of the UI, resulting in repeating the same actions in many places. I should investigate for a more centralised way to perform such side effects.

Allow for dragging text elements

First off: Fantastic PWA! I can see myself using it quite frequently.

Would it be possible to add a drag feature for text elements? It's quite cumbersome to shift text via the input controls/fields.

Additionally, some templates have pre-defined areas for text (like the drake meme) that could be used as an insertion point.

Duplicate text box and settings

User story

As a user, I want the ability to duplicate a text box along with its settings.

Description

Users often spend time configuring text boxes to their preferences. Providing a feature to duplicate text boxes, including their settings, can enhance user efficiency.

Acceptance Criteria

Call-to-Action (CTA) Display: Each text box should have a visible option for duplication.
Duplication Functionality: Clicking on the CTA should duplicate the text box along with all its settings.
Placement of Duplicated Text Box: The newly created text box should be appended at the end of the existing list of text boxes.

Build automation

Right now, publishing to GitHub pages is done manually, building the project locally and pushing the docs folder to master branch.

Investigate if possible to automate this process, maybe using GitHub workflows.