numbofathma / frontend-junior-code-challenge-2

Probeaufgabe 2 - Meme Generator

Kreiere und teile lustige Memes! Erstelle einen Meme-Generator, um bekannte Meme-Vorlagen mit einem eigenen Text zu versehenen oder erstelle ganz eigene individuelle Memes!

1. Zielsetzung

Das Ziel ist die Implementierung einer Anwendung zur Erstellung von Memes. Die Aufgabe wird in folgendende Teil-Aufgaben/Funktionen gegliedert.

1. Hochladen von Bilddateien als Basis
2. Anfügen / Bearbeiten eines Textes im oberen Bildbereich
3. Anfügen / Bearbeiten eines Textes im unteren Bildbereich
4. Downloadmöglichkeit des Memes (JPG / PNG / GIF)
5. Styling der Texte
   • Schriftgröße
   • Schriftfarbe (Color-Picker)
   • Schriftart (Arial, Comic Sans, Pacifico)

2. Design

Die Darstellung soll strukturiert und ansprechend für Benutzer sein. Farben und Schriften können frei gewählt werden. Das Frontend soll aus nur einer Seite bestehen.

3. Implementierung

Du hast freie Hand bei der Wahl der Technologien. Ob JavaScript, PHP, C#, Java etc. ist komplett dir überlassen. Setze ein was du am Besten beherrschst.

Uns ist folgendes wichtig:

• Warum hast du dich für diese Technologie(n) / Sprache(n) entschieden
• Wie sicher bist du im Umgang mit den ausgewählen Sprache(n) / Technologie(n)
• Warum hast du zum Beispiel ein bestimmtes Framework gewählt

Wir möchten wissen, wo du stehst - welchen Kenntnisstand du hast.

3.1 Einsatz von 3rd Party Libraries

Die Umsetzung kann mit Hilfe von 3rd Party Libraries erfolgen. Alle verwendeten Bibliotheken (welche nicht Teil oder Dependency eines Frontend- oder Backend-Frameworks sind) müssen referenziert werden. Bitte begründe ebenfalls, warum du dich für genau diese eingesetzen Bibliotheken entschieden hast.

3.2 Wartbarkeit

Bei der Umsetzung ist gut strukturierter und dokumentierter Code wichtig. Die Einhaltung von gängigen Best Practises und Coding-Style-Guidelines (abhängig von der jeweils eingesetzen Sprache / Technology) sind gewünscht.

Dein Code soll gut lesbar und verständlich sein - auch für dritte. Auch der Programmablauf soll nachvollziehbar sein.

Behalte im Hinterkopf, dass du und/oder andere auf dieser Code-Basis aufsetzen und das Projekt erweitern müssen.

4. Bereitstellung

Wenn du der Aufgabe fertig bist - oder nur einen Teil in der angegeben Zeit geschafft hast, kannst du uns dein Arbeitsergebnis wie folgt bereitstellen:

1. Stelle uns den Link zu deinem Code-Repository zur Verfügung

   • Falls du noch keines hast, kannst du bei den führenden Anbietern (z.B. GitHub, GitLab, Bitbucket, AzureDevOps, ...) einen Account erstellen und dort dein Projekt bereitstellen.
   • Bitte sorge dafür, dass die Sichtbarkeit des Repositories auf "Public" steht

2. Füge eine Kopie der beiligenden Datei Aufgabenergebnis hinzu und fülle alle Punkte entsprechend aus.

3. Wenn du eine Demo deines Projektes bereitstellen möchtest, bietet GitHub Pages einen einfachen weg.