Fragments Web

fragments-web is a browser-based frontend for the Fragments platform. It authenticates users with Amazon Cognito and provides a lightweight interface for creating, browsing, previewing, updating, and deleting fragments through the Fragments API.

Features

• Amazon Cognito Hosted UI sign-in flow
• Authenticated requests to the Fragments API using bearer tokens
• Create fragments from text, Markdown, JSON, and supported image uploads
• Browse user fragments with expanded metadata
• Preview raw content and available conversions directly in the UI
• Update and delete existing fragments from a single dashboard
• Static deployment workflow using Parcel and Nginx

Tech Stack

• HTML, CSS, and vanilla JavaScript
• Parcel 2
• Amazon Cognito Hosted UI
• Docker
• Nginx

Getting Started

Prerequisites

• Node.js 20+
• npm 10+
• Access to a running Fragments API
• Amazon Cognito app client and hosted domain configuration

Installation

git clone https://github.com/KenchoLodhen1/fragments-web.git
cd fragments-web
npm install

Environment Configuration

Create a .env file in the project root:

API_URL=http://localhost:8080
AWS_COGNITO_POOL_ID=us-east-1_XXXXXXXXX
AWS_COGNITO_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXX
COGNITO_REDIRECT_URI=http://localhost:1234
COGNITO_DOMAIN=your-domain.auth.us-east-1.amazoncognito.com

API_URL should point to your backend. The Cognito values should match the user pool, app client, redirect URI, and hosted domain used by your deployment.

Local Development

npm start

The development server runs at http://localhost:1234.

Available Scripts

Command	Description
npm start	Start the Parcel development server
npm run build	Build a production bundle

Docker

The production image builds the Parcel application and serves the compiled static assets through Nginx.

Build the image:

docker build -t fragments-web .

Run the container locally:

docker run --rm -p 8080:80 fragments-web

If you need environment-specific API or Cognito settings, provide the appropriate build arguments when creating the Docker image.

Project Structure

• index.html defines the main UI shell and layout
• src/auth.js handles Cognito login and token capture
• src/api.js wraps authenticated calls to the Fragments API
• src/app.js manages UI state, fragment actions, and previews

Use Cases

• Authenticate users against Cognito without building a custom auth server
• Exercise fragment creation and retrieval flows from a browser UI
• Review fragment metadata and preview converted output
• Manage fragment lifecycle actions against a deployed backend