matthewbozin/caesura

Caesura - Poetry Remixer

Create your own art by remixing classic poems!

Link to project: https://caesura-poem-remixer.herokuapp.com/

How It's Made:

Tech used: React, NodeJS, Typescript, Express, MongoDB, Passport, Material UI

The frontend client is built in React with Material UI, and the backend is built with Node.js, Express, and MongoDB.

The frontend pulls poem data from an internal database, and then provides it to the user in batches of three. The user selects one of the three choices for each batch, and that adds the selected line to their remixed poem. When the poem is done, the app gives the user choices between 5 randomized words taken from the titles of all the selected poems. Once the user has created their remixed poem, they click the "Create" button, and the frontend sends that data to the server, which processes the request and adds the poem data to the MongoDB database.

Users can then access a feed of all created poems, or a profile list of all the poems they have created. From the profile list, they can delete poems they have created.

Uses the Passport Local Auth strategy to manage user sessions. Users can login and signup through the login/signup pages, and the server authenticates them using the Local Auth strategy and stores their sessions in the database.

Optimizations

I'm looking forward to expanding and optimizing this as time allows! Upcoming features: -(DONE)Users can comment on poems with randomized mini-poems -(DONE)Created internal poem database -(DONE)Users can like poems -CSS overhaul and adding animations -Users can remix other users' poems

Lessons Learned:

After the database I was pulling poem data from went down, I decided to build my own, so that I could control, and therefore schedule, the app's maintenance downtime. This would also allow me to better manage the poems' content, because giving users the ability to mix and match words can lead to NSFW outcomes.

caesura's Issues

Remove blank title choices when out of titles

Rework component CSS

-Move 'by {name]' below poem
-Reduce amount of space below Poem.js/Comment.js components
-Reduce amount of empty space in Choice.js component
-Prettify Choice.js component

Fix view height scrolling issue

Make sure that view height of full app is always 100% vh, so that there's no unnecessary scrolling

Add snaps

Users can 'snap' a poem, much like 'likes' in other social media

-Add 'snaps' array to Poem model
-When someone 'snaps' a poem, it adds their username to the array and they cannot snap it again
-Poems show 'snap' count, which is length of username array
-If user snapped a poem, they can unsnap it, which removes their username from the array
-Feed page can sort and order poems by number of snaps

Remove Profile.js page, create filter functionality in Feed.js page

Add filters for:
-most snaps
-most comments
-poems by user

Remove Profile.js page, to be reimplemented later as a nice-to-have user stats page

Animations with Framer Motion

Test Framer Motion animations in CreatePoem.js/CreateComment.js

-Animate choices when they appear
-Animate onhover over choices
-Animate choice selection

-Animate title words on hover/choice/appear

Clean up Create.js

Add commenting with mini-poems

Users can 'comment' on other users' poems by creating a mini-poem

-Add comments array to Poems model
-Build version of creation process with limited lines and no title
-At end of this process, pushes the comment to the Poem id in question
-Comments can have snaps

Add MUI footer

After creating poem, render ViewPoem.js

Create internal poem database

-Create BasePoem Mongoose model
-Harvest poems and import them to mongoose
-Instead of making API call to database, frontend samples mongoDB poems collection and returns a set of unique poems

Use Context.js to remove prop drilling