জুলাই স্মৃতি আর্কাইভ

JULY SMRITI ARCHIVE

Frontend System & Full Project Presentation

A privacy-first documentary platform preserving memory, protecting people, and verifying records before publication — built with a strict separation between public archive content and private, protected source material.

Team ASTROX

Documentation Date 30 Jul 2026

React 18 · CRA

Presented by Team Astrox · Sombit Majumdar · Zishan Rezwan · Takwa Jahin Feeza

Preserve memory. Protect people. Verify before publishing.

JULY SMRITI ARCHIVE · ASTROX

01

OUR TEAM

Team Astrox

2

SM

Sombit Majumdar

Team Member

Astrox

ZR

Zishan Rezwan

Team Member

Astrox

TJ

Takwa Jahin Feeza

Team Member

Astrox

Team Astrox designed and built the July Smriti Archive frontend end-to-end — information architecture, role-based navigation, contribution and support workflows, the administrator workspace, and the bilingual, privacy-first design system documented in this presentation.

JULY SMRITI ARCHIVE · ASTROX

02

Team

ACCESS SETUP

Initial Administrator Account

3

The following administrator account should be created first, during initial setup / database seeding, so the admin workspace is reachable immediately after deployment.

A

ROLE: ADMIN

Email

admin@gmail.com

Password

12345678

Assign this account role = ADMIN in the database, or create it via sign-up and promote the role from All Users.

Security note for production

• Change this password immediately after first login — do not keep default credentials in a live deployment.
• ADMIN accounts are redirected straight to the protected /admin-panel workspace and cannot open USER-only routes through normal navigation.
• Every sensitive endpoint must independently verify authentication, role and record ownership on the backend — a hidden button or blocked frontend route is not protection.

JULY SMRITI ARCHIVE · ASTROX

03

Admin Access

BRAND IDENTITY

Logo, Typography & Color System

4

JULY SMRITI ARCHIVE

Framed archive-book mark — preservation, testimony, remembrance

Typography

• Display: Georgia / Noto Serif Bengali — hero titles, headings, memorial storytelling
• Interface: Inter / Manrope / Noto Sans Bengali — navigation, forms, tables, UI
• Bangla: Noto Sans Bengali / Hind Siliguri — readable Bangla body & controls

Visual motif

• "document-grain" texture overlay for a restrained archival paper feel
• Reusable surface classes: page-shell, section-pad, surface-card, admin-card, field-control, focus-ring
• Cards use soft borders + elevation, not bright dashboard colors

Color Palette

Ink 950

#080A11

Primary documentary bg

Ink 900

#0F121C

Secondary surfaces

Archive Amber

#D79A54

Primary action & emphasis

Archive Copper

#B96F45

Warm secondary emphasis

Archive Rose

#B96776

Memorial / sensitive story

Archive Teal

#4B9B8D

Trust, return, verification

Archive Paper

#F4F1EA

Primary text / light surface

JULY SMRITI ARCHIVE · ASTROX

04

Brand Identity

ROADMAP OF THIS DECK

Presentation Contents

5

01

Project overview & vision

02

Roles & information architecture

03

Design system & authentication

04

Public website — every page

05

Evidence contribution workflow

06

Private support workflow

07

Missing-person workflow & maps

08

User account workspace

09

Administrator workspace — every queue

10

Language, offline state & API layer

11

Privacy, security & installation

12

Deployment, QA & roadmap

JULY SMRITI ARCHIVE · ASTROX

05

Agenda

01 · PROJECT OVERVIEW

Executive Overview

6

July Smriti Archive is a documentary and crisis-support frontend built around a strict separation between public information and private source material. It presents a cinematic public archive, a source-attributed chronology, static historical stories, protected evidence contribution, private support rooms, verified missing-person records and a backend-connected administrator workspace.

2

Roles

34

App Routes

47

API Ops

3

Offline Drafts

Core value proposition

• Preserve photos, video, audio, documents and testimony in one archive workflow
• Explain the movement via a maintained chronology, Hero Stories, Aynaghor records and public voices
• Give contributors explicit choices on anonymity, pseudonyms, publication permission and media protection
• Coordinate support through private rooms instead of exposing sensitive medical/personal data
• Publish only admin-approved missing-person fields; keep contacts and sightings private
• Purpose-built admin queues for evidence, support and missing persons — not one generic dashboard

CENTRAL RULE

Submission, verification and approval are not the same as publication.

The public archive receives a separate, reviewed derivative record. The private original always remains protected in non-public storage.

JULY SMRITI ARCHIVE · ASTROX

06

Overview

02 · ROLES

Who The Platform Serves

7

Role behavior

• Guests are directed to sign in before any protected content is shown · ADMIN accounts cannot enter USER-only routes through normal navigation
• Shared archive pages are accessible to both authenticated roles · role values are normalised to uppercase, with the backend as the authoritative source of truth

JULY SMRITI ARCHIVE · ASTROX

07

Roles

02 · NAVIGATION

Information Architecture

8

Desktop navigation groups

• Direct links: Home · Archive · About
• "Remember July" dropdown: Movement Timeline · Stories & Aynaghor · Voices of July
• "Support & Search" dropdown: Support · Missing Persons
• USER actions: Submit Evidence, account menu, support action
• ADMIN actions: Admin Panel, user-site shortcut, language switch

Mobile & admin navigation

• Mobile drawer: solid dark background, overlay, accordion groups, scroll locking for readability
• Authenticated users get compact account shortcuts inside the drawer
• Admin workspace has a separate fixed desktop sidebar and an opaque mobile drawer
• Both navigations close automatically after route changes and support the Escape key

Route governance

• 34 total application routes across Guest, Shared, USER and ADMIN access levels — see the full route matrix in the appendix
• New sensitive routes are added through ProtectedRoute with explicit allowedRoles
• GuestRoute prevents signed-in users from reopening authentication pages; ProtectedRoute redirects guests while retaining the requested location
• A hidden button or blocked frontend route does not protect data — every endpoint independently verifies authentication, role and ownership on the server

JULY SMRITI ARCHIVE · ASTROX

08

Navigation

03 · DESIGN SYSTEM

Visual Language & Responsive Behavior

9

Visual system

• Georgia / Noto Serif Bengali for display typography; Inter / Noto Sans Bengali for body UI
• Reusable classes: page-shell, section-pad, surface-card, admin-card, field-control, focus-ring
• Document-grain overlay gives the public site a restrained archival texture
• Cards use subtle borders and elevation rather than bright dashboard colors

Responsive behavior

• Layouts shift from one column to two/three-column grids at tablet and desktop breakpoints
• Large review pages use sticky side panels, collapsing to normal flow on small screens
• Admin tables are horizontally scrollable rather than compressed into unreadable columns
• Media uses controlled aspect ratios and lazy loading; video cards use poster frames instead of preloading playback

Accessibility & interaction quality

• Visible focus rings on links, buttons and controls · form inputs carry labels, hints, validation messages and correct input types
• Modals use dialog semantics, overlays, close buttons and Escape handling
• The shared modal focus behavior was corrected so state updates no longer steal focus after every typed character
• Images use meaningful alt text or explicit placeholders — anonymous stories intentionally do not fabricate portraits

JULY SMRITI ARCHIVE · ASTROX

09

Design System

03 · AUTHENTICATION

Session Lifecycle & Route Protection

10

1

App.js requests /api/user-details with credentials included at startup

2

Response is normalised and stored in the Redux user slice

3

RootRedirect chooses /login, /home or /admin-panel

4

GuestRoute prevents signed-in users from reopening auth pages

5

ProtectedRoute redirects guests, retains the requested location, checks allowedRoles

6

Logout calls the backend when possible, clears Redux, returns to /login

SECURITY BOUNDARY: A hidden button or blocked frontend route does not protect data — every endpoint must independently verify authentication, role and record ownership.

JULY SMRITI ARCHIVE · ASTROX

10

Authentication

04 · PUBLIC WEBSITE

Homepage & Public Archive

11

Homepage sequence

• Cinematic hero with rotating archival imagery and primary calls to action
• Trust strip: community submitted, admin verified, consent-based, sensitive data protected
• Archive category overview + featured records with dates, locations, tags, verification language
• Timeline preview, Stories preview, support preview and missing-person preview
• Five-step verification explanation, presentation statistics and evidence CTA

Public archive behavior

• Search across title, description, location and tags
• Filters by content type (photo, video, testimony, document) and location
• Verification badges and safe contributor attribution
• Cloudinary poster generation for video cards — playback deferred to the detail page
• Detail page: media, source context, date, place, tags and related navigation
• Only administrator-approved public derivatives are ever returned

JULY SMRITI ARCHIVE · ASTROX

11

Public Website

04 · PUBLIC WEBSITE

Feature: Movement Timeline

12

43

Chronology entries

• Deliberately maintained as editorial data rather than a live backend feed — bilingual titles, locations and summaries

Interaction features

• Region filters and category tags
• Same-day grouping of events
• Expandable source notes per entry

Editorial methodology

• A methodology block explains that overall casualty figures differ by source
• The timeline avoids forcing one unqualified number, preserving source attribution throughout

[ Screenshot placeholder — Timeline page to be inserted here ]

JULY SMRITI ARCHIVE · ASTROX

12

Public Website

04 · PUBLIC WEBSITE

Feature: Stories & Aynaghor

13

Movement summary & Hero Stories

• Concise movement summary: quota/BCS recruitment dispute, escalation, crackdown, changed ruling, one-point demand, 5 August and the renewed focus on secret detention
• Hero Stories present Abu Sayed, Mir Mahfuzur Rahman Mugdho, Wasim Akram, Tahir Zaman Priyo and unnamed volunteers

Aynaghor section

• Explains the term and presents returned individuals
• An identity-protected family account and a records-and-truth entry
• Each detail page includes a source link and an editorial note separating public reporting, testimony, allegation and unresolved status
• Images are replaceable project assets; anonymous entries intentionally have no image or name

JULY SMRITI ARCHIVE · ASTROX

13

Public Website

04 · PUBLIC WEBSITE

Feature: Voices of July & About

14

Voices of July

• Separates public solidarity from contested public records
• Each card: name/group, role, concise position, context and source
• "Context, not a blacklist" disclaimer with right-of-reply principles
• New entries require original posts/recordings, full context and properly licensed images

About page

• Organises mission, responsibilities and verification policy
• Explains the privacy policy and content guidelines
• States what the archive promises, what contributors must do, and what must remain private
• Contact anchors for follow-up questions

JULY SMRITI ARCHIVE · ASTROX

14

Public Website

05 · EVIDENCE CONTRIBUTION

Four-Stage Submission Form

15

1

Your record

Title, detected content, summary, story/testimony, files. Title ≥4 chars, summary ≥20, story ≥30 when used.

2

Source / context

Event date, approximate location, source type, private source notes. Date & location required.

3

Identity / publication

Anonymous / pseudonym / public identity; permissions; visibility; protection controls.

4

Confirm & send

Review, consent, accuracy and privacy confirmation — all three required.

20

Max files

1 GB

Total size

250 MB per file · multi-select, drag/drop, duplicate detection, preview & removal

JULY SMRITI ARCHIVE · ASTROX

15

Evidence Contribution

05 · EVIDENCE CONTRIBUTION

Privacy Controls & Submission Lifecycle

16

Contributor privacy controls

• Remove device / location metadata
• Redact private names and contacts
• Blur identifiable faces before publication
• Mask identifiable voices before publication
• Allow or deny authorised admin follow-up
• Ask-before-publishing, may-publish-after-approval, or private-preservation-only
• Public-archive eligibility, restricted archive, or administrator-only visibility

SUBMISSION LIFECYCLE

1. Form validates locally; creates multipart FormData

2. Files appended repeatedly under field name files

3. Privacy controls & detected content types serialised as JSON

4. Backend stores private originals and returns an ID

5. Local status set to "Pending admin review"

6. Administrator reviews source, privacy and consent

7. Approved derivative published, or record stays private

PUBLICATION BEHAVIOR: Submission never means automatic publication. Administrators review source context and requested privacy processing before any public derivative is released.

JULY SMRITI ARCHIVE · ASTROX

16

Evidence Contribution

06 · SUPPORT WORKFLOW

Private Support Request & Room

17

Support Room behavior

• Loads the connected room, case status, assignment and message history; merges backend responses with local preview state so new messages appear immediately
• Polls periodically for updates while the route is open; sends text plus an optional attachment via multipart FormData
• Previews images, shows downloadable/protected document cards, and visually distinguishes user vs. admin messages
• Preserves private scope — only the requester and authorised support admins can read the room. Not an emergency hotline: critical real-time response needs a separate emergency channel.

JULY SMRITI ARCHIVE · ASTROX

17

Support Workflow

06 · SUPPORT WORKFLOW

Administrator Support Handling

18

1

Open case queue, filter by urgency/status

2

Review requester context and private contact

3

Preview only protected files returned by the backend

4

Reply within the same case conversation

5

Request only minimum necessary medical documentation

6

Verify or reject each document with an accountable result

7

Keep documents & conversations outside the public archive

Delivery & privacy

• Protected files are delivered via authenticated streaming or short-lived signed URLs — never permanent public document links

JULY SMRITI ARCHIVE · ASTROX

18

Support Workflow

07 · MISSING-PERSON WORKFLOW

Public Directory & Private Report

19

Public directory

• Only verified public reports appear in the directory
• Search uses public name, area and clothing/identifying details
• Cards show approved photo, age, last-seen place/date and status
• Private contacts, unverified sightings and unsafe fields are excluded

Private missing-person report

• Identity: full name, optional age, reporter relationship
• Last seen: date cannot be in the future; address/landmark required
• Map: optional lat/long from address search, click-to-pin or current location
• Photo: optional image up to 10 MB with preview/replace/remove
• Declarations: publication consent and good-faith accuracy confirmation

Possible sighting

• Available from a public profile to authenticated users — collects date, time, place, optional map coordinates, details and a safe private contact
• Combines date and time for validation and rejects future sightings
• Stores reporter identity/contact and exact coordinates privately until an administrator reviews the record
• Local account tracking shows the submitted sighting and its status

JULY SMRITI ARCHIVE · ASTROX

19

Missing-Person Workflow

07 · MISSING-PERSON WORKFLOW

Map Modes & Administrator Verification

20

COORDINATE SAFETY: A fixed edge case ensures blank values never become 0,0. The backend must still validate numeric ranges and control coordinate visibility.

Administrator verification

• Backend-only report queue with search and status filters
• Private detail fetch for reporter identity, relationship and contact
• Last-seen map preview plus every submitted sighting map
• Approval, request-information and rejection actions — notes required for the latter two
• Public responses are created from safe fields only

JULY SMRITI ARCHIVE · ASTROX

20

Missing-Person Workflow

08 · USER WORKSPACE

User Account Workspace

21

OWNERSHIP: A USER can access only their own private records — ownership checks are enforced by the backend, never inferred from route parameters. /wallets redirects to /account; no separate wallet product is exposed.

JULY SMRITI ARCHIVE · ASTROX

21

User Workspace

09 · ADMIN WORKSPACE

Administrator Workspace Overview

22

Purpose-built queues instead of one generic dashboard — evidence, support, missing persons, publication and users each get a dedicated, accountable review flow.

Dashboard

Stats, recent activity & queue counts from /api/admin/dashboard

Submission Review

Search, filter, protected preview & decisions

Support Cases

Prioritise, message, verify documents

Missing Reports

Normalise shapes, private detail, status changes

Archive Manager

Publish/unpublish redacted derivatives

Users & Settings

Roles, access removal, local preferences

Empty backend data remains empty rather than being replaced with fabricated admin records.

JULY SMRITI ARCHIVE · ASTROX

22

Admin Workspace

09 · ADMIN WORKSPACE

Feature: Submission Review

23

Review queue

• Search by ID, title, contributor or content type; filter by status
• Open a protected modal with record context, written testimony, files, identity preference, permission and risk details
• Preview protected image, video, audio and document URLs returned by the backend

Decision actions

• Mark source checked, request information, approve or reject
• Clear notes are required for rejection and information requests
• privacyConfirmed is always sent — approval does not publish the original

JULY SMRITI ARCHIVE · ASTROX

23

Admin Workspace

09 · ADMIN WORKSPACE

Feature: Support Cases & Missing Reports

24

Support cases

• List and prioritise cases by urgency/status
• Case detail: requester information, history, messages and documents
• Send administrator messages with optional files
• Verify or reject individual medical documents — a whole folder is never verified by default

Missing reports

• Normalises different backend report shapes for resilient display
• Loads private details only when a report is opened
• Shows reporter details, missing-person details, map and private sightings
• Changes status to verified missing, information required or rejected
• Includes assignment and sighting-status endpoint support

JULY SMRITI ARCHIVE · ASTROX

24

Admin Workspace

09 · ADMIN WORKSPACE

Feature: Archive Manager, Users & Settings

25

Archive manager

• Lists backend archive candidates and publication states
• Handles images and Cloudinary video poster/playback URLs
• Previews the redacted public derivative, never the private original
• Requires a publication/correction note for accountable maintenance
• Publishes an approved version or unpublishes for further review

Users & settings

• All Users: loads backend records, searches/filters roles, views identity, changes USER/ADMIN, removes access
• Account removal revokes access without silently deleting preserved archive records or audit history
• Admin Settings: decision notes, privacy confirmation, original-file publication blocking, urgent/missing-report alerts, reminder timing, interface language
• Local settings illustrate desired policy — the server must enforce real controls

JULY SMRITI ARCHIVE · ASTROX

25

Admin Workspace

09 · ADMIN WORKSPACE

Administrator Decision Model

26

ACCOUNTABILITY: Every sensitive administrator action should record actor, time, decision, reason and affected record in a server-side audit log.

JULY SMRITI ARCHIVE · ASTROX

26

Admin Workspace

10 · LANGUAGE & OFFLINE

English / Bangla Language System

27

LanguageContext

• Stores the selected language (julySmritiLanguage)
• Sets the document lang attribute and Bangla body class
• Exposes t(key) for dictionary entries and pick(english, bangla) for paired copy
• Uses Noto Bengali font fallbacks for Bangla readability

Google Website Translator

• Loads the translation script once; initialises only English and Bangla
• Uses the googtrans cookie to request /en/bn
• Retries until the hidden translator select is available; reloads when returning to English
• Falls back to the hand-written dictionary if the script is blocked

OPERATIONAL DEPENDENCY: Full-page automatic translation depends on an external script, network access, cookies and CSP permissions. Critical legal/privacy copy keeps maintained local Bangla text.

JULY SMRITI ARCHIVE · ASTROX

27

Language System

10 · LANGUAGE & OFFLINE

Offline & Browser-Local State

28

Offline workflow

• useOnlineStatus listens for browser online/offline events
• When offline, evidence/support/missing-person submissions save as local drafts instead of a failed request
• Drafts store text and file names, not file bytes — users reopen a form from Saved Drafts and must reselect attachments
• There is no background queue, retry scheduler, service worker sync or conflict resolution in the current frontend

JULY SMRITI ARCHIVE · ASTROX

28

Offline State

11 · ARCHITECTURE

Technology & Data Architecture

29

Request behavior

• Authenticated fetch calls send credentials with every request; multipart forms carry mixed evidence, support documents and photos; timestamps normalised for Asia/Dhaka display

JULY SMRITI ARCHIVE · ASTROX

29

Architecture

11 · ARCHITECTURE

API Surface — 47 Operations

30

API CONTRACT: Protected routes require authenticated cookies, exact-origin CORS with credentials, authoritative role checks, ownership checks, server-side file validation, and privacy-safe response shaping.

JULY SMRITI ARCHIVE · ASTROX

30

API Surface

11 · ARCHITECTURE

Privacy, Security & Editorial Safety

31

Protective controls

• Private originals are never served as public archive files
• Contributor contacts and anonymous/pseudonymous identities are enforced server-side
• Metadata removal, face blur, voice masking and redaction happen before publication
• Medical documents and support conversations never enter the public archive
• Unverified sightings remain private and separately reviewed
• Protected files use authenticated streaming or short-lived signed URLs
• Rate limits cover authentication, submissions, support messages and sightings
• MIME signatures, extensions, counts and file sizes are validated on the server

EDITORIAL DISTINCTION

A source-attributed record documents what was reported or said.

It does not automatically establish a court finding, nor prove that every group member shared every statement. Political and historical records retain source, context, uncertainty and correction notes throughout the archive.

Central rule reiterated: only reviewed public derivatives are published; private originals stay protected.

JULY SMRITI ARCHIVE · ASTROX

31

Privacy & Security

12 · SETUP & DEPLOYMENT

Installation & Configuration

32

FRONTEND

cd frontend

npm install

cp .env.example .env

npm start

BACKEND

cd backend

npm install

# configure service environment

npm run dev

CORS & cookies: allow the exact frontend origin (not a wildcard) with credentials · use httpOnly cookies · match SameSite/Secure to topology · verify /api/user-details.

JULY SMRITI ARCHIVE · ASTROX

32

Installation

12 · SETUP & DEPLOYMENT

Validation, Deployment & Operations

33

Quality checks

• Production build, automated tests and end-to-end USER/ADMIN journeys
• Test route guards by calling protected APIs directly, not only through navigation
• Verify mobile drawers, modal focus, future-date validation, map fallbacks and time formatting
• Test protected files, publication derivatives and public-response field filtering
• Confirm English/Bangla behavior with and without external translation

Deployment

• Serve the React build over HTTPS; rewrite unknown SPA routes to index.html
• Configure production API URL, cookie/CORS rules, CSP and restricted Maps keys
• Disable demo fallback and remove placeholder statistics from public production pages
• Monitor upload failures, queue age, support response time, unresolved reports and publication changes

ROADMAP — RECOMMENDED NEXT PHASES

Backend schemas & audit logging · Server-driven pagination & search · Notifications for reviews & messages · Offline sync with defined encryption/conflict rules · Expanded maintained Bangla copy · Automated role/privacy tests · Editorial CMS workflow · Privacy-respecting analytics

JULY SMRITI ARCHIVE · ASTROX

33

Deployment

APPENDIX

Feature Status & Screenshot Plan

34

Screenshot placement plan

• Use sequential filenames — 01-home.png, 02-archive.png, 03-timeline.png, 04-stories.png — continuing through user and admin workflows
• Each feature slide in this deck already reserves a dashed placeholder area for its matching screenshot
• Keep screenshots free of real private contacts or medical records before inserting them here

JULY SMRITI ARCHIVE · ASTROX

34

Appendix

জুলাই স্মৃতি আর্কাইভ

Preserve memory. Protect people.

Verify before publishing.

Thank you

Team Astrox · Sombit Majumdar · Zishan Rezwan · Takwa Jahin Feeza

JULY SMRITI ARCHIVE · COMPLETE PROJECT DOCUMENTATION