🧩 Articles Portal

A modular, technically focused web application designed for publishing and managing articles. This project is not business-driven, but rather built as a training ground for architectural design, infrastructure setup, and hands-on mastery of frontend tooling.

🎯 Purpose

This project emphasizes:

Clean project structuring and scalability
Low-level build configuration using Webpack
Type-safe architecture with TypeScript
Component reusability and testing
Complete control over ESLint, Babel, and Jest

🛠 The application itself is just a placeholder — the real goal is building the architecture and tools around it.

⚙️ Stack & Tooling

Tool	Purpose
Webpack	Custom bundling and dev server setup
TypeScript	Type-safe logic across modules
ESLint + Stylelint	Strict linting and formatting enforcement
Jest	Unit testing setup with custom mocks
React (assumed)	Component structure (via Storybook config)
Husky + Lint-Staged	Git hooks and safe commits
i18n	Translations extracted into JSON per locale

🏗 Project Structure Highlights

config/
├── build/              # Manual Webpack configuration
├── jest/               # Custom Jest configuration
└── storybook/          # Storybook setup for UI preview

extractedTranslations/
└── en/, ru/            # Static translation files for i18n

.husky/                 # Pre-commit hooks
.eslintrc.js            # ESLint configuration
.stylelintrc.json       # Stylelint for CSS/SCSS
babel.config.json       # Babel with preset-env for compatibility

🚀 Installation & Development

# Clone the repository
git clone https://github.com/your-user/articles_portal.git
cd articles_portal

# Install dependencies
npm install

# Run dev server (if configured)
npm run start

# Lint the code
npm run lint

# Run unit tests
npm run test

🧠 What's Implemented

✅ Custom Webpack Config

Modular buildWebpackConfig.ts, buildDevServer.ts, buildLoaders.ts
Loader support for TypeScript, Babel, SVG, CSS
Alias and resolver configuration
Dev/prod modes separated for flexibility

✅ Strict Linting

ESLint config for clean TypeScript and JavaScript
Stylelint config for modern CSS/SCSS
Pre-commit hooks via Husky

✅ Internationalization (i18n)

Translation files in extractedTranslations/en and ru
JSON-based, ready for runtime i18n injection

✅ Jest Configuration

jest.config.ts with support for React & TSX
Mock-friendly DOM testing environment

✅ Storybook Support

Storybook config included
Encourages isolated visual testing for components

🚧 Focus on Technical Excellence

This project intentionally skips business logic or domain-specific implementation.

The focus is on:

Manual project scaffolding
Full control over low-level tooling (no CRA, no boilerplates)
Clean separation of build/test/lint layers
Future scalability and professional extensibility

📌 Next Ideas / TODO

Add src/ entry with index.tsx and App.tsx
Add Storybook stories and preview examples
Enable GitHub Actions (CI setup partially done)
Enable production Webpack build with code splitting

👨‍💻 Author

Andrei Palii
Frontend Developer
GitHub Profile

andreipaliy/articles_portal