meme-app's People
meme-app's Issues
Create UI components which allow a user to select an image from a list of images which are loaded from the server.
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
Create input text field which takes user input for the meme's top text
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
Create a get request that sends the meme to a different frontend page that allows a user to now download it.
Find 5 meme pictures for users to add their comments too.
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
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)
Find some kind of component in material UI to display the meme images for the user to pick from.
Create a backend post route that receives the image clicked by user along with text the user wants to add to the image.
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.
Create backend meme image generation service
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.
Create an input text field which takes user input for the meme's bottom text
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
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.