MMT Portal

A modern web portal for managing Modernized Military Transcript (MMT) operations. Built with Next.js, React, and Tailwind CSS, this application provides a comprehensive solution for transcript management, academic institution administration, and user tracking. This is purely the front end Application and relies on the MMT Backend to function.

Table of Contents

• Data Flow Diagram
• Prerequisites
• Features
• Getting Started
• Available Scripts
• Project Structure
• Tech Stack
• Testing
• Docker
• Environment Variables
• Contributing
• Learn More

Data Flow Diagram

---
title: MMT Connected Systems
---
graph TD;
        subgraph Legend
                1("System")-->|Existing|2("System");
                1("System")-.->|Planned|2("System");
        end
        subgraph External
                A[ACE];
                CB[College Board];
                P[Prometric];
        end
        subgraph P1
                E[ELRR Services];
                MIA[MMT Indexing Agent];
                M[MMT Backend];
                MMTUI[MMT UI];
                XIS[XIS];
                XMS[XMS Backend];
                XMSUI[XMS UI];
        end
        A-->|Credit Recommendations|MIA;
        CB & P -.->|Test Results|MIA;
        MIA-->|Credit Recommendations|XIS;
        MIA-.->|Test Results|E & M;
        E-->|Learner Record|M;
        XIS-->M;
        XIS-->XMS;
        XMS-->XMSUI;
        M-->MMTUI;

Loading

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 14.x or higher)
• Yarn package manager
• Docker (optional, for containerized deployment)

Running the MMT Backend with this application is mandatory for the features and functionalities to work. To see how to run the backend application, follow the link below:

• MMT Backend github link

Features

Note: MMT Backend must be running for these features to work.

• Transcript Management: Create, track, and manage military transcripts
• Academic Institute Administration: Manage academic institutions and their associated data
• User Management: Admin dashboard for user administration and access control
• Search & Filtering: Advanced search capabilities across transcripts and institutions
• Announcements System: Centralized announcements and updates management
• Responsive Design: Mobile-first design approach using Tailwind CSS
• Real-time Updates: Live data updates using React Query
• Accessibility: WCAG compliant interface components

Getting Started

Installation

1. Clone the repository:

git clone https://github.com/adlnet/mmt-portal.git
cd mmt-portal

2. Install dependencies:

yarn install

This command will:

• Install all dependencies listed in package.json
• Create a node_modules directory with all required packages
• Generate a yarn.lock file for consistent dependency versions

3. Configure environment variables (see Environment Variables)

Development

Start the development server:

yarn dev

The application will be available at http://localhost:3000

Features in development mode:

• Hot module reloading (HMR)
• Detailed error messages
• Automatic code linting
• Fast refresh for React components

Production Build

1. Create an optimized production build:

yarn build

2. Start the production server:

yarn start

The production build includes:

• Optimized and minified bundles
• Static HTML generation for improved performance
• Automatic code splitting
• Image optimization

Available Scripts

yarn dev

Runs the Next.js app in development mode with hot-reloading enabled.

yarn build

Builds the app for production to the .next folder with optimized bundles.

yarn start

Starts the production server using the custom server.js configuration.

yarn lint

Runs Next.js linting to check for code quality issues.

yarn test

Launches Jest test runner with coverage reporting (single worker mode).

yarn coverage

Runs tests in watch mode with detailed coverage reporting.

yarn test:e2e-ci

Runs Cypress end-to-end tests in CI mode using Chrome browser.

Project Structure

mmt-portal/
├── src/
│   ├── __mocks__/          # Mock data and configurations for testing
│   ├── __tests__/          # Test files organized by feature
│   ├── components/         # Reusable React components
│   │   ├── layouts/        # Layout components
│   │   └── modals/         # Modal components
│   ├── config/             # Application configuration
│   ├── contexts/           # React Context providers
│   ├── hooks/              # Custom React hooks
│   ├── pages/              # Next.js pages and routes
│   │   ├── academicInstitute/
│   │   └── modernMilitaryTranscript/
│   ├── public/             # Public assets and icons
│   ├── styles/             # Global styles and CSS
│   └── utils/              # Utility functions and helpers
├── cypress/                # E2E tests and configurations
├── public/                 # Static files served at root
├── Dockerfile              # Docker configuration
├── next.config.js          # Next.js configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── jest.config.js          # Jest testing configuration
└── package.json            # Project dependencies and scripts

Key Directories

• src/pages/: Next.js file-based routing. Each file becomes a route
• src/components/: Reusable UI components (Buttons, Tables, Forms, etc.)
• src/hooks/: Custom React hooks for data fetching and state management
• src/contexts/: React Context for global state (e.g., AuthContext)
• src/utils/: Helper functions for common operations
• cypress/e2e/: End-to-end test specifications

Tech Stack

• Framework: Next.js 14.x
• UI Library: React 18.x
• Styling: Tailwind CSS
• UI Components:
  • Material-UI
  • Headless UI
  • Flowbite React
  • Heroicons
• State Management: React Query
• HTTP Client: Axios
• Testing:
  • Jest for unit/integration testing
  • Cypress for end-to-end testing
  • React Testing Library
• Excel Export: SheetJS (xlsx)

Testing

Unit & Integration Tests

Run all unit tests with coverage:

yarn test:unit

Run tests in watch mode:

yarn coverage

End-to-End Tests

Run Cypress E2E tests:

yarn test:e2e-ci

For interactive testing with Cypress UI:

npx cypress open

Test Coverage

The project maintains test coverage for:

• React components (UI rendering and interactions)
• Custom hooks (data fetching and state management)
• Utility functions
• Page-level integration tests

Docker

Build and run the application using Docker:

# Build the Docker image
docker build -t mmt-portal .

# Run the container
docker run -p 3000:3000 mmt-portal

Environment Variables

The application requires environment variables to connect to backend services.

1. Copy the example environment file:

cp .env.example .env.local

2. Configure the following variables in .env.local:

Variable	Description
NEXT_PUBLIC_BACKEND_HOST	MMT Backend API URL

Learn More

Next.js Documentation

• Next.js Documentation - Learn about Next.js features and API
• Learn Next.js - Interactive Next.js tutorial
• Next.js GitHub - Source code and examples

React Resources

• React Documentation
• React Hooks
• React Query Documentation

Tailwind CSS

• Tailwind CSS Documentation
• Tailwind UI Components

Testing

• Jest Documentation
• React Testing Library
• Cypress Documentation

Additional Information

• MMT Wiki can be found here

License

This project uses the Apache license.