pnpm install
pnpm run dev

Frontend for the Emojify app (Emojify UI), built with Astro + React.

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

All commands are run from the root of the project, from a terminal:

Feel free to check our documentation or jump into our Discord server.

You can also run the application using Docker.

Build the image:

docker build -t emojify-frontend .

Run the container:

docker run -it --rm -p 4785:80 emojify-frontend

The app will be available at http://localhost:4785.

The frontend emits product feedback events to the backend for business metrics:

• copy: emitted when the user clicks copy on a generated emoji response.
• regenerate: emitted when the user submits the same query again while a previous result exists.

These events are sent to:

• POST /api/v1/emoji/feedback

Payload sent by the UI:

{
  "event_type": "copy",
  "query": "a calm beach at sunset",
  "response": "🏖️🌅😌",
  "request_id": "7ec5b669-9bb5-458f-b721-5b22bf4ea1f9",
  "session_id": "browser-session-id",
  "source": "ui",
  "created_at": "2026-02-18T16:18:00Z"
}

Notes:

• request_id comes from the backend response of POST /api/v1/emoji.
• session_id is created in the browser and stored in sessionStorage.
• Feedback requests are best-effort and do not block UI behavior if telemetry fails.

Required environment variable:

• PUBLIC_API_BASE_URL must point to the backend API base URL so both generation and feedback endpoints resolve correctly.

Recommended local setup:

# emojify-frontend/.env
PUBLIC_API_BASE_URL=http://127.0.0.1:8424

Local CORS note:

• Astro dev runs on http://localhost:4321.
• Ensure backend API_CORS_ORIGINS includes http://localhost:4321 and http://127.0.0.1:4321.

How regenerate is inferred:

• The UI emits regenerate when the user submits the same query text again while a previous generation exists in the current session.
• Submitting a different query does not emit regenerate.

Where rows are visible:

• Row-level feedback records are visible in backend Grafana dashboard panel Feedback Events (Latest 100 Rows).

To enable deployment, you need to set the following secrets in your repository settings (Settings > Secrets and variables > Actions):

• SERVER_HOST: The IP address or domain of your server.
• SERVER_USER: The SSH username (e.g., root or ubuntu).
• SERVER_SSH_KEY: The private SSH key for authentication.

Deployment is automatically triggered when pushing a tag that starts with v (e.g., v1.0.0).

1. Create a tag with the new version:

git tag v1.0.0

2. Push the tag to GitHub:

git push origin v1.0.0

This will trigger the GitHub Actions workflow that builds the Docker image and deploys it to the server.

To check the latest tag:

git tag --sort=version:refname