← Back to Main | Web Study Repository

This directory contains JavaScript/TypeScript programming language study materials, sample applications, and framework implementations. JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.

📋 Full-Stack JavaScript Roadmap — Structured learning path for Senior Engineers moving into full-stack JS development.

Covers React (Web) · React Native (Mobile) · Python backend (FastAPI/Django) · Production architecture · CI/CD · Scaling

📜 Management Scripts — CLI and GUI tools to run, build, test, and deploy the project.

Quick start:

# Linux / macOS
./scripts/manage.sh setup && ./scripts/manage.sh dev

# Windows (PowerShell)
.\scripts\manage.ps1 setup; .\scripts\manage.ps1 dev

# GUI (any OS with Python + tkinter)
python scripts/manage.py gui

• Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine
  • Server-side JavaScript applications and utilities
  • AWS Lambda function implementations
• React: Library for building user interfaces, particularly React Native
  • React Native mobile application examples

• Samples: Core JavaScript/TypeScript language examples
  • Testing frameworks (Pact.js)
  • Browser-based applications
  • TypeScript implementations
  • Interactive HTML/JavaScript demonstrations

• Node.js 16 or higher
• npm (Node Package Manager) or yarn
• A modern web browser for client-side examples

1. Install Node.js

   # On Ubuntu/Debian
   curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
   sudo apt-get install -y nodejs
   
   # On macOS with Homebrew
   brew install node
   
   # On Windows, download from nodejs.org
   
   # Verify installation
   node --version
   npm --version

2. Install Dependencies

   # For Node.js samples
   cd javascript/nodejs
   npm install
   
   # For React Native samples
   cd javascript/react
   npm install
   
   # For testing samples
   cd javascript/samples
   npm install

cd javascript/nodejs
npm start
# Or run specific files
node app.js

cd javascript/react
npm install
npx react-native run-android  # For Android
npx react-native run-ios      # For iOS

# Simply open HTML files in a web browser
open javascript/samples/startrek-adventure.html

Each Node.js application can be run using npm scripts or directly with node:

# Using npm scripts
cd javascript/nodejs
npm run dev

# Direct execution
node javascript/nodejs/server.js

Navigate to the React Native directory:

cd javascript/react
npx react-native start
# In a new terminal
npx react-native run-android

cd javascript/samples
npm test
# Or run specific test files
npm run test:pact

javascript/
├── README.md                    # This file
├── roadmap/                     # Full-stack learning roadmap
│   ├── README.md                # Main roadmap with phase index and timeline
│   ├── phase-0-foundations/     # ES6+ JS and TypeScript
│   ├── phase-1-react-core/      # React core concepts, routing, forms, API
│   ├── phase-2-advanced-react/  # State, performance, patterns, testing, build tools
│   ├── phase-3-react-native/    # Mobile development with React Native
│   ├── phase-4-python-backend/  # FastAPI and Django+DRF
│   ├── phase-5-fullstack-architecture/  # Auth, Docker, CI/CD, Nginx
│   ├── phase-6-advanced/        # Next.js SSR, mobile advanced, scaling
│   └── portfolio-projects/      # 3 production-grade portfolio project guides
├── scripts/                     # Project management tools
│   ├── README.md                # Scripts usage guide
│   ├── manage.py                # Python CLI + GUI (tkinter)
│   ├── manage.sh                # Bash CLI (Linux/macOS/WSL)
│   ├── manage.bat               # Windows Batch CLI
│   └── manage.ps1               # PowerShell CLI (cross-platform)
├── nodejs/                      # Node.js framework examples
│   ├── lambda/                  # AWS Lambda functions
│   ├── ng/                      # Node.js applications
│   └── readme.md               # Node.js specific documentation
├── react/                       # React/React Native examples
│   ├── AppTryOne.js            # Basic React Native app
│   ├── ComponentCat.js         # Component examples
│   ├── HelloWorldApp.js        # Hello World implementation
│   ├── PropsMenu.jsx           # Props demonstration
│   ├── TextInputCat.jsx        # Input handling examples
│   ├── startreck.jsx           # Star Trek themed application
│   └── ...                     # Additional React components
└── samples/                     # Pure JavaScript/TypeScript examples
    ├── arrange_act_assert_test.ts # Testing patterns
    ├── startrek-adventure.html   # Interactive HTML/JS application
    ├── verify_provider.ts        # Pact.js provider verification
    └── README.md                 # Samples documentation

• Core JavaScript: ES6+, async/await, promises, closures, prototypes
• Node.js: Server-side development, Express.js, middleware, npm ecosystem
• React/React Native: Component-based architecture, JSX, state management, hooks
• TypeScript: Static typing, interfaces, generics, advanced types
• Testing: Unit testing, integration testing, contract testing with Pact.js
• Asynchronous Programming: Callbacks, promises, async/await patterns
• Modern Development: Babel, webpack, module systems (CommonJS, ES modules)

1. Code Style: Follow JavaScript Standard Style or Airbnb style guide
2. Documentation: Include JSDoc comments for functions and classes
3. Testing: Write unit tests using Jest, Mocha, or similar frameworks
4. Dependencies: Use package.json for dependency management
5. TypeScript: Use TypeScript for larger applications, include type definitions

1. Place pure JavaScript/TypeScript examples in the samples/ directory
2. Add framework-specific examples in appropriate subdirectories
3. Update this README with new content descriptions
4. Include package.json with dependencies and scripts

• Use meaningful variable and function names
• Follow consistent indentation and formatting
• Use modern JavaScript features (ES6+)
• Handle errors and edge cases appropriately
• Write clean, readable code with appropriate comments

• MDN JavaScript Documentation
• Node.js Documentation
• React Documentation
• React Native Documentation
• TypeScript Documentation
• JavaScript Standard Style
• Jest Testing Framework
• Pact.js Documentation