Technology Exploration Hub

Welcome to the Technology Exploration Hub, a repository designed to showcase and test various technologies, tools, platforms, and techniques used in modern web development. This repository is structured to help you get familiar with these technologies through hands-on projects and structured roadmaps.

Table of Contents

• Technology Radar

Roadmaps

The following roadmaps will guide you through learning and experimenting with the technologies in this repository:

1. Frontend Development:

   • Angular with NgRx
   • React with MobX
   • CSS Modules, LESS, and PostCSS
   • Storybook for Component Documentation
   • UI Development with taiga UI and Tinkoff UI Kit

2. Backend Development:

   • Express
   • Fastify
   • NestJS for Scalable Applications
   • Microservices Architecture

3. DevOps & CI/CD:

   • Docker & Kubernetes Deployment
   • GitLab CI & Continuous Delivery
   • Monitoring with Grafana
   • Artifactory for Dependency Management

4. Testing & Quality Assurance:

   • Jest for Unit Testing
   • Cypress for End-to-End Testing
   • Linting & Formatting with ESLint, Stylelint, and Prettier

Repository Structure

The repository is structured to separate different projects, each focusing on a specific technology stack or technique.

Explanation:

• frontend/: Contains separate projects for each frontend framework (Angular, React) along with component libraries like Storybook.
• backend/: Houses backend services like Express, Fastify, and NestJS with an emphasis on microservices architecture.
• devops/: Includes infrastructure and deployment scripts such as Docker, Kubernetes, and GitLab CI/CD configurations.
• testing/: Dedicated section for testing technologies like Jest, Cypress, and linting tools.
• shared/: Common utilities, configurations, and shared libraries used across different projects.

Setup and Installation

1. Clone the Repository

git clone https://github.com/KhIlgizar/tech-stack.git
cd tech-stack

Projects Overview

Frontend Projects

• Angular with NgRx: Learn state management with Angular and NgRx.
• React with MobX: Explore state management with React and MobX.
• Storybook UI Kit: Document and test UI components using Storybook.

Backend Projects

• Express & Fastify: Build REST APIs using Express and Fastify.
• NestJS Microservices: Develop scalable applications with NestJS and a microservice architecture.
• DevOps & CI/CD Projects
• Docker & Kubernetes: Create containers and deploy to a Kubernetes cluster.
• GitLab CI Pipelines: Set up continuous integration and delivery pipelines using GitLab CI.
• Monitoring with Grafana: Set up dashboards for application performance monitoring.

Testing Projects

• Jest: Set up unit tests for JavaScript/TypeScript projects.
• Cypress: Perform end-to-end testing with Cypress.
• ESLint & Stylelint: Maintain code quality using linters for JavaScript and CSS.

Repository structure:

• Each technology or project has its own folder..
• Common dependencies (such as configurations) can be moved to a separate shared folder, making maintenance easier.
• For each project, separate README.md files can be created, which describe the purpose and steps for launching and testing.