Frontend Overview

Relevant source files

The following files were used as context for generating this wiki page:

• public/index.html
• server.js
• APP/models/model.model.js
• package.json
• Index.html
• seed.js
• APP/config/db.config.js

The LostData project features a web-based frontend that serves as a single-page application (SPA) for interacting with a "Model Database". Built with vanilla JavaScript, HTML, and styled with Tailwind CSS, the interface allows users to view, search, and manage model profiles. The frontend communicates with a backend Node.js/Express server that provides a RESTful API for data operations.

The application supports two user roles: 'chatter' (read-only access) and 'admin' (full CRUD access), determined upon login. The UI dynamically adjusts to the user's role, revealing administrative controls like adding, editing, deleting, and bulk importing/exporting data. The root Index.html is a simple static placeholder, while the core application is served from public/index.html.

Sources: public/index.html, server.js:23-25, Index.html

Architecture

The frontend is a client-side application contained within a single HTML file, public/index.html. It is served as a static asset by the Express server, which also handles all API requests. Any route that is not an API call (/api/...) defaults to serving the main index.html file, which is characteristic of an SPA.

Sources: server.js:20, 126-128, public/index.html

This diagram illustrates the high-level architecture, showing the user interacting with the SPA, which in turn communicates with the backend API and database.

UI Components

The user interface is constructed from several key components defined in public/index.html.

Component	ID / Selector	Description
Login Input	#emailInput	An input field for the user's email to log in.
Login/Logout Buttons	onclick="login()" / onclick="logout()"	Buttons to initiate login and logout sessions.
Role Display	#roleInfo	A paragraph element to display the current user's role or logged-out status.
Search Input	#searchInput	A text field that filters the displayed models in real-time.
Model Grid	#modelGrid	The main container where model cards are dynamically rendered.
Add Model Button	#addModelBtn	An admin-only button to add a new model.
Model Modal	#modelModal	A modal dialog that displays the full details of a selected model.
Edit/Delete Buttons	#editBtn, #deleteBtn	Admin-only buttons within the modal for editing or deleting a model.
Back to Top Button	#backToTop	A button that appears on scroll to return the user to the top of the page.
Export/Import	#exportJsonBtn, #exportCsvBtn, #importFile	Admin-only controls for data management.

Sources: public/index.html:11-53

State Management

Client-side state is managed using global JavaScript variables within a <script> tag.

• models = []: An array that holds the complete list of model objects fetched from the server. This array acts as the local cache for rendering, searching, and filtering.
• currentId = '': A string variable that stores the _id of the model currently being viewed in the modal.
• localStorage: The browser's localStorage is used to persist the user's role ('admin' or 'chatter') across sessions. This ensures that the UI correctly reflects the user's permissions upon returning to the page.

Sources: public/index.html:61-62, 70, 99

Core Frontend Logic

The application's interactivity is driven by a set of JavaScript functions that handle user actions and API communication.

Authentication Flow

User authentication is based on the email address provided. An email ending in @admin.com grants admin privileges.

1. User enters an email and clicks "Login".
2. The login() function sends a POST request to /api/login with the email.
3. The server creates a session, determines the role, and returns it in the response.
4. The frontend stores the role in localStorage and updates the UI to show/hide admin controls.

This sequence diagram shows the login process.

Data Fetching and Rendering

Models are fetched on initial page load and after login/logout. The fetchModels() function retrieves the data, which is then rendered by renderModels().

// public/index.html:85-96
async function fetchModels() {
    const res = await fetch('/api/models');
    models = await res.json();
    models.sort((a, b) => a.name.localeCompare(b.name));
    renderModels(models);
}

function renderModels(data) {
    document.getElementById('modelGrid').innerHTML = data.map(m => `
        <div class="bg-gray-800 p-6 rounded-lg cursor-pointer" onclick="openModal('${m._id}')">
            <h3 class="text-xl font-bold text-white">${m.name}</h3>
        </div>
    `).join('');
    document.getElementById('modelCount').textContent = `${data.length} models`;
}

Sources: public/index.html:85-96

Search Functionality

The search feature provides an instant, client-side filtering experience. It listens for input events on the search bar, filters the global models array, and re-renders the grid with the matching results.

This flowchart describes the search logic.

Admin Operations

Admin users have access to CRUD operations and data import/export functionalities, which directly call the backend API.

Add Model

The "Add Model" button uses a prompt() to collect data for a new model in a specific string format. This string is parsed, and a POST request is sent to the /api/models endpoint.

Import/Export

Admins can export all model data to JSON or CSV formats and import data from a CSV file.

Endpoint	Method	Frontend Action	Description
/api/export/json	GET	fetch('/api/export/json')	Fetches all models as a JSON array and prompts a file download.
/api/export/csv	GET	fetch('/api/export/csv')	Fetches all models, converts them to CSV on the server, and prompts a file download.
/api/import/csv	POST	fetch('/api/import/csv')	Uploads a CSV file using FormData to bulk-insert new models.

Sources: public/index.html:136-160, server.js:98-124.