Lorem Ipsum Totalis

• 

  title page

• 

  generator

Inspiration

This project was inspired by sites like Pokem Ipsum and Bacon Ipsum that generate interesting placeholder text which can be used instead of regular boring lorem ipsum. I wanted to create a generator that can generate themed placeholder text for any situation.

What it does

Lorem Ispsum Totalis is a placeholder text generator that takes a single seed word or phrase and generates lorem ipsum style placeholder text based on the given seed. The user can enter a seed word, if they would like words, sentences, or paragraphs, and how many. Then clicking generate shows the user the themed placeholder text.

How we built it

The StepZen backend was done by leveraging the Datamuse API which has several rest endpoints for generating words from other words. The main endpoints used in this project are synonyms (words that mean the same), means like (words with similar meanings), describes (words that describe the word) and triggers (words that are statistically associated with the word). These rest endpoints were then made available through a single graphql endpoint via StepZen.

The frontend was built using vue 3, vite, typescript and tailwind css and the api is consumed using vue apollo. It does all queries at once by using graphql and uses the returned words to create a word pool that the placeholder text is then generated from.

The site is then hosted on render.com

Challenges we ran into

The greatest challenge I faced was design. I am not a designer so making things look nice is hard for me. I usually solve this problem by scouring the internet to find something that looks good and then trying to emulate it with tailwind css. Tailwind + vite make it simple to add styles on the fly.

Accomplishments that we're proud of

1) A functioning website that anyone can use 2) A modern development environment that enforces good code and good coding practices

What we learned

The main thing I learned was how to create a modern development environment. I learned how to use use tools like typescript, eslint and prettier to format my code and enforce consistent code, how to use conventional commits, and how to run these tools on commit to make sure only good code is being pushed to repos.

What's next for Lorem Ipsum Totalis

I would like to add more generation modes. For instance a mode that generates placeholder text only from words that rhyme with the seed word.

Built With

• datamuse
• render
• tailwind
• typescript
• vite
• vue