Blackout Poetry Studio

Blackout Poetry Studio is a web app that enables users to create blackout poetry, a type of found poetry. I created this web application as I am a poet who has recently had writers' block. In thinking about how I could get myself inspired, I remembered I used to love making blackout poetry (the old fashioned way, with a sharpie and an old book) and knew it would get me back in the poetry zone, so I decided to build Blackout Poetry Studio to hopefully inspire other creatives!

Users begin with a pre-existing/base poem and create a new poem by selecting which words they want to keep from the pre-existing text and then blacking out the rest. The result is a new blackout poem.

Table of Contents

• Features
• Development Stage
• Technologies Used
• Optimizations
• Lessons Learned
• Contact

Features

• Random Poem: Generate a random poem for creative inspiration.
• Search Functionality: Search for poems by title.
• Set Custom Text: Add text of your own to base your found poem off of.
• Blackout Poetry Editor: Craft your blackout poetry with an intuitive text editor.
• Save and Share: Save your creations and share them on social media.
• Text Merging: Combine lines or stanzas from different poems to create unique compositions.

Development Stage

• Current functionality includes the ability to:
  • generate a random poem
  • search for a poem by title and get back the first one found (next iteration will give multiple options if there are any for user to choose from)
  • create a blackout poem using custom text
  • select which words you want to be in your poem
  • black out the rest of the words to create the poem
  • reset the poem so no words are blacked out or selected anymore

Technologies Used

• Front-end: HTML5, CSS3, JavaScript
• RESTful API: poetryDB API
• Design: Figma
• Storage: Local Storage
• Version Control: Git

Optimizations

The following are optimizations I will make in future iterations:

1. Save progress in local storage so it doesn't delete user progress if they refresh it.
2. Search functionality to get poem by searching the database by keyword & author. Right now poems are searchable by title only.
3. Add functionality to save and share poem.
4. Add an 'edit' button to edit the selected words after you've blacked it out.
5. Add ability for user to change font-size and font-family of poem
6. Styling: add dark mode & make it so the words that aren't blacked out have more padding so it doesn't look weird in smaller viewport sizes.
7. Animations: Have expandable elements smoothly transition with an animation.

Lessons Learned

Building Blackout Poetry Studio provided me with valuable lessons about integrating web applications with RESTful APIs. I learned the importance of thorough API documentation comprehension--luckily I have experience with having to get through extremely dense documents from my background in neuroscience & psychology research. In using the API, I had to think a lot about error handling and efficient asynchronous programming. Additionally, the project enhanced my front-end development skills using HTML, CSS, and JavaScript. I got to practice using flexbox to create the responsive design & using Figma for the initial design

Contact