TOOLS

• https://github.com/tannerlinsley/react-query
• https://github.com/ben-rogerson/twin.macro - https://mxstbr.com/thoughts/tailwind/
• https://github.com/pmndrs/valtio
• https://twitter.com/devongovett/status/1336739501323001857?s=20 (ReactDOMServer)
• https://twitter.com/leeerob/status/1335246336719990787?s=20 (only use secrets on server side)
• https://vercel.com/docs/solutions/databases caching
• https://twitter.com/SimonHoiberg/status/1333384252520615938?s=20 (nullish check)

Canvas clearing button does not really clear the canvas.
As you enter your mouse after clearing, the old state of the canvas is loaded again

The menu button is not properly implemented.

• always write template into meme collection, if template is not yet existing, create one. not doing, but should be implemented
• _id, fullUrl, firestorePath (optional), createdBy, createdAt, fileFormat (png, gif, video), source (userUpload/external)
• adapt template filter on to use template collection
• adapt template charts

• isDraft as boolean

TODO

• add option to generate meme in backend (get the complete json)❗
• add option to start project within a docker image ❗
• create documentation regarding setup of firebase and mongodb ❗
• fill out the excel sheet with points and add additional points ❗
• add custom screenshot api to backend with puppeteer

DONE

• add fabric js to backend
• comment (add custom resolver, add comment selection, add comment count)
• fix all api routes
• user bound kommentar funktion bei memes
• insert user data on registration
• add point count (aka difference between up and down votes, see getTotalPoints)
• meme view count hochzählen (cheating verhindern)
• das system bzgl. public/unlisted/private memes umsetzen (feld wird bereits bei creation gesetzt) #100
• bei den votes die anzahl von votes anzeigen #78 #80
• evtl. onSnapshot usw bei useVoting wegnehmen, da die Memes sowieso mit einem onSnapshot angezeigt werden, und somit useVoting nur mit writes umsetzen ohne reads, würde somit db usage um N verringern #78 #80

Everyone should be able to view generated memes. There can also be many additional features like up/down votes, comments, etc.

A structured API should give access to some of the sites’ functionality without requiring a graphical interface. The API should provide image creation and image retrieval.

#14, #15 see for more information 🔺

Errors when using random meme

A structured API should give access to some of the sites’ functionality without requiring a graphical interface. The API should provide image creation and image retrieval.

#14, #15 see for more information 🔺

The user shall see all options for starting a meme with a selection of already available images or options to provide a source for an own image.

TEMPLATES

{
    "title": "This is fine meme",
    "createdAt": "1609268374",
    "createdBy": "USER_ID_X",
    "upVotes": ["USER_ID_1",  "USER_ID_2"],
    "downVotes": [],
    "type": "STORAGE | EXTERNAL",
    "img": "STORAGE_PATH_TO_IMG",
    "url": "DOWNLOAD_URL_FROM_STORAGE | URL_TO_EXTERNAL_IMG",
    "width": 1024,
    "height": 768
}

• "img": "STORAGE_PATH_TO_IMG" is only necessary for type STORAGE 💡

FUTURE ADDITIONS

+   "usageCount": 2, (number of memes using this template)

MEMES

meme: PropTypes.shape({
    title: PropTypes.string.isRequired,
    createdAt: PropTypes.any.isRequired,
    createdBy: PropTypes.string.isRequired,
    upVotes: PropTypes.arrayOf(PropTypes.string).isRequired,
    downVotes: PropTypes.arrayOf(PropTypes.string).isRequired,
    forkedBy: PropTypes.arrayOf(PropTypes.string),
    forkedFrom: PropTypes.any,
    views: PropTypes.number.isRequired,
    template: PropTypes.shape({
      id: PropTypes.any,
      url: PropTypes.string,
    }).isRequired,
    url: PropTypes.string, // if a real png was created (requirement)
    svg: PropTypes.string.isRequired,
    json: PropTypes.shape({
      background: PropTypes.string,
      height: PropTypes.number,
      width: PropTypes.number,
      preserveObjectStacking: PropTypes.bool,
      version: PropTypes.string,
      objects: PropTypes.arrayOf(PropTypes.any),
    }).isRequired,
  }),

PROBLEM

• GET - http://localhost:3000/api/meme/10 is working locally, but not online https://omm.vercel.app/api/meme/10
• default is set to same-origin, which most probably is causing this
• since our application (and local env) is same-origin it is working fine (e.g. https://omm.vercel.app/meme/10)

TASK

• disable CORS for API requests (corsOptions = { origin: false }) which need to be public

NOTES

• API Routes do not specify CORS headers, meaning they are same-origin only by default. You can customize such behavior by wrapping the request handler with the cors middleware. https://nextjs.org/docs/api-routes/introduction

• https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors
• https://www.npmjs.com/package/cors
• related: #14

Refactor API to fit the final datamodel (blocked until this is defined).

Also add route where a .zip can be provided for creating multiple memes.

had to remove the screenshot api key from vercel, due to 4kb secret max.

call back was passed to OverviewSort and initialised as prop with null

It is needed to provide a proper meme navigation

Here, all options to edit the chosen template should be present. Adding text, generating the final image, adding other images, etc.

The user shall see all options for starting a meme with a selection of already available images or options to provide a source for an own image.

• Search
• Template Filter with Dropdown and Images
• Download

Here, all options to edit the chosen template should be present. Adding text, generating the final image, adding other images, etc.

Here, all options to edit the chosen template should be present. Adding text, generating the final image, adding other images, etc.

Feed-Frontpage with recent memes of other users.

Meme-Generator as a feature of the Page.
Possibilities to create memes from within other users generated memes as well as through the meme-generator.

e.g. visibility: 'PUBLIC'

To ensure error-handling while fetching an external Api, we have to encapsulate the async fetch call with "try" and "catch"

Comments are reaching out of the scrollable viewport on the bottom of the page

#37

Improving our route system with next.js router, instead of iterating wizard like with steps through our Pages.

• Please be aware of copyright or legal issues (for publicly reachable webpages), especially if anyone can upload images. Further, data privacy and GDPR compliance should be considered (it is not required, but you should mention it) as the use of web services is easier and scalable but one does give up control over the websites data to various degrees.

• For all used technologies, it still holds (as described in the project description), that you have to specify the license and function of the integrated library/function. E.g. if you use the user management in firebase you need to explain in the code/comments what happens internally (how/where (e.g. country) does firebase store data (data privacy!), what are my options to create/retrieve users, etc.). This does not need to be a two page in-depth analysis, but you should understand what you are using and inform yourself about it.

• For the hand-in we require a “reproducible” and a “live” version. In case of a local server, container or similar both are fulfilled by the submission being executable. In case we cannot just locally execute your server and access the webpage, please provide a link to a live version to try the website out. This can also be a local webpage with an online server as backend.
  provide .env.local with credentials

• Please provide a readme file and sufficient instructions to run the webpage/server and or recreate all no local parts. This also means, that all necessary code has to be submitted. If code is normally not in a file structure (e.g. web interface of a web service) you have to submit the code as text files. The readme could look like: “Register for MongoDB Atlas, create a database name “XX”, import file “dump.json”, adjust login credentials in file “dblogin.js”. Run this in node.js, open http://localhost:3000/” Or “register to firebase, create new app, create server less task with condition X and copy code from file XY.txt

• All information for us to be are able to “copy” everything to a new server/account without previous knowledge has to be included.

• If not all your features are reachable from the index page, please also include either an overview page or list features in the readme (e.g. open http://localhost:3000/ for webpage and use http://localhost:3000/api for the API requests). However, an overview page (as part of your website) with an example API call and links to the individual pages is preferred for faster evaluation.

TODO

• refactor code
• comment code
• test run project
• add option to start project within a docker image ❗
• create documentation regarding setup of firebase and mongodb ❗
• fill out the excel sheet with points and add additional points ❗

FINAL SUBMISSION

• soruce code
• readme (step by step how to set up)
• env files
• add online service document (google)
• link to hosted live version
• docker container hochladen und link mitgeben
• feature list (excel sheet)
• add to readme easy instructions
• add liscense of all depdencies list
• postman collection im readme referenzieren (für API)
• sitemap of all pages and routes (take output of next build)

When typing anything in the search field and afterwards erasing the query, the whole collection gets queried.
Maybe the custom resolver can handle this issue by sending an empty array when the query string ist empty

• Upload Templates not selectable and viewed in canvas (CORS policy)
• Add image in edit mode (CORS policy)
• Unlisted meme not viewable cause of error (https://omm.vercel.app/meme/603beea86ef2570c99f4ca9f)

Access to image at 'https://firebasestorage.googleapis.com/v0/b/online-multimedia.appspot.com/o/templates%2F603becd86c567db9e655596a?alt=media&token=35387e02-232f-40c9-b486-b7ccfa2975b3' from origin 'https://omm-git-feature-generate-serverside-ndrsllwngr.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here, all options to edit the chosen template should be present. Adding text, generating the final image, adding other images, etc.

##Firebase Auth
https://itnext.io/how-to-use-firebase-auth-with-a-custom-node-backend-99a106376c8a

BACKLOG

• mitigate duplicate templates (from e.g. imgflip api)
• loading skeleton https://material-ui.com/components/skeleton/
• allow user to choose canvas color (default, transparent)
• meme/id wont load if only 1 meme collection size equals 1
• add option to set txt background
• add proper shadows to text
• title input mandatory for templates
• include gifs as possible templates (static caption) not doing

TODO

• add option to navigate through pages on overview page (e.g. endless scroll or pagination)
• add option to generate memes server-side (just send all data to route, insert into db on backend)
• download meme
  • add option to choose generated file size of download (before generation), sync with @griase94
  • add option to generate png output
  • add download buttons (client/server)
  • use route of andy with api to download meme (with query param)
• add forkedBy entry to meme when it forks a meme
• include videos as possible templates (static caption)
• write automated tests
• refactor code
• comment code
• check readme
• check docker image
• fill out task list (excel sheet) and add additional points
• upload latest git repo/excel sheet, readme, instructions, docker image (link to zip file)

DONE

• add captions to root key/val of meme & and add them to text to speech
• enable filter by template on /meme/id page
• add charts to meme page (as modal) similar to template details
• move template input modals to meme generator
• add text to speech to meme/id page
• add speech to text to meme generator (input caption / title)
• fix charts of template details
• add charts to templates (as modal)
• evaluate template value in meme collection, and necessary template content in template collection
• inject title, too when copying meme and opening a draft
• add option to change visibility level to public/unlisted
• remove draft collection
• allow for dictating captions
• after creating a template and navigating to meme/create a hard reload is triggered
• Fix autoplay
• Implement UI for comments
• fix template webcam bug, if permission is missing (video.srcObject)
• Load fonts via font-loader to support e.g. mobile 💔 use default google font imports instead
• add option resize canvas
• reset filter on meme generate :)
• add share buttons
• Update proptypes (meme)
• Fix bug to using a meme of imgflip api in meme generator I am unable to reproduce this issue. 💔
• title in load meme state
• fix loading state in /index
• update env vars on vercel

• react
• next.js (incl cloud functions /api folder)
• tailwindcss
• firebase storage
• mongodb incl. realm (graphql)
• storybook
• fabric.js

• https://parseplatform.org/

  Parse is a Backend-as-a-Service (BaaS) framework, acquired by Facebook in 2013 and then open-sourced in 2016. Since then, Parse has grown to become the most well-known of its kind, with a huge community and an impressive number of users to back it up.
  In comparison to Firebase, Parse stands its ground really well. It might not have Firebase's fancy machine learning or analytic capabilities but aside from that, it's very much a complete package. User authentication (including Single Sign-On with multiple providers), realtime database, file storage, hosting, push notifications and even cloud functions are present. Plus, you've got tons of both official and 3rd-party plugins, adapters, and integrations that push the framework even further.
  The only field where Parse falls behind might be the ease-of-use. However, like with most self-hosted platform, it's somewhat expected. With that said, all the client-side SDKs and libraries (there's a ton of those covering a vast range of different platforms) do rival Firebase in terms of simplicity and ease-of-use. And even on the server-side, there's a dedicated Parse Dashboard that you can use to manage your Parse Server from the comfort of its graphical UI.
  So, after you get Parse Server up and running - trust me - it'll only get easier from there.

• https://appwrite.io/

  Although it's the youngest of the bunch, Appwrite seems like the most direct open-source alternative to Firebase. From the Docker-only setup, through database, file storage, and user authentication functionalities, to full-blown, Firebase-like dashboard, Appwrite provides you with that lovely all-in-one experience.
  However, because Appwrite is a fairly young project, there are still a few things missing. There's no realtime functionalities (at least built-in) or anything like cloud functions or website hosting. However, everything that is present is very much polished with friendly API to go along with it.
  The client-side SDK is currently limited only to JavaScript, although there's beta support for Flutter - meaning iOS, Android, and potential all the other platforms that Flutter does or will support in the future.
  Overall, Appwrite really seems like a well-rounded, easy to use solution. And as it approaches v1, we can expect it'll only get better!

UX/UI

• Loadingstate/icon (Like nian cat flying throw viewport)

Meme Generator:

• Predefined Image filter on Meme creation (Like Instagram)
• Keyboard interaction while meme creation -> means goback and clear with backspace and enter and copy-paste font-box
• When choosing colour while meme creation no coloured overlay behind the focused text
• Text background.

Everyone should be able to view generated memes. There can also be many additional features like up/down votes, comments, etc.