Skip to content

mathang292004-dev/test-code

BranchesTags

Repository files navigation

Think Argument - Production-Ready Next.js Application

A production-ready, enterprise-level application built with Next.js (App Router), TypeScript, Redux Toolkit, and Tailwind CSS. Designed for large-scale Application, long-term maintained applications.

Features

  • Next.js 16+ with App Router
  • React 19 (LTS)
  • TypeScript with strict mode enabled
  • Client-Side Rendering (CSR) first approach
  • Redux Toolkit for state management with typed hooks
  • Axios with centralized interceptors
  • Tailwind CSS + SCSS for styling
  • Comprehensive Code Quality Tools (ESLint, Prettier, Husky, Commitlint)
  • Security Scanning (vulnerability detection, secrets prevention, dependency auditing)
  • Pre-commit/Pre-push Hooks for automated quality checks
  • Authentication scaffolding (login, register, logout — ready for backend integration)
  • Co-located type definitions (shared types in interfaces/, page-specific types in page utils/)

Tech Stack

Technology Version Purpose
Next.js 16+ React framework with App Router
React 19.2+ UI library
TypeScript 5.9+ Type-safe JavaScript
Redux Toolkit 2.11+ State management
React Redux 9.2+ React bindings for Redux
Axios 1.13+ HTTP client
Tailwind CSS 4.1+ Utility-first CSS
Sass 1.97+ CSS preprocessor
Recharts 3.7+ Chart components
React Hook Form 7.71+ Form handling
ESLint 9+ Code linting
Prettier 3+ Code formatting
Husky 9+ Git hooks
Commitlint 18+ Commit message linting

Getting Started

Prerequisites

  • Node.js 18+ (LTS)
  • npm, yarn, or pnpm
  • Git

Installation

  1. Clone the repository:
git clone <repository-url>
cd think-argument-fe
  1. Install dependencies:
npm install
  1. Copy environment variables:
cp .env.example .env.local
  1. Update environment variables in .env.local:
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
  1. Run the development server:
npm run dev
  1. Open http://localhost:3000 in your browser.

Available Scripts

Command Description
npm run dev Start development server
npm run build Build for production
npm run start Start production server
npm run lint Run ESLint (all rules)
npm run lint:fix Fix ESLint errors
npm run lint:sonar Run SonarJS code quality checks only
npm run lint:security Run security vulnerability checks only
npm run security:check Check for dependency vulnerabilities
npm run format Format code with Prettier
npm run format:check Check code formatting
npm run type-check Run TypeScript type checking
npm run verify Run all checks (lint, format, type, build)
npm run clean Clean build artifacts

Folder Structure

src/
├── app/                          # Next.js App Router (pages + co-located components)
│   ├── cover/                    # Cover page
│   │   ├── page.tsx
│   │   ├── utils.ts
│   │   └── components/           # EnvironmentCard, GrantSection, TeamSection,
│   │                             # CTABannerSection, BannerSection
│   ├── explore-the-course/       # Explore the course page
│   │   ├── page.tsx
│   │   ├── utils/                # Data, types & all component prop interfaces
│   │   └── components/
│   │       ├── ExploreTheCourseHero/     # Hero section with CTA
│   │       ├── CourseOverviewSection/    # Tab-based overview (PillTabs expanded variant)
│   │       │   └── index.tsx
│   │       ├── ThinkArgumentsModules/    # Module flow diagram with arrow connectors
│   │       │   ├── index.tsx
│   │       │   └── ModuleCard.tsx
│   │       ├── PedagogyContent/          # Pedagogy items grid
│   │       │   ├── index.tsx
│   │       │   └── PedagogyCard.tsx
│   │       ├── HowItWorksContent/        # Step-by-step flow
│   │       │   ├── index.tsx
│   │       │   └── StepCard.tsx
│   │       ├── StudentOutcomesContent/   # Outcomes metrics grid
│   │       │   ├── index.tsx
│   │       │   └── OutcomeCard.tsx
│   │       ├── SampleCourseExercises/    # Tab-based exercises (PillTabs default variant)
│   │       │   ├── index.tsx
│   │       │   ├── LessonSidebar.tsx
│   │       │   └── ExercisePreview.tsx
│   │       ├── EducatorsSection/         # Video section with like/share
│   │       │   ├── index.tsx
│   │       │   └── VideoPlayer.tsx
│   │       └── ExploreTheCourseBanner/   # CTA banner
│   ├── login/                    # Login page
│   │   ├── page.tsx
│   │   └── components/           # LoginForm
│   ├── forgot-password/          # Forgot password page
│   │   ├── page.tsx
│   │   └── components/           # ForgotPasswordForm
│   ├── outcomes-impact/          # Outcomes & impact page
│   │   ├── page.tsx
│   │   ├── utils/                # Data & page-specific types
│   │   └── components/           # ThinkArgumentsSection, HabitsWeTeachSection,
│   │                             # ImpactOnLearningSection, SkillsApplicationSection,
│   │                             # TestimonialSection, NonprofitMissionSection,
│   │                             # HabitCard, StudyCard, FeatureCard, PillTabs,
│   │                             # Carousel, PerformanceChart
│   ├── quick-facts/              # Quick facts page
│   │   ├── page.tsx
│   │   ├── utils/                # Data & page-specific types
│   │   └── components/           # StatsCard, FoundationsList, AiSupportCard,
│   │                             # FacultyCarousel
│   ├── register/                 # Register page
│   │   ├── page.tsx
│   │   └── components/           # RegisterForm, Select, ToggleButton
│   ├── support/                  # Support & donations page
│   │   ├── page.tsx
│   │   ├── utils/                # Data & page-specific types
│   │   └── components/           # DonationSection
│   ├── updates/                  # Updates page
│   │   ├── page.tsx
│   │   ├── utils/                # Data, types & constants
│   │   └── components/           # UpdatesSection, UpdateCard, FilterTabs,
│   │                             # SearchBar, Pagination
│   ├── what-to-do-next/          # What to do next page
│   │   ├── page.tsx
│   │   ├── utils.ts
│   │   └── components/           # GetStartedSection, VideoPlayerSection,
│   │                             # InstructorResourcesSection, ResourceCard,
│   │                             # ActionCard, PitchVideoSection
│   ├── globals.scss              # Global styles & font-face declarations
│   ├── layout.tsx                # Root layout
│   ├── page.tsx                  # Home page (redirects to login)
│   └── providers.tsx             # Redux & global providers
│
├── assets/                       # Static assets
│   ├── fonts/                    # Font files (.woff2)
│   ├── icons/                    # SVG icons (static .svg files)
│   │   └── dynamicIcons/         # React SVG components accepting props (.tsx)
│   │       ├── VerticalArrowIcon.tsx
│   │       ├── DiagonalArrowLeftIcon.tsx
│   │       ├── DiagonalArrowRightIcon.tsx
│   │       ├── LessonBadgeCircle.tsx
│   │       └── ...               # AiIcon1/2, ChecklistIcon, etc.
│   ├── images/                   # Image assets
│   └── outcomes-impact/          # Outcomes page images
│
├── components/                   # Shared components only
│   ├── layout/                   # Global layout (Header, Footer, ChatBot)
│   └── common/                   # Shared across 2+ pages
│       ├── Banner/               # CTA banner with title, description & button
│       ├── Button/
│       ├── FacultyMemberCard/    # Faculty member display card
│       ├── HabitsSection/       # Habits of mind section
│       ├── HeroSection/
│       ├── ImageCard/
│       ├── InfoCard/
│       ├── Input/
│       ├── PillTabs/             # Tab switching (default & expanded variants)
│       ├── SectionHeader/
│       ├── TeamMemberCard/       # Team member display card
│       ├── VideoPlayer/          # Reusable video player component
│       └── WelcomeSection/
│
├── constants/                    # App constants
│   └── index.ts                  # Storage keys (STORAGE_KEYS)
│
├── hooks/                        # Custom React hooks
│   └── useAuth.ts                # Authentication hook (wraps Redux auth thunks)
│
├── interfaces/                   # Shared TypeScript type definitions
│   └── index.ts                  # Common types (API, Auth, UI component props)
│
├── services/                     # API services
│   ├── axios.ts                  # Axios instance configuration
│   └── interceptors.ts           # Request/response interceptors
│
└── store/                        # Redux store
    ├── index.ts                  # Store configuration
    ├── rootReducer.ts            # Root reducer
    ├── hooks.ts                  # Typed useAppDispatch, useAppSelector
    └── authSlice.ts              # Auth slice with async thunks

Code Quality & Standards

ESLint Configuration

12 Plugins Enabled:

  • @typescript-eslint - TypeScript linting (no-explicit-any set to error)
  • eslint-plugin-prettier - Prettier integration
  • eslint-plugin-react - React best practices
  • eslint-plugin-react-hooks - React Hooks rules
  • @next/eslint-plugin-next - Next.js specific rules
  • eslint-plugin-jsx-a11y - Accessibility (WCAG) standards
  • eslint-plugin-import - Import/export validation and organization
  • eslint-plugin-sonarjs - Code quality and bug detection
  • eslint-plugin-security - Security vulnerability detection
  • eslint-plugin-no-secrets - Prevents committing secrets/credentials

Key Rules:

  • @typescript-eslint/no-explicit-any: error - No any types allowed
  • no-console: Only console.warn, console.error, and console.info allowed
  • Import sorting enforced (React > Next > External > Internal > Type)
  • Cognitive complexity limit: 15
  • Duplicate string threshold: 3

SonarJS - Code Quality

npm run lint:sonar

Checks: cognitive complexity, duplicate strings, identical functions, inverted booleans, unused collections, redundant booleans.

Security Scanning

npm run lint:security
npm run security:check

Detects: eval() usage, unsafe regex (ReDoS), XSS, command injection, hardcoded secrets, insecure randomness. Dependency auditing via npm audit.

File Format Restrictions

Fonts:

  • Allowed: .woff2 only
  • Blocked: .woff, .ttf, .otf, .eot

Images:

  • Allowed: .webp, .svg only
  • Blocked: .jpg, .jpeg, .png, .gif

Commit Message Standards

Uses Conventional Commits with Commitlint.

<type>: <subject>

Allowed Types: feature, fix, docs, style, refactor, perf, test, chore, ci, build, revert

Pre-commit Hooks

  1. File format validation (fonts, images)
  2. ESLint with auto-fix on staged files
  3. Prettier formatting on staged files
  4. Commit message lint

Pre-push Hooks

  1. Security audit (npm audit)
  2. TypeScript type check
  3. Production build verification

Import Organization

Imports are automatically organized:

  1. React imports
  2. Next.js packages
  3. External packages
  4. Internal modules (@/components, @/store, @/services, @/hooks, @/constants, @/interfaces)
  5. Type imports

Styling Strategy

  • Tailwind CSS for layout, spacing, responsive design, utilities
  • SCSS (globals.scss) for global styles, font-face declarations, and base typography
  • Global Typography System — Centralized clamp() rules in globals.scss for fluid responsive sizing:
    • h1: 1rem (hero headings use inline spans with clamp(42px, 6vw, 62px))
    • h2: clamp(20px, 4vw, 30px) with spans at clamp(24px, 6vw, 36px)
    • h3: clamp(18px, 3vw, 26px)
    • p: clamp(14px, 2.5vw, 22px) with line-height: 1.5
  • Section Padding Convention — Sections use px-4 sm:px-6 on the outer <section> element for consistent edge spacing; inner max-w-* containers handle centering via mx-auto without additional horizontal padding

Redux State Management

Use typed hooks:

import { useAppDispatch, useAppSelector } from '@/store/hooks';

API Integration

Centralized Axios instance (services/axios.ts) with interceptors (services/interceptors.ts) for:

  • Auth token attachment (via STORAGE_KEYS constants)
  • Development logging (console.info)
  • Error handling with normalized ApiError responses
  • Auto-redirect on 401 (clears stored auth data)

Note: Backend API is not yet integrated. Auth thunks in authSlice.ts are stubbed with TODOs.

App Routes

Route Description
/ Redirects to login
/login Login page
/register Registration page
/forgot-password Forgot password page
/cover Cover/landing page
/explore-the-course Course exploration
/outcomes-impact Outcomes & impact data
/quick-facts Program statistics
/support Support & donations
/updates Latest updates & news
/what-to-do-next Next steps for educators

Environment Variables

Variable Description Example
NEXT_PUBLIC_API_BASE_URL API base URL http://localhost:3000/api
NEXT_PUBLIC_APP_NAME Application name Think Argument
NEXT_PUBLIC_APP_ENV Environment development

Verification Before PR

npm run verify

Runs: ESLint, Prettier check, TypeScript check, production build. All must pass.

License

This project is licensed under the MIT License.

About

No description, website, or topics provided.

Resources

Readme

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages