DEV Community

Cover image for Haiku Harmony: Crafting Poetry in the Cloud with Pinata
Siva Teja
Siva Teja

Posted on

Haiku Harmony: Crafting Poetry in the Cloud with Pinata

This is a submission for the The Pinata Challenge

What I Built

I created Haiku Harmony, a web application that brings the art of haiku into the digital age. This platform allows users to create, share, and appreciate haikus, each accompanied by an image. Key features include:

  • A user-friendly interface for composing and submitting haikus
  • User profiles showcasing each author's haiku collection
  • A search feature allowing users to find haikus by tags
  • A "Hall of Fame" section highlighting the most popular haikus

What makes Haiku Harmony unique is its use of Pinata's decentralized storage solution. Each haiku and its associated image are stored on IPFS through Pinata, eliminating the need for a traditional database. This approach not only simplified the development process but also made me realize how easy it is to create a scalable application without the usual database hassles.

I developed this during my exams so excuse me for any bugs. I tested this as much as I could, so I hope you won't find any. But due to time constraints I haven't tested it as much as I would have liked.

Demo

You can see it in action at https://haikuharmony.netlify.app/

My Code

The source code is available on GitHub:

GitHub logo MS-Teja / HaikuHarmony

Haiku Harmony is a web application that celebrates the art of haiku by providing a platform for users to create, share, and appreciate these brief poetic gems.

Haiku Harmony

Haiku Harmony is a web application that celebrates the art of haiku by providing a platform for users to create, share, and appreciate these brief poetic gems. Built with Vue.js and leveraging Pinata's Files API, this project combines the simplicity of haiku with the power of decentralized storage.

Live Demo

Visit Haiku Harmony: Haiku Harmony

Features

  • Create and share haikus with associated images
  • Browse a feed of user-submitted haikus
  • Like and interact with others' creations
  • Search haikus by tags
  • User profiles showcasing individual collections
  • A "Hall of Fame" featuring top-rated haikus

Technology Stack

  • Frontend: Vue.js
  • Backend: Netlify Functions
  • Storage: IPFS via Pinata SDK
  • Authentication & Likes: Firebase
  • Hosting: Netlify

Thank you for providing that information. I'll update the README to reflect the correct environment variables and development process. Here's the revised section for local development:

Local Development

To run this project locally:

  1. Clone the repository

    git clone https://github.com/MS-Teja/HaikuHarmony.git

My Journey

When I first encountered the Pinata Challenge prompt to "use Pinata" in a project, I had no idea how transformative this experience would be. As an 18-year-old student from India, I decided to create Haiku Harmony, a web application for sharing and appreciating haikus. What I discovered along the way was a revelation in web development simplicity.

The Pinata Revelation

Integrating Pinata into Haiku Harmony opened my eyes to how easy it can be to create a scalable application without the complexities of traditional databases. Here's what I learned:

  1. Simplified Storage: Instead of setting up and managing a database, I could store haikus and images directly on IPFS through Pinata with just a few lines of code.

  2. Effortless Retrieval: Fetching content became as simple as making API calls to Pinata's gateway. No complex queries or database management required.

  3. Built-in Scalability: I realized that as Haiku Harmony grows, I won't need to worry about database scaling. Pinata's decentralized storage can handle increased load without additional configuration.

  4. Reduced Backend Complexity: Without a traditional database, my backend became significantly simpler, focusing mainly on interacting with Pinata's API.

The Implementation

Using Pinata was surprisingly straightforward. For example, uploading a haiku was as simple as:

const result = await pinata.pinJSONToIPFS(haikuData, pinataOptions);
Enter fullscreen mode Exit fullscreen mode

And retrieving it was equally uncomplicated:

const response = await axios.get(`https://${pinataGateway}/ipfs/${id}`);
Enter fullscreen mode Exit fullscreen mode

This simplicity allowed me to focus more on creating features and improving user experience, rather than getting bogged down in database management.

Reflections

Developing Haiku Harmony during my exams was challenging, but Pinata's ease of use made it possible. I was amazed at how I could create a potentially scalable application without the need for complex database setups or management.

This experience has shown me that for content-centric applications, solutions like Pinata can offer a compelling alternative to traditional databases, simplifying both development and scaling processes significantly.

Conclusion

The ease of using Pinata has been a game-changer in my understanding of web development. It's shown me that creating scalable applications doesn't always require complex infrastructure.

I'm eager to hear thoughts and feedback from the community. If you think I did something wrong or have suggestions to improve Haiku Harmony, I'd be grateful for your input. Your insights will help me grow as a developer and enhance this project further.

This challenge has not only resulted in a production level application but also opened my eyes to new possibilities in web development. It's exciting to think about how tools like Pinata can shape the future of content-driven applications.

Top comments (0)