Cryptunes Tech Stack & Architecture

Architecture Flow: where design meets functionality

• React: drives the dynamic and modular ui.

• Tailwind CSS: keeps it stylish and efficient.

• React-joyride: makes onboarding feel like a game.

These tools work together like a well-mixed track, delivering smooth functionality and a seamless experience. cryptunes’ stack doesn’t just power the platform; it vibes with its purpose.

---

React-powered Core

React forms the dynamic backbone of Cryptunes, enabling modular, intuitive UI design.

• Optimized rendering: react’s useMemo ensures smooth processing of real-time audio and interactions.

Code Snippet: Rendering Audio and Visual Elements

import React, { useMemo } from "react";
import Image from "next/image";
import cn from "classnames";

const renderAudioElements = useMemo(
  () =>
    attributes?.map((attribute, index) => (
      <audio
        src={attribute.music}
        id={`music-${attribute.id}`}
        key={index}
        onEnded={() => setIsRunning(false)}
      />
    )),
  [attributes]
);

const renderCharacters = useMemo(
  () =>
    characters.map((character, index) => (
      <div
        id={`character-selection-item-${index}`}
        className="relative -mb-1 -ml-16"
        key={index}
      >
        <button
          onClick={() =>
            character.assignedAttributeId
              ? handleRemoveAttribute(character.id)
              : setSelected({
                  characterId: character.id,
                  attributeId: selected?.attributeId ?? 0,
                })
          }
        >
          <Image
            src={character.images[currentImageIndexes[index]]}
            width={400}
            height={400}
            alt={`Character ${character.id}`}
            className={cn(
              "h-auto w-auto",
              character.assignedAttributeId
                ? "scale-100"
                : selected
                ? "mb-2 scale-110"
                : "scale-100"
            )}
          />
        </button>

        {character.assignedAttributeId && !character.isPlaying && (
          <div className="absolute bottom-4 left-0 w-full">
            <div className="flex items-center justify-center gap-2">
              <div className="relative">
                <div className="h-[8px] w-[100px] rounded bg-white/50"></div>
                <div
                  className="absolute left-0 top-0 h-[8px] rounded bg-white"
                  style={{
                    width: `${progress}%`,
                  }}
                ></div>
              </div>
            </div>
          </div>
        )}
      </div>
    )),
  [characters, currentImageIndexes, handleRemoveAttribute, progress, selected]
);

This code powers the real-time rendering of audio elements and dynamic character interactions, ensuring seamless user engagement while leveraging React’s efficiency.

---

Tailwind CSS: utility-first vibes for next-level design

Tailwind CSS powers Cryptunes’ sleek, responsive look with a design philosophy built for speed and consistency.

Features like these make it a perfect match for the platform:

• Responsive Design: components flow seamlessly across devices no messy custom media queries.

• Scalable Themes: classnames like bg-[#7D64BE] and hover:scale-110 bring creative vibes without breaking scalability.

• Code Snippet: styled attribute buttons that keep everything functional and beautiful.

Tailwind keeps cryptunes looking fresh, no matter the beat.

Code Snippet: Styled Attribute Buttons

<div className="relative h-full w-full flex-[3] bg-[url('/assets/demo/bg.gif')] bg-cover bg-center">
  <div className="flex h-full w-full flex-col justify-between px-8 pt-8">
    <div className="container flex w-full items-start justify-between">
      <Link href="/demo">
        <Image
          id="btn-back"
          src="/assets/demo/btn-back-demo.png"
          width={100}
          height={100}
          className="h-[70px] w-auto cursor-pointer transition-transform hover:scale-110"
          alt="Back"
          onClick={() => audio.play()}
        />
      </Link>
      <div className="flex w-full flex-col items-end justify-end gap-2">
        <p className="text-4xl text-white">CRYPTUNE</p>
        <TwitterShareButton
          title="Just generated an AI soundtrack through $TUNE. Check it out below! Try yours today at: https://tune-coin.vercel.app/"
          url={`https://tune-coin.vercel.app/`}
        >
          <Image
            id="btn-share"
            src="/assets/demo/btn-share.png"
            width={100}
            height={100}
            className="h-[70px] w-auto cursor-pointer transition-transform hover:scale-110"
            alt="Share"
          />
        </TwitterShareButton>
      </div>
    </div>

    <div
      id="characters-selection-row"
      className="flex w-full items-end justify-center px-8 pl-16"
    >
      {renderCharacters}
    </div>
  </div>
</div>

With Tailwind, every visual element from hover effects to opacity changes amplifies the user experience, blending functionality with elegance.

---

React-joyride: onboarding made fun

Cryptunes isn’t just an app it’s an experience. React-joyride makes sure users get the full tour without feeling lost.

This interactive library transforms onboarding into a smooth, engaging journey.

• Interactive Walkthroughs: guide users through cryptunes without overwhelming them.

• Gamified Experience: learning the app becomes intuitive and maybe even fun.

• Code Snippet: joyride configurations ensure everything fits seamlessly.

React-joyride doesn’t just onboard; it sets the tone for what cryptunes is all about exploration.

Code Snippet: Joyride Configuration

import Joyride from "react-joyride";

const steps = [
  {
    target: "#character-selection-item-0",
    content: "Click here to start selecting your character!",
  },
  {
    target: "#attribute-selection-item-0",
    content: "These are your attributes. Drag and drop to customize!",
  },
  {
    target: "#music-1",
    content: "Hit play to listen to your masterpiece in the making.",
  },
];

export default function App() {
  return (
    <div>
      <Joyride
        steps={steps}
        continuous={true}
        showProgress={true}
        showSkipButton={true}
      />
      {/* Rest of the app */}
    </div>
  );
}

With React-joyride, users enjoy a gamified walkthrough, turning onboarding into an engaging, interactive journey.

---