MEME MACHINE

• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Hierarchy
    • Component Breakdown
    • Time Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Overview

MEME MACHINE is an app for creating, storing and editing meme collections.

MVP

The MEME MACHINE MVP will allow users to create and delete a personal repository in which they will be able to curate a collection of memes. The users will be able to combine text with images to display a finished meme. Additionally the user will be able to add image URLs and text to the data base. The UX will be intuitive and the meme display will be the focus.

Goals

• User authentication will include registeration and login
• Track user throught app, allowing access to only their FINISHED memes
• Allow image url and text resource to be available to all users
• Store image urls and text data in separate but linked tables
• Display images with options to select text to be overlayed
• Allow user to add image urls
• Allow user to add text fields
• Display finished meme with text properly overlayed

Libraries and Dependencies

Library	Description
React	Primary front librayend development.
React Router	Helper library to facilitate front end navigation.
Axios	Library used to make requests from backend server.
Ruby/Rails	Primary backend framework for structuring, managing and storing data.
Bcrypt	Hashing library/algorithm for concealing passwords.
JWT	Web token tool used to verify user credentials.

Client (Front End)

Wireframes

Desktop/Tablet Landing Screen

Desktop/Tablet Landing with Login

Desktop/Tablet Landing with Register

Desktop/Tablet User

Desktop/Tablet Images with Image Use/Add/Delete

Desktop/Tablet Generator with Text Add/Edit/Delete

Mobile Landing Screen

Mobile User

Mobile Image

Mobile Generator

Component Tree

Created on Diagrams.net -- Meme Machine

Component Hierarchy

Stuff and Things
|__ app/
      |__ controllers
        |__ application
        |__ authentication
        |__ users
        |__ memes
        |__ text
      |__ models
        |__ user.rb
        |__ memes.rb
        |__ text.rb
|__ client/
      |__ public
        |__ (remove React template files)
      |__ src
        |__ components
          |__ Header.jxs
          |__ Footer.jxs
          |__(others TBD during developemnent)
        |__ containers
          |__ main
        |__ layouts
          |__ Layout.jsx
        |__ screens
          |__ Landing.jsx
          |__ Login.jsx
          |__ Register.jsx
          |__ Memes.jsx
          |__ MemesCreate.jsx
          |__ MemesEdit.jsx
          |__ Text.jsx
          |__ TextCreate.jsx
          |__ Images.jsx
          |__ ImagesCreate.jsx
        |__ services
          |__ api-config.js
          |__ auth.js
          |__ memes.js
          |__ text.js
          |__ auth.js
|__ config/
      |__ routes.rb
|__ db/
      |__ migrate
        |__ (various migration files as needed)
      |__ schema.rb
      |__ seeds.rb

Component Breakdown

Component	Type	state	props	Description
Header	functional	n	n	The header will contain the logout, navigation and logo.
Navigation	functional	n	n	The navigation will provide a link to each of the pages.
User Gallery	functional	y	y	The user gallery will render a users memes using cards in flexbox.
Gallery Card	functional	n	y	The cards will render the meme via props and contain edit delete buttons.
Image Box	functional	y	y	The image box will contain a collection of all images as links.
Text Box	functional	y	y	The text box will constian all the text options as a select panel.
Footer	functional	n	n	The footer will show my contact info and copy write.
TBD	functional	y	y	Other components might be necessary as developemnt progresses.

Time Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Create Rails & React Template	H	1 hrs	0 hrs	TBD
Generate Database & Seed	H	2 hrs	0 hrs	TBD
Rails User Login	H	6 hrs	0 hrs	TBD
Rails Memes	H	8 hrs	0 hrs	TBD
Rails Text	H	8 hrs	0 hrs	TBD
React User Login	H	4 hrs	0 hrs	TBD
React Memes	H	6 hrs	0 hrs	TBD
React Text	H	3 hrs	0 hrs	TBD
CSS Basic Styling	M	6 hrs	0 hrs	TBD
Deployment	H	2 hrs	0 hrs	TBD
Testing	M	2 hrs	0 hrs	TBD
TOTAL		54 hrs	0 hrs	TBD

Server (Back End)

ERD Model

Created on Diagrams.net -- Meme Machine

---

Post-MVP

• Allow users to upload imgane files instead of urls.
• Allow users to create text at top of images as well as the current bottom location.
• Allow users to download finished memes as pdf or jpeg files.
• Create a meme playground for users to work collaboratively to create memes.
• Create delete user functionality.

---

Code Showcase

TBD

Code Issues & Resolutions

TBD