Constants

API Constants

API_VERSION

Current API version number.

string

Value: "v1"

API_BASE_URL

Base URL for API endpoints.

string

Value: process.env.NEXT_PUBLIC_API_URL || "https://api.example.com"

API_TIMEOUT

Default timeout for API requests in milliseconds.

number

Value: 30000 (30 seconds)

HTTP_STATUS

HTTP status code constants.

object

Show properties

200

Request succeeded

201

Resource created successfully

204

Request succeeded with no content to return

400

Invalid request

401

Authentication required

403

Access denied

404

Resource not found

500

Server error

503

Service temporarily unavailable

Example

import { HTTP_STATUS } from '@/constants';

if (response.status === HTTP_STATUS.OK) {
  // Handle success
} else if (response.status === HTTP_STATUS.UNAUTHORIZED) {
  // Redirect to login
}

Authentication Constants

AUTH_TOKEN_KEY

LocalStorage key for authentication token.

string

Value: "auth_token"

REFRESH_TOKEN_KEY

LocalStorage key for refresh token.

string

Value: "refresh_token"

TOKEN_EXPIRY_KEY

LocalStorage key for token expiry timestamp.

string

Value: "token_expiry"

SESSION_TIMEOUT

Session timeout duration in milliseconds.

number

Value: 3600000 (1 hour)

REFRESH_THRESHOLD

Time before expiry to refresh token (milliseconds).

number

Value: 300000 (5 minutes)

Route Constants

ROUTES

Application route paths.

object

Show properties

string

Value: "/"

Value: "/login"

string

Value: "/register"

string

Value: "/dashboard"

string

Value: "/profile"

string

Value: "/settings"

string

Value: "/404"

Example

import { ROUTES } from '@/constants';
import { useRouter } from 'next/router';

function LoginButton() {
  const router = useRouter();
  
  const handleLogin = () => {
    router.push(ROUTES.LOGIN);
  };
  
  return <button onClick={handleLogin}>Login</button>;
}

UI Constants

BREAKPOINTS

Responsive design breakpoints in pixels.

object

Show properties

320

Extra small devices

640

Small devices (phones)

768

Medium devices (tablets)

1024

Large devices (desktops)

1280

Extra large devices

1536

Extra extra large devices

THEME_COLORS

Application color palette.

object

Show properties

string

Value: "#3B82F6"

string

Value: "#10B981"

string

Value: "#F59E0B"

string

Value: "#EF4444"

string

Value: "#F59E0B"

string

Value: "#10B981"

string

Value: "#3B82F6"

Z_INDEX

Z-index layering constants.

object

Show properties

Dropdown menus

Modal overlays

Tooltips

4000

Toast notifications

Example

import { BREAKPOINTS, THEME_COLORS, Z_INDEX } from '@/constants';
import styled from 'styled-components';

const Modal = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: ${Z_INDEX.MODAL};
  background-color: ${THEME_COLORS.PRIMARY};
  
  @media (min-width: ${BREAKPOINTS.MD}px) {
    max-width: 600px;
    margin: 0 auto;
  }
`;

Validation Constants

VALIDATION_RULES

Common validation rules and limits.

object

Show properties

254

Maximum email address length

Minimum password length

128

Maximum password length

Minimum username length

Maximum username length

500

Maximum bio/description length

Minimum phone number length

Maximum phone number length

REGEX_PATTERNS

Common regular expression patterns.

object

Show properties

RegExp

Email validation pattern

RegExp

URL validation pattern

RegExp

Phone number pattern (US)

RegExp

Username pattern (alphanumeric and underscore)

RegExp

Hexadecimal color code pattern

RegExp

Alphanumeric characters only

Example

import { VALIDATION_RULES, REGEX_PATTERNS } from '@/constants';

function validateUsername(username: string): boolean {
  return (
    username.length >= VALIDATION_RULES.USERNAME_MIN_LENGTH &&
    username.length <= VALIDATION_RULES.USERNAME_MAX_LENGTH &&
    REGEX_PATTERNS.USERNAME.test(username)
  );
}

function validateEmail(email: string): boolean {
  return (
    email.length <= VALIDATION_RULES.EMAIL_MAX_LENGTH &&
    REGEX_PATTERNS.EMAIL.test(email)
  );
}

Pagination Constants

DEFAULT_PAGE_SIZE

Default number of items per page.

number

Value: 20

MAX_PAGE_SIZE

Maximum allowed items per page.

number

Value: 100

PAGE_SIZE_OPTIONS

Available page size options for user selection.

number[]

Value: [10, 20, 50, 100]

File Upload Constants

MAX_FILE_SIZE

Maximum file upload size in bytes.

number

Value: 5242880 (5 MB)

ALLOWED_FILE_TYPES

Allowed file MIME types for upload.

object

Show properties

string[]

Value: ['image/jpeg', 'image/png', 'image/gif', 'image/webp']

string[]

Value: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']

string[]

Value: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']

Example

import { MAX_FILE_SIZE, ALLOWED_FILE_TYPES } from '@/constants';

function validateFile(file: File): { valid: boolean; error?: string } {
  if (file.size > MAX_FILE_SIZE) {
    return { valid: false, error: 'File too large (max 5MB)' };
  }
  
  const allAllowedTypes = [
    ...ALLOWED_FILE_TYPES.IMAGES,
    ...ALLOWED_FILE_TYPES.DOCUMENTS
  ];
  
  if (!allAllowedTypes.includes(file.type)) {
    return { valid: false, error: 'File type not allowed' };
  }
  
  return { valid: true };
}

Date & Time Constants

DATE_FORMATS

Common date format strings.

object

Show properties

string

Value: "MM/DD/YYYY"

string

Value: "MMMM DD, YYYY"

string

Value: "YYYY-MM-DD"

string

Value: "dddd, MMMM DD, YYYY"

string

Value: "hh:mm A"

string

Value: "HH:mm"

string

Value: "MM/DD/YYYY hh:mm A"

TIME_ZONES

Common time zone identifiers.

object

Show properties

string

Value: "America/New_York"

string

Value: "America/Los_Angeles"

string

Value: "UTC"

string

Value: "Europe/London"

Error Messages

ERROR_MESSAGES

Standardized error messages.

object

Show properties

string

Value: "This field is required"

string

Value: "Please enter a valid email address"

string

Value: "Password must be at least 8 characters"

string

Value: "Passwords do not match"

string

Value: "Network error. Please try again."

string

Value: "You are not authorized to perform this action"

string

Value: "The requested resource was not found"

string

Value: "An unexpected error occurred. Please try again later."

Example

import { ERROR_MESSAGES } from '@/constants';

function LoginForm() {
  const [errors, setErrors] = useState<Record<string, string>>({});
  
  const validate = (email: string, password: string) => {
    const newErrors: Record<string, string> = {};
    
    if (!email) {
      newErrors.email = ERROR_MESSAGES.REQUIRED_FIELD;
    } else if (!email.includes('@')) {
      newErrors.email = ERROR_MESSAGES.INVALID_EMAIL;
    }
    
    if (!password) {
      newErrors.password = ERROR_MESSAGES.REQUIRED_FIELD;
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  // ...
}

Utilities

Configuration

API Constants

API_VERSION

API_BASE_URL

API_TIMEOUT

HTTP_STATUS

Example

Authentication Constants

AUTH_TOKEN_KEY

REFRESH_TOKEN_KEY

TOKEN_EXPIRY_KEY

SESSION_TIMEOUT

REFRESH_THRESHOLD

Route Constants

ROUTES

Example

UI Constants

BREAKPOINTS

THEME_COLORS

Z_INDEX

Example

Validation Constants

VALIDATION_RULES

REGEX_PATTERNS

Example

DEFAULT_PAGE_SIZE

MAX_PAGE_SIZE

PAGE_SIZE_OPTIONS

File Upload Constants

MAX_FILE_SIZE

ALLOWED_FILE_TYPES

Example

Date & Time Constants

DATE_FORMATS

TIME_ZONES

Error Messages

ERROR_MESSAGES

Example

​API Constants

​API_VERSION

​API_BASE_URL

​API_TIMEOUT

​HTTP_STATUS

​Example

​Authentication Constants

​AUTH_TOKEN_KEY

​REFRESH_TOKEN_KEY

​TOKEN_EXPIRY_KEY

​SESSION_TIMEOUT

​REFRESH_THRESHOLD

​Route Constants

​ROUTES

​Example

​UI Constants

​BREAKPOINTS

​THEME_COLORS

​Z_INDEX

​Example

​Validation Constants

​VALIDATION_RULES

​REGEX_PATTERNS

​Example

​Pagination Constants

​DEFAULT_PAGE_SIZE

​MAX_PAGE_SIZE

​PAGE_SIZE_OPTIONS

​File Upload Constants

​MAX_FILE_SIZE

​ALLOWED_FILE_TYPES

​Example

​Date & Time Constants

​DATE_FORMATS

​TIME_ZONES

​Error Messages

​ERROR_MESSAGES

​Example

API Constants

API_VERSION

API_BASE_URL

API_TIMEOUT

HTTP_STATUS

Example

Authentication Constants

AUTH_TOKEN_KEY

REFRESH_TOKEN_KEY

TOKEN_EXPIRY_KEY

SESSION_TIMEOUT

REFRESH_THRESHOLD

Route Constants

ROUTES

Example

UI Constants

BREAKPOINTS

THEME_COLORS

Z_INDEX

Example

Validation Constants

VALIDATION_RULES

REGEX_PATTERNS

Example

Pagination Constants

DEFAULT_PAGE_SIZE

MAX_PAGE_SIZE

PAGE_SIZE_OPTIONS

File Upload Constants

MAX_FILE_SIZE

ALLOWED_FILE_TYPES

Example

Date & Time Constants

DATE_FORMATS

TIME_ZONES

Error Messages

ERROR_MESSAGES

Example