dawad725 / meme-app Goto Github PK

You have a lot of creative liberty here. Basically we want to create a mobile responsive grid of images that the user can select from in order to create their meme. Feel free to make use of the CSS framework's components to facilitate.

Acceptance criteria

• Load 5 predefined meme images when the page loads
• Allow the user to 'select' one when they click on it, showing that it is selected by making it larger, or moving it to the center of the screen.
• Keep data about the selected image in state so that it can be used later for network calls etc. This can be the image name, image path, or both

Make use of the style framework's components to add a text input component that will serve to input the text at the top of the meme.

Acceptance criteria

• Display an component that stores the user's input in state so that it can be sent to the server
• Do some validation on the input length, limiting it to 90 characters
• Display the text on top of the user's selected image as they type. Depends on the image being selected; see dependency below.

Dependencies

• issue-#5

This is a simple chore item. Find at least 5 common meme images and put them in the server's static assets folder so that they can be served to the frontend.

Add a readme file that describes the project and how to clone it, install dependencies and run it. It would be nice to have a contributing guide as well if this moves forward as an open-source project.

Acceptance criteria

• Add a readme.md file
• Have a section that describes how to get the project set up for development, aka clone install + run
• A section that describes what the project's MVP is (What the minimum functionality your're shooting for is)

This will be one of the main API endpoints for the app. We want to have a POST route that accepts the user's choices and then calls the meme generation service described by issue-#4

Acceptance criteria

• Create a POST route at /api/generate-meme
• The POST body should look like

    {
      image: string,
      topText: string,
      bottomText: string
    }

• A route controller which should validate the post body data is accurate (proper object keys, not empty, etc.)
• After successful validation, the controller should call the meme generation service, and return the response to the frontend.
• Upon an error, it should return an appropriate message to the frontend.

Find an appropriate npm package that can be used to generate an image with text on top and text on the bottom.

Acceptance criteria

• Create a service on the backend (function or suite of functions), that takes an image (path to image or binary data - blob), top text, and bottom text, and generates a URL to the new image.
• Implementation details are up to you as far as where the image is stored, access rights, etc. This can be discussed in a future item.

Make use of the style framework's components to add a text input component that will serve to input the text at the bottom of the meme.

Acceptance criteria

• Display an component that stores the user's input in state so that it can be sent to the server
• Do some validation on the input length, limiting it to 90 characters
• Display the text on bottom of the user's selected image as they type. Depends on the image being selected; see dependency below.

Dependencies

• issue-#5