Creating Editor Tool from scratch for poets using Next.js in a single page

Hey there! Let me share a little secret with you—I have a passion for writing poetry, but there’s a twist. You see, my poems aren’t crafted in English or any widely recognized language; instead, I pour my heart out in Kannada, an Indian language that resonates deeply with me.

Now, here’s the thing: whenever I’ve wanted to share my poetic creations with others, I’ve hit a bit of a roadblock. Sure, I could present them in their written form, but let’s face it, that’s about as exciting as watching paint dry. Plus, there’s always been this nagging issue with other poetry platforms like Your Quote. Don’t get me wrong, they’re fantastic platforms, but here’s the kicker—most of their features come with a price tag. And to add insult to injury, they slap their logo on everything, turning my beautiful creations into billboard ads. Not exactly the vibe I’m going for, you know?

So, I thought to myself, why not create a free platform where anyone, regardless of their language or financial status, can unleash their creativity? And thus, the idea for Poetique was born—a haven for poets like you and me to showcase our work without any strings attached. It’s about time we had a space where our words could truly shine, unencumbered by watermarks or paywalls.

So, join me on this poetic journey as we bring our words to life in vibrant visuals and share our stories with the world, one verse at a time. Let’s make poetry not just something to be read, but something to be experienced in all its colorful glory. Ready to dive in? Let’s make some magic happen! .

Enter Poetique – an ingenious online platform revolutionizing the way we perceive and interact with poetry.

Embracing Innovation

At its core, Poetique offers users a seamless experience to effortlessly transform words into visually captivating poetry. Whether you’re a seasoned wordsmith or just dipping your toes into the world of poetry, Poetique provides an array of tools and resources to help you craft mesmerizing pieces of art from your own verses or existing literary works.

Gone are the days of static text on a page; Poetique breathes life into poetry by integrating stunning visual elements. With a vast library boasting over 80,000 images, users can handpick the perfect visuals to complement their poetic compositions, adding layers of depth and meaning to their creations.

Getting Started

So, how does one embark on this journey of poetic exploration with Poetique? Fear not, for the path to artistic brilliance is paved with simplicity:

1. Visit the Poetique website: Navigate to the Poetique website to kickstart your poetic odyssey.
2. Input your masterpiece: Enter your poem or quote along with its title and author (if applicable).
3. Explore customization: Dive into the editing page where a myriad of customization options awaits you.
4. Tailor to perfection: Customize your visual poetry to reflect your unique style and vision.
5. Share your masterpiece: Once satisfied, unleash your creation upon the world and watch as it captivates hearts and minds.

Features Galore

Poetique isn’t just another run-of-the-mill poetry platform; it’s a sanctuary for creative souls seeking to breathe life into their words. Here are just a few of the features that set Poetique apart:

• Create Visual Poetry: Seamlessly transform text into visually stunning masterpieces.
• Limitless Customization: From background images to text styles, tailor every aspect of your creation to perfection.
• Pexels Integration: Access a vast collection of high-quality images via the Pexels Image API.
• Download and Share: Share your poetic gems with the world or keep them close to your heart by downloading them as images.

Personalization & Accessibility

At the heart of Poetique lies a commitment to personalization and accessibility. Unlike some creative platforms that come with hefty price tags, Poetique offers its full suite of features completely free of charge. This democratization of art ensures that anyone, regardless of their financial circumstances, can unleash their creativity and share their unique voice with the world.

Exploring the Tech Behind the Magic

Behind the enchanting veil of Poetique lies a robust tech stack designed to empower users and facilitate seamless interactions. Let’s delve into the technological marvels that power this poetic platform:

Next.js 14: Powering Next-Generation Web Apps

Next.js serves as the backbone of Poetique, providing server-side rendering, static site generation, and routing capabilities. With version 14, Next.js brings forth a plethora of enhancements and optimizations, ensuring a smooth and delightful user experience.

Shadcn & Aceternity UI: Elevating the Visual Experience

While Shadcn may seem enigmatic, it serves as a cornerstone for enhancing visual aesthetics within Poetique. Paired with Aceternity UI, these frameworks provide a rich assortment of styling options and UI components, elevating the overall user experience to new heights.

Pexels Image API: A Treasure Trove of Inspiration

The integration of the Pexels Image API empowers users to access an extensive repository of high-quality images, fueling their creative endeavors and enriching their poetic compositions.

React Hooks & Axios: Driving Interactivity and Data Fetching

Utilizing React Hooks such as useState and useEffect, Poetique facilitates seamless state management and interactivity. Additionally, Axios handles HTTP requests, ensuring efficient data fetching from the Pexels API.

HTML-to-Image & Web Share API: Enabling Download and Sharing

The utilization of html-to-image facilitates the conversion of visual poetry into downloadable images, enabling users to preserve and share their creations with ease. Furthermore, integration with the Web Share API empowers users to seamlessly share their poetic gems across various platforms.

Navigating the Creative Process

The journey of crafting visual poetry within Poetique is a harmonious blend of artistry and technology. Let’s explore some key functionalities that enable users to bring their poetic visions to life:

Image Search and Selection:

Empowering users to curate the perfect backdrop for their poetry, this functionality seamlessly integrates with the Pexels API, allowing users to search for and select images that resonate with their artistic vision.

const [images, setImages] = useState([]);
const [selectedImage, setSelectedImage] = useState(null);
const [searchQuery, setSearchQuery] = useState("nature");

const fetchImages = async (page) => {
  try {
    const response = await axios.get(
      `https://api.pexels.com/v1/search?query=${searchQuery}&page=${page}`,
      {
        headers: {
          Authorization: process.env.NEXT_PUBLIC_PEXELS_API_KEY,
        },
      }
    );
    setImages(response.data.photos);
    setTotalPages(response.data.total_pages);
  } catch (error) {
    console.error("Error fetching images:", error);
  }
};

const handleImageClick = (image) => {
  setSelectedImage(image);
};

Text Styling:

From font colors to sizes, users have full control over the visual presentation of their text, enabling them to imbue their poetry with a touch of personal flair and style.

const [textStyles, setTextStyles] = useState(new Set());
const [fontColor, setFontColor] = useState("#000000");
const [fontSize, setFontSize] = useState(16);
const [bold, setBold] = useState(false);
const [selectedFont, setSelectedFont] = useState(null);

const handleFontColorChange = (e) => {
  const color = e.target.value;
  setFontColor(color);
  handleTextStyleToggle(`text-color-${color}`);
};

const handleFontSizeChange = (value) => {
  const size = parseInt(value, 10);
  setFontSize(size);
  handleTextStyleToggle(`font-size-${size}`);
};

const handleBoldText = () => {
  setBold(!bold);
  handleTextStyleToggle("bold");
};

Image Rendering and Styling:

Enabling users to customize image properties such as background color, opacity, and blur, this feature adds depth and dimension to their visual compositions, elevating them to new heights of artistic expression.

const [backgroundColor, setBackgroundColor] = useState("#b3e0ff");
const [imageOpacity, setImageOpacity] = useState(1);
const [imageBlur, setImageBlur] = useState(0);

const handleColorChange = (event) => {
  setBackgroundColor(event.target.value);
  setSelectedImage(null

);
};

const handleImageOpacityChange = (event) => {
  setImageOpacity(parseFloat(event.target.value));
};

const handleImageBlurChange = (event) => {
  setImageBlur(parseFloat(event.target.value));
};

Download and Share:

Facilitating the dissemination of poetic creations, this feature empowers users to download their visual poetry as images or share them with the world via supported platforms, fostering a sense of community and connection.

const handleDownloadClick = async () => {
  setisDownloading(true);
  if (canvasContainerRef.current) {
    try {
      const dataUrl = await toPng(canvasContainerRef.current, {
        quality: 1.0,
      });
      const link = document.createElement("a");
      link.href = dataUrl || "";
      link.download = "downloaded-image.png";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      setisDownloading(false);
    } catch (error) {
      setisDownloading(false);
      console.error("Error downloading image:", error);
    }
  }
  setisDownloading(false);
};

const handleShareClick = async () => {
  try {
    if (canvasContainerRef.current) {
      const blob = await toBlob(canvasContainerRef.current, {
        quality: 1.0,
      });
      if (blob && navigator.share) {
        await navigator.share({
          title: "Poetique Image",
          text: "Check out this beautiful image poem!",
          files: [
            new File([blob], "poetique-image.png", { type: "image/png" }),
          ],
        });
      } else {
        alert("Sharing is not supported on this browser.");
      }
    }
  } catch (error) {
    console.error("Error sharing:", error);
  }
};

Handling Style Changes:

Providing users with the flexibility to toggle text styles and alignments, this functionality ensures that every aspect of their poetry reflects their unique voice and artistic sensibilities.

const handleTextStyleToggle = (style) => {
  const updatedStyles = new Set(textStyles);

  if (style.includes("align-")) {
    updatedStyles.forEach((existingStyle) => {
      if (existingStyle.startsWith("align-")) {
        updatedStyles.delete(existingStyle);
      }
    });
  }

  if (style.startsWith("text-color-")) {
    updatedStyles.forEach((existingStyle) => {
      if (existingStyle.startsWith("text-color")) {
        updatedStyles.delete(existingStyle);
      }
    });
  }

  if (updatedStyles.has(style)) {
    updatedStyles.delete(style);
  } else {
    updatedStyles.add(style);
  }

  if (style.startsWith("font-size-")) {
    updatedStyles.forEach((existingStyle) => {
      if (existingStyle.startsWith("font-size-")) {
        updatedStyles.delete(existingStyle);
      }
    });
    setFontSize(parseInt(style.replace("font-size-", ""), 10));
  }

  setTextStyles(new Set(Array.from(updatedStyles)));
};

Join the Poetic Revolution

In a world inundated with digital noise, Poetique stands as a beacon of creativity and expression. Whether you’re a seasoned poet or an aspiring wordsmith, Poetique invites you to embark on a journey of poetic discovery and unleash your creative potential. Join us as we redefine the boundaries of poetry and transform words into works of art that resonate with the soul.

Installation and Contribution

Eager to dive into the world of Poetique and contribute to its evolution? Follow these simple steps:

1. Clone the Repository: Fork and clone the Poetique repository to your local machine.
2. Install Dependencies: Navigate to the project directory and install dependencies using npm.
3. Set up Environment Variables: Create a .env.local file and add your Pexels API key.
4. Run the Project: Launch the project locally and begin your poetic exploration.

git clone https://github.com/Varshithvhegde/Poetique.git
cd poetique
npm install
npm run dev

Contributions are always welcome! Whether you’re a seasoned developer or a budding poet, your insights and contributions are invaluable in shaping the future of Poetique. Together, let’s weave a tapestry of words and images that inspires, captivates, and transcends the boundaries of imagination.

In Conclusion

As we journey through the realms of poetry and technology, Poetique stands as a testament to the boundless potential of human creativity. With its innovative features, intuitive interface, and commitment to accessibility, Poetique empowers individuals from all walks of life to embrace their inner poet and share their unique voice with the world. Join us in the poetic revolution and let your words paint a canvas of endless possibility.

Links

1. Star on Github
2. Poetique App
3. Varshith V Hegde – Github