Project 1, Final Milestone: Maintainable Meme Generator

Separate states for every piece of data can quickly become a maintenance burden in a single page application. In this milestone, you will replace the multiple single-value states in your meme generator with objects in state. You will also render a list of components for the meme text.

info

The course material needed to complete this part was covered in classes 11 and 12.

Project Overview

For your first project you will design and implement an interactive meme generator single-page application using only React using only the methods taught in this course.

You may create any type of meme generator you like so long as it meets the assignment's requirements.

Simple is better for this assignment. I recommend a meme generator with a choice of 3 backgrounds, with 3 lines of text, and the choice to change text styling for each line (e.g. font, color, outline, etc.)

Learning Objectives

• Use objects to store related data in state.
• Employ an updater function when using a state's setter function.
• Copy an object using the JavaScript spread operator.
• Render components for an array of objects using the array map method.
• Use the key prop to identify elements rendered from an array.
• Evaluate your work against a set of requirements.
• Use the React Developer Tools to debug your React applications.

Help & Support Resources

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace

1. Create your assignment repository.

   Visit https://landrace.infosci.cornell.edu/courses/info2310-2026sp/repos/project1 in your browser to create your assignment repository.

2. Open your assignment repository in GitHub.

   After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info2310-2026sp/repos/project1 in your browser and follow the link to open the repository on github.com

3. Open your assignment repository as a codespace.

Submission Requirements

Your assignment should meet the following requirements for credit:

• Submit your own original work (design and code) for this assignment.

  No credit is provided for submitting design and/or code that is taken from the course-provided examples.

• Your code should be original. However, the structure of the code will mirror the class examples.

  The structure of your code will align with the class examples. This is to be expected. We are learning web programming and there's only so many ways to structure code to solve its problems.

• You are required to use the methods and techniques covered in class.

  No credit is provided for using methods that are not covered in this class.

• Your single-page application should be visible in the browser and functional upon launching the development web server Start Debugging from the Run menu.

  If your single-page application does not launch using this method or is not visible in the browser after launching the server, we are unable to provide any credit.

• All files should be in the location specified in this document for credit.

  Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

• Follow the submission instructions below.

  Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission.

  Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Part I: Text & Appearance Object in State

Store each line of text and its appearance as an object in a single state (for each line).

Requirements & Credit

Credit: ~30 points (Project 1)

This part is graded for correctness. Implement a meme generator web application that meets the following requirements for full credit:

Objects in State:

• Create 2 separate states in App to store the text and its appearance for each line of text.
  • Store each line of text and its appearance as an object in each state.
  • Remove all single values states for the text and its appearance.
  • When setting the text and appearance state, use an updater function.
  • Preserve the existing properties of the state when setting the text and appearance state using the JavaScript spread operator.
• For each line of text, pass the text and its appearance as a single object to the MemePreview, MemeText, and MemeTextEditor components as a single prop.
  • You will need exactly 2 separate "line of text" props for the MemePreview component: one for each line of text.
  • You will need 2 separate props for the MemeTextEditor component: one for a line of text and its appearance, and one for a handler to send the updated text and its appearance back to the parent component using only objects.
• For each line of text, directly pass the state's setter function as a handler to a handler prop in MemeTextEditor.
  • Call the handler prop directly in MemeTextEditor when the text or appearance input elements are changed.
  • Use the state's updater function when updating the state.
• The prop handler for MemeTextEditor should send an object of the text and its appearance back to the parent component using only the state's setter function.
  • When updating the object's text or appearance properties, only update the property that changed in the object; do not replace or overwrite the entire object.
  • Use the spread operator to preserve the existing properties of the object when updating the state from the updater function.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone.

If any functionality exists not covered in class up to this point, 0 credit is provided for this part.

Instructions

1. Create a single state for the text and its appearance for the first line of text only.

   Create an object to store the first line of text and its appearance.

   Delete the existing single value states for the first line of text and its appearance. This will break your MemePreview, MemeText, and MemeTextEditor components. That's okay, you'll fix that soon.

2. Update your MemePreview, MemeText, and MemeTextEditor components to accept the first line of text and its appearance as a single prop.

   Send the text and its appearance as an object via a single prop to all the MemePreview, MemeText, and MemeTextEditor components.

   Update each component to use the object prop to render the preview and display the value of the text (and its appearance) in the editor.

   Remove the existing single value props for the line of text and its appearance from all components. (You should only have a single prop that accepts an object for the line of text and its appearance.) (This will break line 2. Comment them out for now, so you can test your code without errors.)

3. Update the MemeTextEditor component to accept a single handler prop to send an object of the text and its appearance back to the parent component.

   Update the MemeTextEditor component to use the handler prop to send an object of the text and its appearance back to the parent component.

   When updating the object's text or appearance properties, only update the property that changed in the object; do not replace or overwrite the entire object.

   Remove the existing single value handler props for the line of text and its appearance from the MemeTextEditor component. (You should only have a single handler prop that sends an object for the text and its appearance.)

4. Create a single state for the text and its appearance for the second line of text.

   Repeat the above steps for the second line of text.

   When you're finished there should be no single value props for the MemePreview, MemeText, and MemeTextEditor components, except the meme background. The MemePreview component should have 2 props for the lines of text: one for the first and one for the second and one prop for the meme background. The MemeTextEditor should have two props: one for a line of text and its appearance, and one for a handler to send the updated text and its appearance back to the parent component using only objects.

5. Thoroughly check that your work adheres to the requirements and that the meme text and its appearance can be changed for both lines.

Submission

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Do not complete the submission form.

Part II: Line of Text Array

Send each state for the lines of text as an array to the meme preview and render the array as MemeText components. Add a third line of text verify that the preview can handle any number of lines of text.

Requirements & Credit

Credit: ~30 points (Project 1)

This part is graded for correctness. Implement a meme generator web application that meets the following requirements for full credit:

Array of Text States:

• Update the MemePreview component to accept an array of text objects.

  • MemePreview should have 2 total props: 1 for the background, and 1 for all lines of text.
  • Remove the existing props for line 1 and line 2.

• Pass an array of lines of text states to the MemePreview component.

  • No credit is provided for combining the lines of text into a single state. You must have a separate state for each line of text.

• In MemePreview, render the array of text objects as MemeText components using the array map method.

• Uniquely identify each rendered MemeText component using the key prop.

Third Text State:

• In the App component, create a third state for the text and its appearance for a third line of text.
• Add a third MemeTextEditor component to the editor to edit the text and its appearance for the third line of text.
• Add the third line of text state to the array of lines of text sent to the MemePreview component.
• Update your sample/default meme to use the third line of text.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone.

Hard-coded line 1, line 2, or line 3 data in MemeTextPreview will result in no credit for this part.

If any functionality exists not covered in class up to this point, 0 credit is provided for this part.

Instructions

1. Update the MemePreview component to accept an array of lines of text objects.

2. In App, send an array with each text state to the MemePreview component.

   No credit is provided for this part if a single "array of objects" state is created for the text. There should be 3 separate states for the text. Each should store an object (not array).

3. In MemePreview, render the array of lines of text as MemeText components using the array map method.

4. Add a new state for a third line of text.

   All states in your web application should now be objects, except the meme background.

5. Thoroughly check that your work adheres to the requirements and that the meme text and its appearance can be changed for all three lines.

Submission

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Do not complete the submission form.

Final Milestone: Part III: Review your Work and Test Your Submission

You wouldn't deliver a final web application to an important client without testing everything thoroughly and double, triple checking that you have met their requirements. You should do the same for this assignment.

1. Re-read this milestone's requirements.

   Check your project against the requirements. If you don't understand a requirement, ask the instructor for clarification.

   It is a learning objective of this course that you be able to evaluate your own work. Please be advised that the instructor and TAs cannot endorse your answer. We can help you understand the requirements, but we cannot tell you if your project is correct or whether you will have points deducted.

2. Test every part of your app's functionality.

   Your code must be functional for credit. If the code doesn't run, we are unable to provide credit. This includes partial credit.

3. Verify that all files are in the locations specified in the requirements.

   No credit is provided for files in incorrect locations.

4. Check that you have used the methods presented in this class.

   No credit is provided for any methods used that are not covered in class. The requirements specify the methods you should be using.

Submission

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for p1fin to submit the assignment.

Note: The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Contributors

Copyright © 2024 - 2026:

• Kyle Harms