Nexgn

<<<<<<< HEAD

Nexgn

Nexgn is a digital signature and document workflow platform designed to enable secure, efficient, and legally compliant signing processes for individuals and organizations. It provides a centralized system for managing documents, approvals, and signatures across distributed environments.

Overview

Organizations increasingly rely on digital processes to manage agreements, approvals, and documentation. Traditional methods involving physical signatures or fragmented tools create delays, security risks, and operational inefficiencies.

Nexgn addresses these challenges by offering a structured platform that digitizes the entire signing lifecycle, from document preparation to final execution and storage.

Problem Statement

Document signing workflows often face several limitations:

Manual signing processes that slow down execution Lack of centralized tracking for document status Security concerns related to document integrity Limited visibility into approval and signing progress Difficulty in managing multiple stakeholders across locations

These issues lead to delays, reduced transparency, and operational friction.

Solution

Nexgn provides a digital signature platform that enables secure document handling, structured workflows, and real time tracking.

The platform allows users to upload documents, define signers, assign roles, and manage the signing process within a controlled environment. It ensures that documents are securely handled while maintaining a clear audit trail of all actions.

Key Capabilities

Secure digital signature workflows with role based participation Centralized document management and storage Real time tracking of document status and signer actions Audit trail for all document activities Multi user collaboration across signing processes Configurable workflows for different document types

Core Modules

Document management module for uploading, organizing, and accessing files

Signing workflow module for defining signers, roles, and approval sequences

User management module for handling access, permissions, and roles

Tracking and audit module for monitoring document status and maintaining history

Administrative module for system level configuration and control

Target Users

Businesses managing contracts and agreements Startups requiring efficient approval workflows Legal and compliance teams Operations teams handling documentation processes

System Design

Nexgn follows a layered architecture to ensure scalability and reliability.

Presentation layer for user interaction and document workflows Application layer for API management and request handling Business logic layer for workflow orchestration and validation Data layer for document storage and metadata management Security layer for authentication, authorization, and data protection

Technology Stack

Frontend React based interface for document interaction

Backend Node.js with Express for API and workflow processing

Database Structured storage for document metadata and user data

Storage Secure file storage for documents

Authentication Token based authentication for secure access

Getting Started

Clone the repository

git clone https://github.com/NoCapCode-tm/Nexgn.git cd Nexgn

Install dependencies

npm install

Configure environment variables

Create a .env file with required configuration such as database connection, storage configuration, and authentication secrets

Run the application

npm run dev

Use Cases

Digital contract signing for businesses Internal approval workflows for organizations Remote document execution across distributed teams Secure handling of legal and operational documents

Future Scope

Advanced compliance features and regional regulations support Integration with external document and storage platforms AI assisted document processing and validation Multi tenant architecture for enterprise scale Mobile optimized signing experience

Contribution

Contributions should focus on maintaining secure, scalable, and structured workflows.

Ensure adherence to security best practices Maintain consistency in workflow logic Provide clear documentation for new features Submit pull requests with defined context and testing

About

Nexgn is built to simplify and standardize digital document execution. It focuses on delivering secure, transparent, and scalable signing workflows that align with modern organizational needs.

Nexgn Web App

Nexgn Web App is the frontend application for Nexgn, a SaaS platform for digital document signing and document workflow management.

The application provides the primary user-facing experience for creating, preparing, sending, signing, managing, and tracking documents, along with reusable templates, contacts, team management, billing, integrations, notifications, security, and account settings.

This repository contains the frontend application only.

1. Product Overview

Nexgn is designed to simplify digital document workflows for individuals and organizations.

The web application provides a unified workspace where users can:

Manage documents
Prepare documents for signing
Send documents for signatures
Sign documents
Track document status
Manage signers
Maintain contacts
Create and reuse templates
Manage teams and permissions
Configure account and security settings
Connect external integrations
Manage subscriptions and billing
Review activity and audit information
Manage notifications
Restore or manage archived content

The frontend communicates with the Nexgn backend through REST-based API services.

2. Frontend Responsibilities

The Nexgn Web App is responsible for the presentation layer and user interaction layer of the product.

Its responsibilities include:

Rendering the product interface
Managing client-side navigation
Handling user interaction
Presenting documents and signing interfaces
Managing application state at the page/component level
Performing client-side form validation
Displaying loading and empty states
Handling API requests
Displaying success and error feedback
Managing responsive layouts
Supporting light/dark presentation
Providing product onboarding and guided tours
Providing document and template preparation interfaces
Managing authenticated application access

Business-critical authorization, persistence, document processing, subscription processing, and other server-side responsibilities remain outside the frontend.

3. Technology Stack

Core

Technology	Purpose
React	Frontend UI framework
Vite	Development and build tooling
React Router	Client-side routing
JavaScript / JSX	Application development
CSS / CSS Modules	Styling and component presentation

UI & Interaction

Technology	Purpose
Lucide React	Interface icons
React Icons	Additional iconography
React Toastify	User notifications
React Signature Canvas	Signature input
React Quill	Rich text/template content
Axios	HTTP/API communication

Document & PDF

Technology	Purpose
pdfjs-dist	PDF rendering
PDF viewer components	Document preview and interaction
React Signature Canvas	Signature capture

Payments

Technology	Purpose
Razorpay Checkout	Subscription/payment interface

Deployment

The frontend is designed for a static web deployment model and currently uses a GitHub Pages-oriented build/deployment setup.

Production application:

https://sign.nexgn.cloud

4. High-Level Architecture

                         Nexgn Web App
                              │
                              │
                     React Application
                              │
              ┌───────────────┴───────────────┐
              │                               │
        Application UI                  Client Navigation
              │                               │
      ┌───────┼────────┐                      │
      │       │        │                      │
    Pages  Components  Hooks              React Router
      │       │        │
      └───────┼────────┘
              │
          API Layer
              │
            Axios
              │
              ▼
        Nexgn Backend API
              │
              ▼
      Backend Services / Data

The frontend should be treated as the presentation and interaction layer of Nexgn.

It does not represent the authoritative source for persistent business data.

5. Application Structure

The primary frontend source structure is organized around application responsibilities.

src/
│
├── app.jsx
├── config.js
├── main.jsx
│
├── assets/
│
├── components/
│   ├── common/
│   ├── Layout/
│   ├── overlays/
│   ├── routing/
│   └── ui/
│
├── hooks/
│
└── pages/
    ├── auth/
    ├── contacts/
    ├── dashboard/
    ├── documents/
    ├── pricing/
    ├── settings/
    ├── signrequest/
    └── templates/

The structure separates:

Application entry points
Reusable components
Layout components
Page-level features
Hooks
Assets
Authentication
Document management
Templates
Contacts
Settings
Signing interfaces

6. Application Entry Points

`main.jsx`

The application entry point initializes the React application.

Responsibilities include:

Creating the React root
Enabling React Strict Mode
Initializing BrowserRouter
Rendering the main application

Conceptually:

Browser
   │
   ▼
main.jsx
   │
   ▼
BrowserRouter
   │
   ▼
App

`app.jsx`

App.jsx acts as the application's routing and high-level composition layer.

It coordinates:

Public routes
Protected routes
Product tour
Application-wide announcement UI
Toast notifications
Theme handling

The application currently separates public and authenticated application areas.

7. Environment Configuration

The frontend uses Vite environment variables for environment-specific configuration.

Current configuration includes:

VITE_API_URL
VITE_RAZORPAY_KEY_ID

These values are consumed through the frontend configuration module.

Example conceptual configuration:

export const API_URL = import.meta.env.VITE_API_URL;
export const RAZORPAY_ID = import.meta.env.VITE_RAZORPAY_KEY_ID;

Environment-specific values should be provided through the appropriate deployment configuration.

Sensitive credentials and secrets should never be committed to the frontend source repository.

8. Routing Architecture

Nexgn uses React Router for client-side navigation.

Public Routes

The application contains public-facing routes for authentication and other accessible product pages.

/
├── Login
├── /signup
├── /forgot
├── /reset/:id
├── /mail-invite/:email
├── /invite-deny/:email
├── /2fa/:id
├── /verify/:id
└── /pricing

These routes support authentication, invitations, password recovery, verification, and pricing.

9. Protected Application

Authenticated application pages are placed behind the frontend protected-route layer.

The protected application contains the primary Nexgn workspace.

Protected Application
│
├── Dashboard
├── Documents
├── Sign Yourself
├── Sign Request
├── Request Signature
├── Contact Book
├── Settings
├── Templates
├── Document Editor
├── Template Creator
├── Document Viewer
└── Signing Viewer

The frontend verifies the user's active session before rendering protected application content.

10. Authentication Experience

The authentication module provides the user-facing authentication experience.

It includes:

Login
Signup
Email verification
Invitation handling
Password recovery
Password reset
Two-factor authentication
First-login experience

Relevant pages include:

pages/auth/
├── Firstlogin.jsx
├── ForgotPassword.jsx
├── Invite-Deny.jsx
├── Invite.jsx
├── Login.jsx
├── SetNewPassword.jsx
├── SignUp.jsx
└── Verify2FA.jsx

The frontend does not independently determine whether an account should be authorized to access protected resources.

The backend remains responsible for authoritative authentication and authorization.

11. Protected Route

The protected-route layer prevents unauthenticated users from entering the authenticated application interface.

At a high level:

User navigates to protected page
          │
          ▼
Session verification
          │
      ┌───┴───┐
      │       │
 Valid      Invalid
      │       │
      ▼       ▼
Render     Redirect
Application  Login

A loading state is displayed while session verification is taking place.

12. Product Tour

Nexgn includes a guided product tour to introduce users to the primary application areas.

The tour provides contextual guidance for areas such as:

Dashboard
Signers
Documents
Contact Book
Templates
Settings

The tour supports:

Starting
Restarting
Skipping
Moving forward
Moving backward
Completing
Target highlighting
Responsive target positioning

Tour completion is tracked on the client side for the relevant user experience.

13. Application Layout

The application uses a shared layout system.

Major layout components include:

components/Layout/
├── AuthLayout.jsx
├── Layout.jsx
├── LoadingScreen.jsx
├── MobileNavbar.jsx
├── Sidebar.jsx
└── Topbar.jsx

The layout system provides:

Desktop navigation
Mobile navigation
Sidebar
Topbar
Loading states
Responsive structure
User controls
Application navigation

14. Navigation

The sidebar provides navigation across the primary product areas.

Depending on viewport size, Nexgn adapts navigation between:

Desktop sidebar
Tablet/mobile navigation
Mobile topbar

The navigation system is designed to maintain consistent access to core product functionality across device sizes.

15. Dashboard

The Dashboard provides an overview of the user's document activity.

The interface presents information such as:

Total documents
Signed documents
Pending documents
Expired documents
Recent document activity
Document-related actions

The dashboard also provides entry points into common workflows.

The UI uses reusable statistical cards and responsive layouts.

16. Document Management

The Documents module provides the central document management interface.

Users can interact with:

Documents they have created
Documents assigned to them
Document status
Search
Status filtering
Pagination
Document viewing
Document actions

Supported document states presented by the UI include concepts such as:

Pending
Sent
Viewed
Partially Signed
Signed / Completed
Expired
Cancelled

The exact authoritative status is supplied by the backend.

17. Document Preparation

Nexgn provides a document preparation interface for preparing documents before signing.

The Document Editor provides capabilities such as:

PDF preview
Page navigation
Document metadata
Signer selection
Signature fields
Text fields
Number fields
Name fields
Email fields
Date fields
Field positioning
Field resizing
Field deletion
Document submission

The editor is designed to allow users to visually prepare a document for the signing process.

18. Signing Experience

Nexgn provides dedicated interfaces for signing documents.

Relevant application areas include:

Sign Yourself
Sign Request
Sign Viewer
Document Viewer

The signing UI provides the interaction layer for:

Viewing the document
Entering required information
Providing signatures
Navigating document pages
Reviewing signing information
Completing signing-related actions

The frontend is responsible for presenting the signing experience.

Authoritative signing validation and document processing are handled by backend services.

19. Document Viewer

The Document Viewer provides a read-oriented document experience.

It supports:

PDF rendering
Page previews
Page navigation
Document information
Signer information
Signature field visualization
Document status context

The viewer is distinct from the document preparation editor.

Editor

Used to prepare documents.

Viewer

Used to inspect prepared documents.

Sign Viewer

Used for the signing experience.

This separation keeps the document lifecycle interfaces focused on their respective user tasks.

20. Contacts

The Contact Book provides reusable signer/contact management.

Users can:

View contacts
Add contacts
Review contact information
Select contacts during document workflows
Manage contact records

Primary components include:

pages/contacts/
├── AddContactForm.jsx
├── ContactBook.jsx
└── ContactDetailsModal.jsx

The Contact Book is designed to reduce repeated entry of signer information.

21. Templates

Templates provide reusable document structures for recurring workflows.

The frontend includes interfaces for:

Creating templates
Uploading template documents
Naming templates
Adding notes
Viewing templates
Managing templates
Searching templates
Archiving templates
Restoring templates
Removing templates

Template-related pages include:

pages/templates/
├── TemplateCreate.jsx
├── Templates.jsx
├── TemplatesList.jsx
├── TemplatesPage.jsx
└── Templateview.jsx

The template experience is separated into creation, management, and viewing interfaces.

22. Template Creation

The template creation experience allows users to establish reusable document structures.

The UI supports:

Template name
PDF upload
Document title
Optional notes
Template preparation

Template preparation is visually oriented and designed to make recurring document workflows easier to manage.

23. Settings

Settings provide centralized account and workspace configuration.

The current settings structure includes:

Settings
├── Account
├── Profile
├── Security
├── Billing
├── Integrations
├── Notifications
├── Audit Logs
├── Team Management
└── Recycle Bin

This keeps administrative and account-level functionality separate from everyday document workflows.

24. Profile Management

The Profile section provides user profile management.

The interface supports:

Name
Email display
Phone number
Profile picture
Profile updates

Email is presented as a non-editable account identifier in the current interface.

25. Security

The Security section provides account security controls.

Current UI capabilities include:

Password update
Two-factor authentication management
Two-factor verification interface
QR-code based setup
Manual setup information
Verification-code entry

The frontend provides the user experience while the backend remains responsible for authoritative security operations.

26. Team Management

Team Management provides organization-level user management.

The current interface supports:

Viewing team members
Inviting sub-admin users
Managing sub-admin access
Managing permissions
Removing team members

The permissions interface organizes access into functional categories such as:

Dashboard
├── View
├── Analytics
└── Reports Export

Templates
├── View
├── Create
└── Delete

Documents
├── View
├── Upload
├── Edit
├── Delete
├── Send for Signature
├── Cancel Requests
└── Archive

Contact Books
├── View
├── Add
├── Edit
└── Delete

These controls represent the frontend permission-management experience.

Actual authorization remains a backend responsibility.

27. Integrations

The Integrations section currently provides integration management for supported external services.

The current frontend includes Google Drive integration.

The interface provides:

Connection status
Connect action
Disconnect action
Confirmation before disconnecting
Integration state feedback

The frontend does not contain the provider's internal authorization implementation.

28. Notifications

The Notifications section provides user-facing notification preferences.

Preferences are organized into:

Realtime Notifications

Document signed
Signature request
Document expired
Security events

Email Notifications

Document signed
Signature request
Document expired
Security events

The UI provides:

Toggle controls
Save functionality
Loading state
Success/error feedback

Notification delivery itself is outside the frontend responsibility.

29. Billing

The Billing area provides subscription-related user interfaces.

The frontend supports product experiences around:

Plans
Subscription information
Payment information
Billing configuration
Payment checkout

Razorpay Checkout is integrated into the frontend for payment interaction.

Subscription state and payment verification remain backend responsibilities.

30. Pricing

The Pricing page presents available Nexgn plans.

It provides a user-facing comparison of subscription options and entry points into the subscription process.

Pricing configuration should be considered a product/business configuration rather than hard-coded frontend business authority.

31. Recycle Bin

The Recycle Bin provides a centralized interface for previously removed/archived application content.

Current UI coverage includes:

Documents
Templates
Filtering
Restore
Delete actions
Confirmation before destructive actions
Empty state
Loading state

The frontend reflects the state returned by backend APIs.

32. Responsive Design

Nexgn is designed for desktop, tablet, and mobile environments.

The current responsive system broadly uses:

Desktop
≥ 1180px

Tablet
769px – 1179px

Mobile
≤ 768px

The interface adapts:

Navigation
Sidebar
Topbar
Tables
Cards
Document interfaces
Forms
Settings
Templates
Notifications
Action menus

The goal is to maintain usability without requiring a separate mobile application.

33. Theme System

Nexgn supports dark-mode presentation.

Theme-related functionality includes:

System theme detection
Dark-mode styling
Light-mode styling
Persistent client-side theme behavior
Dark-mode specific component styles

The frontend uses theme-specific CSS variables and class-based styling.

34. Loading States

Loading states are used throughout the application to prevent abrupt UI transitions and communicate asynchronous activity.

Common loading patterns include:

Full-page loading screens
Skeleton components
Button loading states
Page-level loading states
Document loading
Template loading
API request loading

Relevant reusable components include:

components/Layout/LoadingScreen.jsx
components/common/Skeleton.jsx

35. Empty States

The application provides dedicated empty states for areas where no data is available.

Examples include:

No documents
No templates
Empty recycle bin
Empty contacts
Empty lists

Empty states generally provide:

Contextual iconography
Explanation
Primary action where appropriate

This helps users understand what to do when a workspace has not yet been populated.

36. Error & Feedback Handling

The frontend uses toast notifications and UI feedback to communicate API results.

Typical feedback categories include:

Successful actions
Failed API requests
Validation errors
Authentication failures
Document errors
Template errors
Integration errors
Security-related actions

React Toastify is used for application-level notification feedback.

37. API Communication

Axios is used for communication with the Nexgn backend.

The frontend generally communicates through the configured API base URL.

Conceptually:

React Component
      │
      ▼
Axios Request
      │
      ▼
Nexgn API
      │
      ▼
Response
      │
      ▼
UI State Update
      │
      ▼
User Feedback

The frontend should not be treated as the authoritative source of backend data.

38. Document & PDF Rendering

Nexgn uses PDF.js-based rendering for document visualization.

PDF functionality is used across:

Document preparation
Document viewing
Signing
Template viewing

The application can display:

Pages
Thumbnails
Document content
Interactive field overlays
Signature areas

PDF rendering and visual interaction are handled on the client where appropriate.

39. Signature Input

The frontend supports multiple signature interaction patterns.

The signing interface can provide signature-related inputs including:

Drawn signatures
Text-based signatures
Uploaded signature assets

The frontend captures the user's interaction and communicates the relevant information to the backend.

40. Reusable UI Architecture

Nexgn uses reusable components for common product patterns.

Examples include:

components/
├── common/
│   ├── Skeleton
│   └── TopAnnouncementBar
│
├── Layout/
│   ├── AuthLayout
│   ├── Layout
│   ├── LoadingScreen
│   ├── MobileNavbar
│   ├── Sidebar
│   └── Topbar
│
├── overlays/
│   ├── AlreadySignedOverlay
│   ├── DocumentSavedAnimation
│   ├── RevokedOverlay
│   └── SignerConsentOverlay
│
├── routing/
│   └── ProtectedRoute
│
└── ui/
    ├── ContactCard
    ├── DocumentsRow
    ├── PasswordStrengthMeter
    └── StatCard

This reduces duplication and keeps repeated UI patterns consistent.

41. Client-Side Hooks

Reusable application hooks are located under:

src/hooks/

Current hooks include:

useDarkMode.js
useSystemTheme.js
useWindowWidth.js

These hooks provide reusable behavior for:

Theme management
System theme detection
Responsive viewport handling

42. Application Assets

Static frontend assets are maintained under:

src/assets/

These include:

Logos
Background graphics
Avatars
Theme-specific images
Product UI graphics

Assets are consumed by application components and styles rather than being embedded into business logic.

43. Styling Architecture

Nexgn uses a combination of:

Global CSS
Page-specific CSS
CSS Modules
CSS variables
Responsive media queries

The styling system provides:

Shared typography
Shared spacing
Color variables
Responsive sizing
Dark-mode overrides
Component-level styling

The application also uses responsive clamp() values in several areas to provide fluid scaling on larger screens.

44. Design Language

The Nexgn frontend currently follows a product design language based around:

Clean SaaS layouts
Inter typography
Red as the primary product accent
Rounded cards and controls
Minimal interface density
Clear status indicators
Responsive layouts
Light/dark themes
Structured dashboard presentation

The exact visual system can evolve independently from the underlying product architecture.

45. Frontend Product Areas

At a product level, the application can be viewed as the following modules:

Nexgn Web App
│
├── Authentication
│
├── Dashboard
│
├── Documents
│   ├── Preparation
│   ├── Viewing
│   └── Signing
│
├── Sign Requests
│
├── Contacts
│
├── Templates
│
├── Team Management
│
├── Settings
│   ├── Account
│   ├── Profile
│   ├── Security
│   ├── Billing
│   ├── Integrations
│   ├── Notifications
│   ├── Audit Logs
│   ├── Team
│   └── Recycle Bin
│
└── Pricing

This structure represents the product surface rather than the backend's internal implementation.

46. Frontend vs Backend Responsibility

A clear separation is maintained between frontend and backend responsibilities.

Area	Frontend	Backend
UI rendering	✓
Navigation	✓
Form interaction	✓
Client-side validation	✓
Session presentation	✓	✓
Authentication authority		✓
Authorization authority		✓
Persistent data		✓
Document processing		✓
Signing validation		✓
Subscription authority		✓
Payment verification		✓
API services	Consumes	Provides
PDF visualization	✓
PDF generation/processing		✓
User feedback	✓
Database operations		✓

This separation prevents frontend code from becoming the source of truth for critical business rules.

47. Security Principles

The frontend follows several general security principles:

Do not store sensitive server credentials in the frontend
Do not treat client-side permissions as authoritative
Do not treat client-side validation as security validation
Use authenticated API requests for protected resources
Keep authentication state controlled by the application/backend
Avoid exposing internal server implementation details
Avoid logging sensitive information in production
Keep environment-specific configuration outside source code where appropriate

The frontend should be considered an untrusted client from a security perspective.

48. Development Principles

When extending the Nexgn Web App:

Prefer reusable components

If UI behavior appears in multiple places, consider extracting it into a reusable component.

Keep pages focused

Page components should coordinate page-level behavior rather than becoming repositories for unrelated application logic.

Keep backend authority intact

Do not duplicate backend business rules in the frontend unless necessary for user experience.

Preserve responsive behavior

New interfaces should work across:

Desktop
Tablet
Mobile

Maintain dark mode

New UI components should account for both supported presentation modes.

Provide user feedback

Important asynchronous actions should communicate:

Loading
Success
Failure

Avoid unnecessary API calls

Use appropriate state updates and refresh behavior rather than repeatedly requesting the same information.

49. Product Manager Perspective

From a Product Manager perspective, the frontend represents the primary product surface.

The main user journeys are:

Authentication
      ↓
Dashboard
      ↓
Create / Upload Document
      ↓
Prepare Document
      ↓
Request Signature
      ↓
Track Document
      ↓
Review / Sign
      ↓
Completed Document

Supporting journeys include:

Templates
Contacts
Team Management
Integrations
Billing
Security
Notifications
Audit Logs
Recycle Bin

The frontend should therefore be evaluated primarily through:

User experience
Workflow clarity
Task completion
Error recovery
Accessibility
Responsiveness
Consistency
Performance

50. Technical Lead Perspective

From a Technical Lead perspective, the frontend architecture should maintain:

Clear separation of concerns
Reusable components
Predictable routing
Consistent API communication
Responsive behavior
Maintainable CSS
Controlled client-side state
Clear frontend/backend boundaries
Minimal duplication
Stable product-wide patterns

Changes should avoid introducing page-specific implementations when an existing shared abstraction is appropriate.

51. Developer Perspective

A developer working on Nexgn should first identify:

Which product module is being changed
Which page owns the feature
Whether a reusable component already exists
Which backend endpoint supports the feature
Whether authentication is required
Whether permissions apply
Whether loading/error/empty states exist
Whether mobile behavior is supported
Whether dark mode is supported
Whether existing UI patterns can be reused

The frontend should remain aligned with the backend API contract.

52. QA Perspective

Frontend testing should cover at minimum:

Authentication

Login
Signup
Verification
Password recovery
Password reset
2FA

Documents

Document listing
Search
Filtering
Pagination
Preparation
Viewing
Signing
Status presentation

Templates

Creation
Upload
Viewing
Search
Archive
Restore
Removal

Contacts

Add
View
Manage

Settings

Profile
Password
2FA
Notifications
Integrations
Billing
Team management
Permissions
Recycle Bin

Responsive UI

Desktop
Tablet
Mobile

Themes

Light
Dark

Error Handling

API failure
Authentication failure
Invalid input
Empty data
Expired/invalid document state

53. Deployment Model

The Nexgn frontend is built as a web application using Vite.

The general deployment model is:

Source Code
    │
    ▼
Vite Build
    │
    ▼
Static Frontend Assets
    │
    ▼
Web Hosting / GitHub Pages
    │
    ▼
Nexgn Web Application

The production application is served through the Nexgn domain:

https://sign.nexgn.cloud

The frontend communicates with the configured Nexgn backend API.

54. Build & Development

Typical development workflow:

Install dependencies
        ↓
Configure environment
        ↓
Start development server
        ↓
Develop / Test
        ↓
Create production build
        ↓
Deploy

The exact deployment credentials, repository configuration, environment values, and infrastructure procedures should remain outside this public-facing README.

55. Source of Truth

The frontend is not the authoritative source for:

User authorization
Permissions
Document ownership
Signing validity
Subscription state
Payment state
Persistent data
Security enforcement

The backend is responsible for authoritative server-side state and validation.

The frontend should represent that state accurately and provide an appropriate user experience around it.

56. Architectural Boundary

The Nexgn frontend intentionally does not document or expose sensitive internal implementation details such as:

Internal backend algorithms
Database implementation details
Internal document-processing mechanisms
Signing-token mechanisms
Internal storage handling
Provider credentials
Secret environment values
Infrastructure credentials
Internal security implementation
Private deployment configuration
Internal service-to-service behavior

Those details belong to internal engineering documentation rather than the frontend product README.

57. Repository Maintenance

When making frontend changes:

Before development

Understand the affected product area
Review the existing component structure
Review related API usage
Identify existing shared components

During development

Follow existing naming conventions
Reuse existing styles where possible
Maintain responsive behavior
Handle loading and error states
Avoid unnecessary duplication

Before merge

Verify affected workflows
Test desktop behavior
Test mobile behavior
Test dark mode
Check API failure behavior
Check navigation
Check authentication boundaries
Check console errors
Verify no sensitive information has been committed

58. Frontend Quality Standards

A production-ready Nexgn frontend change should generally satisfy:

✓ Correct user experience
✓ Correct API integration
✓ Correct authentication boundary
✓ Responsive layout
✓ Dark-mode compatibility
✓ Loading state
✓ Error state
✓ Empty state where applicable
✓ Consistent UI
✓ Reusable components
✓ No sensitive configuration committed
✓ No unnecessary console logging
✓ No broken navigation
✓ No regression in existing workflows

59. Summary

The Nexgn Web App is the primary user-facing application for the Nexgn digital document signing platform.

Its architecture is organized around:

React
│
├── Authentication
├── Application Routing
├── Shared Layout
├── Dashboard
├── Documents
├── Signing
├── Contacts
├── Templates
├── Settings
├── Billing
├── Integrations
├── Notifications
└── Team Management

The frontend focuses on delivering a responsive, accessible, and consistent SaaS experience while relying on the Nexgn backend for authoritative application state, security, persistence, document processing, and business operations.

The separation between frontend presentation and backend authority allows the Nexgn Web App to evolve independently while maintaining a clear product and engineering boundary.

825de66632e908a3dae6c746c0d1dea6fa765a4f

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
public		public
src		src
.env.production		.env.production
.gitignore		.gitignore
README.md		README.md
desktop.ini		desktop.ini
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
temp_darkmode.css		temp_darkmode.css
temp_darkmode_out.css		temp_darkmode_out.css
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

Nexgn

Overview

Problem Statement

Solution

Key Capabilities

Core Modules

Target Users

System Design

Technology Stack

Getting Started

Use Cases

Future Scope

Contribution

About

Nexgn is built to simplify and standardize digital document execution. It focuses on delivering secure, transparent, and scalable signing workflows that align with modern organizational needs.

Nexgn Web App

1. Product Overview

2. Frontend Responsibilities

3. Technology Stack

Core

UI & Interaction

Document & PDF

Payments

Deployment

4. High-Level Architecture

5. Application Structure

6. Application Entry Points

main.jsx

app.jsx

7. Environment Configuration

8. Routing Architecture

Public Routes

9. Protected Application

10. Authentication Experience

11. Protected Route

12. Product Tour

13. Application Layout

14. Navigation

15. Dashboard

16. Document Management

17. Document Preparation

18. Signing Experience

19. Document Viewer

Editor

Viewer

Sign Viewer

20. Contacts

21. Templates

22. Template Creation

23. Settings

24. Profile Management

25. Security

26. Team Management

27. Integrations

28. Notifications

Realtime Notifications

Email Notifications

29. Billing

30. Pricing

31. Recycle Bin

32. Responsive Design

33. Theme System

34. Loading States

35. Empty States

36. Error & Feedback Handling

37. API Communication

38. Document & PDF Rendering

39. Signature Input

40. Reusable UI Architecture

41. Client-Side Hooks

42. Application Assets

43. Styling Architecture

44. Design Language

45. Frontend Product Areas

46. Frontend vs Backend Responsibility

47. Security Principles

`main.jsx`

`app.jsx`