DEV Community: pirvanm

How do you make a FullStack [Focus on React] Demo App for Interviews using Laravel + React with Dockerize Part 5

pirvanm — Thu, 04 Sep 2025 23:38:41 +0000

Previously, I started react js side ,Part 4- How do you make a FullStack Demo App for Interviews using Laravel + React with Dockerize

We’re continuing in the frontend/src/features/mentors/ section, and you’d like to refine and standardize styles inside MentorCard.module.css so it’s cleaner, reusable, and more consistent.

.mentor-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.mentor-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.mentor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

.mentor-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.mentor-title {
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 0.25rem;
}

.mentor-expertise {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.mentor-link {
  font-size: 0.9rem;
  color: #4f46e5;
  text-decoration: none;
  font-weight: 500;
}

.mentor-link:hover {
  text-decoration: underline;
}

We’ll keep it consistent with the same folder level (frontend/src/features/mentors/) and design style you just refined for MentorCard.module.css.
Here’s a clean, reusable SkeletonMentorCard.module.css you can drop in:

.mentor-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.mentor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e2e8f0;
  margin-bottom: 0.75rem;
  animation: pulse 2s infinite ease-in-out;
}

.mentor-name {
  height: 24px;
  width: 120px;
  background: #e2e8f0;
  border-radius: 0.375rem;
  margin: 0.25rem 0;
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 0.2s;
}

.mentor-title {
  height: 18px;
  width: 140px;
  background: #f7fafc;
  border-radius: 0.375rem;
  margin: 0.25rem 0;
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 0.4s;
}

.mentor-expertise {
  height: 16px;
  width: 110px;
  background: #f7fafc;
  border-radius: 0.375rem;
  margin: 0.75rem 0;
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 0.6s;
}

.mentor-link {
  display: inline-block;
  height: 32px;
  width: 90px;
  background: #e2e8f0;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 0.8s;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

here’s a tidy, reusable MentorCard.tsx “partial”-style component that lines up with the CSS module you’ve set up. Drop this into frontend/src/features/mentors/MentorCard.tsx.

import { Link } from 'react-router';
import styles from './MentorCard.module.css'
import type { Mentor } from '../../types/mentor';


const MentorCard: React.FC<Mentor> = ({
  id,
  title,
  fullName,
  expertise,
  avatar
}) => {
  return (
    <>
    <article className={styles['mentor-card']}>
        <img src={avatar ?? 'https://randomuser.me/api/portraits/women/45.jpg'} alt={fullName} className={styles['mentor-avatar']} />
        <h2 className={styles['mentor-name']}>{fullName}</h2>
        <div className={styles['mentor-title']}>{title}</div>
        <div className={styles['mentor-expertise']}>{expertise.slice(0, 3).join(' • ').toUpperCase()}</div>
        <Link to={`/mentor/${id}`} className={styles['mentor-link']}>View Profile</Link>
      </article>
    </>
  );
}

export default MentorCard;

here’s a solid MentorCard.test.tsx using React Testing Library + Jest.
It covers rendering, tags, avatar vs initials fallback, card click, primary action (and that it doesn’t bubble), custom className, aria-label, and children rendering.

import { render, screen } from '@testing-library/react';
import MentorCard from './MentorCard';
import type { Mentor } from '../../types/mentor';
import { MemoryRouter } from 'react-router';

const mockMentor: Mentor = {
  id: 1,
  fullName: 'Sarah Chen',
  email: 'sarah@example.com',
  title: 'Senior Frontend Engineer',
  bio: 'Passionate about React and mentoring.',
  technicalBio: 'Passionate about React and mentoring.',
  mentoringStyle: 'Passionate about React and mentoring.',
  audience: 'Passionate about React and mentoring.',
  avatar: 'https://example.com/avatar.jpg',
  expertise: ['react', 'typescript'],
  availability: 'open',
  joined_at: 'Jun 2020',
};

describe('MentorCard', () => {
  test('renders mentor data correctly', () => {
    render(
         <MemoryRouter>
            <MentorCard {...mockMentor} />``
        </MemoryRouter>
    );

    expect(screen.getByText('Sarah Chen')).toBeInTheDocument();
    expect(screen.getByText('Senior Frontend Engineer')).toBeInTheDocument();
    expect(screen.getByText('REACT • TYPESCRIPT')).toBeInTheDocument();

    const img = screen.getByAltText('Sarah Chen');
    expect(img).toBeInTheDocument();
    expect(img).toHaveAttribute('src', mockMentor.avatar);
  });
});

Let’s add a tiny layer of logic so your UI cleanly handles loading, success, empty, and error states, all at the same folder level: frontend/src/features/mentors/.

import { useMentors } from "../../api/queries/mentors/useMentors";
import Error from "../../shared/ui/Error/Error";
import MentorCard from "./MentorCard";
import SkeletonMentorCard from "./SkeletonMentorCard";

const MentorList: React.FC = () => {
  const { data: mentors, isLoading, error } = useMentors();

if (isLoading) {
  return (
    <main className="mentors-grid">
      <SkeletonMentorCard />
      <SkeletonMentorCard />
      <SkeletonMentorCard />
      <SkeletonMentorCard />
      <SkeletonMentorCard />
      <SkeletonMentorCard />
    </main>
  );
}

  if (error) return <Error />;
  if (!mentors || mentors.length === 0) return <p>No mentors available.</p>;

  return (
    <>
        <main className="mentors-grid">
          {mentors.map((mentor) => (
            <MentorCard key={mentor.id} {...mentor} />
          ))}
        </main>
    </>
  );
}

export default MentorList;

let’s wrap the mentors feature folder (frontend/src/features/mentors/) with a clean index barrel so everything exports in a predictable, maintainable way. This way, consumers only import from the folder, not individual files.

import styles from './SkeletonMentorCard.module.css';

const SkeletonMentorCard: React.FC = () => {
  return (
    <article className={styles['mentor-card']}>
      <div className={styles['mentor-avatar']} />
      <div className={styles['mentor-name']} />
      <div className={styles['mentor-title']} />
      <div className={styles['mentor-expertise']} />
      <div className={styles['mentor-link']} />
    </article>
  );
};

export default SkeletonMentorCard;

We get back 1 step and go next folder layouts so we in frontend/src/layouts
/MainLayout.tsx got :

import { Outlet } from "react-router";
import MainNavbar from "./MainNavbar";

const MainLayout: React.FC = () => {
  return (
    <>
        <MainNavbar />
        <div className="page-container">
            <Outlet />
        </div>
    </>
  );
}

export default MainLayout;

And for navigation, we got frontend/src/layouts
/MainNavbar.tsx :

import React from 'react';
import { Link } from 'react-router';

const MainNavbar: React.FC = () => {
  return (
    <nav className="navbar">
      <div className="nav-container">
        <Link to={'/'} className="nav-logo">MentorHub</Link>
      </div>
    </nav>
  );
};

export default MainNavbar;

And we end this part with "types" ,frontend/src/types
/mentor.ts

export type Mentor = {
  id: number;
  fullName: string;
  email: string | null;
  title: string;
  bio: string | null;
  technicalBio: string | null;
  mentoringStyle: string | null;
  audience: string | null;
  avatar: string | null;
  expertise: string[];
  availability: 'open' | 'limited' | 'full' | 'paused';
  joined_at: string;
};

How do you make FullStack Demo App for Interviews using Laravel + React with Dockerize Part 4

pirvanm — Fri, 29 Aug 2025 13:59:38 +0000

How to Build a Full-Stack Demo App for Interviews with Laravel + React (Dockerized) – Part 1

Building a Full-Stack Demo App for Interviews (Laravel + React, Dockerized) – Part 2

How to Build a Full-Stack Demo App for Interviews with Laravel + React (Dockerized) – Part 3

This is the second main Part B, and Part 4 of the full series. You can access the previous parts above. I think I’m speaking more like someone recording a personal journal — maybe with a bit too much imagination.

Let’s start coding! Just type this command in the terminal. (Of course, this is a Linux terminal — for Windows users, you can use Cmder or Laragon, by the way.)npm create vite@latest my-app

Then I selected the React framework for the lightweight version, and chose TypeScript — because it seems TypeScript is loved even more than Go now.

After pressing Enter in the terminal a few times, I ended up with this familiar JavaScript package manager file: package.json.

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react": "^5.0.0",
    "eslint": "^9.33.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.1",
    "vite": "^7.1.2"
  }
}

Corrected:
In my package.json, at the end I have:

First, checking one by one:

In "scripts":

Next, in "dependencies", I added:

"@tanstack/react-query": "^5.84.1",
"axios": "^1.11.0",
"react-router": "^7.7.1"

And in the last step for packages, I just added one line in "scripts":

"test": "vitest"

In "devDependencies", I added:

"vitest": "^3.2.4"

After that, I think all the magic happens in frontend/src/, which is in the same folder as the previous backend folder.

In frontend/src
/.env
I get it, but I think this is more logical in Docker, which I’ll talk about later — maybe in the next part.

frontend/src
/main.tsx before i start overwrite this i have :

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

After some work, some ambition — maybe too much work...

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter } from 'react-router'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </BrowserRouter>,
  </StrictMode>,
)

Maybe it’s because I’m old — but not that old — I’m still a fan of ESLint config. So I made this one for formatting, in the eslint.config.js file:

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { globalIgnores } from 'eslint/config'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
])

Some basic HTML for the main page: index.html

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + React + TS</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html>

After that, to run tests properly, I created a file setupTests.ts with the following code:

import '@testing-library/jest-dom';

As the next sub-stage of Stage B, I made a pages folder inside src, like this:

src
└── pages/

Inside it i have AUth, Home, MentorProfile
In Auth , more precise on :
frontend/src/pages/Auth
/Login.tsx

const Login: React.FC = () => {
  return (
    <div>

    </div>
  );
}

export default Login;

On register :

const Register: React.FC = () => {
  return (
    <div>

    </div>
  );
}

export default Register;

One step closer to finishing this part, we go to Home.tsx

Path: frontend/src/pages/Home/Home.tsx
And the following code:

import MentorList from "../../features/mentors/MentorsList";

const Home: React.FC = () => {
  return (
    <div>
        <header className="page-header">
            <h1>Find a Mentor</h1>
            <p>Get guidance from experienced developers, designers, and leaders.</p>
        </header>
        <MentorList />
    </div>
  );
}

export default Home;

And on the latest step of this part 4 of series, we made a new folder

src/pages
/MentorProfile/

Some CSS for beginners in web development — boring or seemingly useless stuff, but still necessary:

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: #475569;
    text-decoration: none;
    font-size: 0.95rem;
}

.back-link:hover {
    color: #1e293b;
}

.mentor-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.mentor-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.mentor-info {
    flex: 1;
}

.mentor-name {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1e293b;
}

.mentor-title {
    font-size: 1rem;
    color: #475569;
    margin: 0.25rem 0;
}

.mentor-expertise {
    font-size: 0.95rem;
    color: #64748b;
}

.mentor-bio {
    line-height: 1.7;
    color: #334155;
    margin-bottom: 2rem;
}

.mentor-bio h2 {
    font-size: 1.3rem;
    margin: 1.5rem 0 1rem;
    color: #1e293b;
}

.mentor-bio p {
    margin-bottom: 1rem;
}

.mentor-requirements {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: #475569;
}

.mentor-requirements h3 {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.apply-section {
    text-align: center;
    margin-top: 1rem;
}

.btn-apply {
    display: inline-block;
    background-color: #4f46e5;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}

.btn-apply:hover {
    background-color: #4338ca;
}

@media (max-width: 640px) {
    .mentor-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .mentor-name {
        font-size: 1.6rem;
    }
}

/MentorProfile.module.css

In the next file: frontend/src/pages/MentorProfile/MentorProfile.test.tsx

i got

import { render, screen } from '@testing-library/react';
import MentorProfile from './MentorProfile';
import { useMentor } from '../../api/queries/mentors/useMentor';
import { MemoryRouter } from 'react-router';


vi.mock('../../api/queries/mentors/useMentor');

describe('MentorProfile', () => {
  test('shows skeleton when loading', () => {
    (useMentor as jest.Mock).mockReturnValue({
      data: null,
      isLoading: true,
      error: null,
    });

    render(<MentorProfile />);

    expect(screen.getByTestId('skeleton-avatar')).toBeInTheDocument();
  });

  test('shows error component when error occurs', () => {
    (useMentor as jest.Mock).mockReturnValue({
      data: null,
      isLoading: false,
      error: new Error('Failed to fetch'),
    });

    render(<MemoryRouter>
        <MentorProfile />
    </MemoryRouter>);

    expect(screen.getByText('Whoops!')).toBeInTheDocument();
  });

  test('renders full profile when data is loaded', () => {
    (useMentor as jest.Mock).mockReturnValue({
      data: {
        id: 1,
        fullName: 'Sarah Chen',
        title: 'Senior Frontend Engineer',
        expertise: ['React', 'TypeScript'],
        bio: 'I love mentoring.',
        technicalBio: 'I love mentoring.',
        mentoringStyle: 'I love mentoring.',
        audience: 'I love mentoring.',
        availability: 'open',
      },
      isLoading: false,
      error: null,
    });

    render(<MemoryRouter>
        <MentorProfile />
    </MemoryRouter>);

    expect(screen.getByText('Sarah Chen')).toBeInTheDocument();
    expect(screen.getByText('Senior Frontend Engineer')).toBeInTheDocument();
    expect(screen.getByText('REACT • TYPESCRIPT')).toBeInTheDocument();
    expect(screen.getByText('Apply to Be My Mentee')).toBeInTheDocument();
  });
});

On MentorProfile.tsx

import { Link, useParams } from 'react-router';
import styles from './MentorProfile.module.css'
import { useMentor } from '../../api/queries/mentors/useMentor';
import SkeletonMentorProfile from './SkeletonMentorProfile';
import Error from '../../shared/ui/Error/Error';

const MentorProfile: React.FC = () => {
  const { id }  = useParams<{id: string}>();

  const { data: mentor, isLoading, error } = useMentor(parseInt(id ?? '0'));

  if (isLoading) {
    return (
      <SkeletonMentorProfile />
    )
  }

  if (error) return <Error />;

  return (
    <main className={styles['mentor-detail']}>
      <Link to={'/'} className={styles['back-link']}>&larr; Back to mentors</Link>


      <div className={styles['mentor-header']}>
        <img src={mentor?.avatar ?? 'https://randomuser.me/api/portraits/women/45.jpg'} alt={mentor?.fullName} className={styles['mentor-avatar']} />
        <div className={styles['mentor-info']}>
          <h1 className={styles['mentor-name']}>{mentor?.fullName}</h1>
          <div className={styles['mentor-title']}>{mentor?.title}</div>
          <div className={styles['mentor-expertise']}>{mentor?.expertise.slice(0, 3).join(' • ').toUpperCase()}</div>
        </div>
      </div>

      <section className={styles['mentor-bio']}>
        <h2>About {mentor?.fullName}</h2>
        <p>
          {mentor?.bio}
        </p>

        <h2>What I Can Help With</h2>
        <p>
          {mentor?.technicalBio}
        </p>

        <h2>My Mentoring Style</h2>
        <p>
            {mentor?.mentoringStyle}
        </p>
      </section>

      <section className={styles['mentor-requirements']}>
        <h3>Who I'm Looking For</h3>
        <p>
          {mentor?.audience}
        </p>
      </section>

      <div className={styles['apply-section']}>
        <Link to={`/mentor/${id}`} className={styles['btn-apply']}>
          Apply to Be My Mentee
        </Link>
      </div>
    </main>
  );
}

export default MentorProfile;

In frontend/src/pages/MentorProfile/SkeletonMentorProfile.module.css

.back-link {
  display: inline-block;
  width: 120px;
  height: 16px;
  background: #e2e8f0;
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
  animation: pulse 2s infinite ease-in-out;
}

.mentor-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.mentor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e2e8f0;
  animation: pulse 2s infinite ease-in-out;
}

.mentor-info {
  flex: 1;
}

.mentor-name {
  width: 180px;
  height: 36px;
  background: #e2e8f0;
  border-radius: 0.375rem;
  margin: 0.25rem 0;
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 0.2s;
}

.mentor-title {
  width: 200px;
  height: 18px;
  background: #f7fafc;
  border-radius: 0.375rem;
  margin: 0.25rem 0;
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 0.4s;
}

.mentor-expertise {
  width: 160px;
  height: 16px;
  background: #f7fafc;
  border-radius: 0.375rem;
  margin-top: 0.5rem;
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 0.6s;
}

.apply-section {
  text-align: center;
  margin-top: 1rem;
}

.btn-apply {
  display: inline-block;
  width: 200px;
  height: 48px;
  background: #e2e8f0;
  border-radius: 0.5rem;
  animation: pulse .3s infinite ease-in-out;
  animation-delay: 0.8s;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

And the latest file for this part.

import styles from './SkeletonMentorProfile.module.css';

const SkeletonMentorProfile: React.FC = () => {
  return (
    <main className={styles['mentor-detail']}>
      <div className={styles['back-link']}></div>

      <div className={styles['mentor-header']}>
        <div className={styles['mentor-avatar']} data-testid="skeleton-avatar"/>
        <div className={styles['mentor-info']}>
          <div className={styles['mentor-name']} />
          <div className={styles['mentor-title']} />
          <div className={styles['mentor-expertise']} />
        </div>
      </div>

      <div className={styles['apply-section']}>
        <div className={styles['btn-apply']} />
      </div>
    </main>
  );
};

export default SkeletonMentorProfile;

I think this can be seen as a full-stack course for someone who wants to move from mid-level to senior. For more awesome courses, I invite you to check out my live React/Laravel project, hosted on DigitalOcean with GitHub Actions and Docker.
CourseCasts!

How do you make FullStack Demo App for Interviews using Laravel + React with Dockerize Part 3

pirvanm — Wed, 27 Aug 2025 15:12:33 +0000

This is a new part of my Laravel + React dockerized series. Before moving on, you can check out the previous parts.

Laravel + React and Docker Part 1
Laravel + React and Docker

I will continue now with the next part of the backend. This time, we’ll go a little deeper into Laravel, and even touch on some PHP-level details, starting with the bootstrap file located in:

backend/bootstrap
/app.php

Basically, we slightly overwrote Laravel’s core:

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        //
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        //
    })->create();

I added four lines to bring the API into our app, which improves performance and reminds me of Lumen, or even other microframeworks like Slim PHP.

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withProviders([
            App\Infrastructure\Providers\AppServiceProvider::class,
    ])
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        api: __DIR__.'/../routes/api.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
        then: function () {

        }
    )
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->statefulApi();
        $middleware->redirectGuestsTo('/v1/login');
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        //
    })->create();

Because we want to communicate between the backend and frontend via HTTP, we need to allow access in Laravel by defining some configurations. One of them is creating a new file in backend/config named cors.php with the following code:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie', "*"],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

We are still working in the config folder, but this time we overwrite an existing file instead of creating a new one: database.php.

Inside the 'sqlite' => [ section, after 'synchronous' => null, we add:

'transaction_mode' => 'DEFERRED',

At the JavaScript level, Axios is already included in Laravel 12, so there’s no need to install it separately. Since we are not using Inertia or Blade in Laravel, we can skip the resources/views folder.

There are no navigation pages, commands, or console interactions on the Laravel backend side, so in this case we can also skip web.php and console.php from the routes folder.

However, some routes are still required to send data from the database to React. For this purpose, we use api.php in the routes folder, which contains the following code:

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Infrastructure\Http\Controllers\API\User\MeController;
use App\Infrastructure\Http\Controllers\API\User\LoginController;
use App\Infrastructure\Http\Controllers\API\User\LogoutController;
use App\Infrastructure\Http\Controllers\API\User\RegisterController;
use App\Infrastructure\Http\Controllers\API\Mentor\MentorListController;
use App\Infrastructure\Http\Controllers\API\Mentor\MentorProfileController;

// we can have the api routes here, no issue
Route::prefix('v1')->group(function () {
    Route::middleware('guest')->group(function () {
        Route::post('/register', RegisterController::class);
        Route::post('/login', LoginController::class);
        Route::get('/mentors', MentorListController::class);
        Route::get('/mentors/{id}', MentorProfileController::class);
    });

    Route::middleware('auth:sanctum')->group(function () {
        Route::get('/me', MeController::class);
        Route::post('/logout', LogoutController::class);
    });
});

Even though we are not talking about Sail, we should still discuss composer.json. We also mention Docker briefly, since in this case it’s just a small part.

Because we updated the folder structure to follow DDD, we defined our own namespaces. We then used them in our code, and it looks like this:

in array : "autoload": {
"psr-4": {

}
I added:

"App\\Domain\\": "app/Domain",  
"App\\Application\\": "app/Application",  
"App\\Infrastructure\\": "app/Infrastructure"

And finally, it looks like this:

"autoload": {
        "psr-4": {
            "App\\": "app/",
            "App\\Domain\\": "app/Domain",
            "App\\Application\\": "app/Application",
            "App\\Infrastructure\\": "app/Infrastructure",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },

The rest is the same with compose.json. The final step to dockerize a basic Laravel app is as follows: in the backend folder, create a new folder called docker. Inside it, create a file named Dockerfile (without any extension). Also, inside the docker folder, create another folder called nginx.

Our Dockerfile contains the following code:

# docker/Dockerfile
FROM php:8.3-fpm

# Install system dependencies including PostgreSQL dev headers
RUN apt-get update && apt-get install -y \
    git \
    curl \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    zip \
    unzip \
    libpq-dev   
RUN rm -rf /var/lib/apt/lists/*

# Install PHP extensions (now pdo_pgsql will work)
RUN docker-php-ext-install pdo pdo_pgsql mbstring exif pcntl bcmath

# Install Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html

# Copy composer files
COPY composer.json composer.lock ./
RUN composer install --no-dev --optimize-autoloader --no-scripts

# Copy the rest of the application
COPY . .

# Fix permissions
RUN chown -R www-data:www-data /var/www/html \
    && chmod -R 775 storage bootstrap/cache

EXPOSE 9000

CMD ["php-fpm"]

Our last file default.conf which is inside of nginx folder had following code :

server {
    listen 80;
    server_name localhost;
    root /var/www/html/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME /var/www/html/public/index.php;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

To start this project (backend only for now), you need to follow these steps:

Install backend
Infrastructure following the DDD(ish) way of organizing the application.

1.cd backend

2.cp .env.example .env

3../dc.sh build ( docker compose buid )

4../dc.sh up -d ( docker compose up -d )

5../install.sh ( composer install, migrate and seed database )

Backend URL: http://localhost:8001/

I hope we can move forward with React after this. If you need a course—whether you’re at a junior or senior level—feel free to message me, or you can follow me on LinkedIn at LevelCoding

How do you make FullStack Demo App for Interviews using Laravel + React with Dockerize Part 2

pirvanm — Tue, 26 Aug 2025 08:09:02 +0000

Previously, I stepped into the world of DDD. Now I’ll continue on the backend side with more DTOs and Infrastructure, which form the main Part 1 with its second subpart.

For the business logic, we’ll continue with Mentor and User. So, let’s move to the next level:
backend/app/Application/Mentor/

Here, we start with the DTOs, and the first class we have is MentorDTO, with the following code:

<?php

namespace App\Application\Mentor\DTOs;

readonly class MentorDTO
{
    public function __construct(
        public int $id,
        public string $title,
        public array $expertise,
        public string $availability,
        public ?string $avatar = null,
        public string $bio,
        public string $technicalBio,
        public string $mentoringStyle,
        public string $audience,
    ) {}
}

In the second DTO, we have:

<?php

namespace App\Application\Mentor\DTOs;

readonly class MentorProfileDTO
{
    public function __construct(
        public int $id,
        public string $title,
        public string $fullName,
        public ?string $avatar,
        public array $expertise,
        public string $availability,
        public string $bio,
        public string $email,
        public string $technicalBio,
        public string $mentoringStyle,
        public string $audience,
    ) {}
}

Now, let’s continue with the Queries for this business logic application.

<?php

namespace App\Application\Mentor\Queries;

use Illuminate\Support\Collection;
use Illuminate\Database\ConnectionInterface;
use App\Application\Mentor\DTOs\MentorProfileDTO;

class GetMentorsWithUsersQuery
{
    public function __construct(private ConnectionInterface $db) {}

    /**
     * Fetch the list of mentors with user data.
     *
     * @return Collection<int, MentorListDto>
     */
    public function execute(): Collection
    {
        return $this->db->table('mentors')
            ->join('users', 'mentors.user_id', '=', 'users.id')
            ->where('mentors.availability', '!=', 'paused')
            ->orderBy('mentors.created_at', 'desc')
            ->select([
                'mentors.id',
                'mentors.title',
                'mentors.expertise',
                'mentors.availability',
                'mentors.avatar as mentor_avatar',
                'mentors.bio',
                'mentors.technical_bio',
                'mentors.mentoring_style',
                'mentors.audience',
                'users.first_name',
                'users.last_name',
                'users.email',
            ])
            ->get()
            ->map(function ($row) {
                return new MentorProfileDTO(
                    id: $row->id,
                    title: $row->title,
                    fullName: "$row->first_name $row->last_name",
                    avatar: $row->mentor_avatar ?? null,
                    expertise: json_decode($row->expertise, true),
                    availability: $row->availability,
                    bio: $row->bio,
                    technicalBio: $row->technical_bio,
                    mentoringStyle: $row->mentoring_style,
                    audience: $row->audience,
                    email: $row->email,
                );
            });
    }
}

Finally, we have the Query class:

<?php

namespace App\Application\Mentor\Queries;

use Illuminate\Support\Facades\DB;
use Illuminate\Database\ConnectionInterface;
use App\Application\Mentor\DTOs\MentorProfileDTO;

class MentorProfileQuery
{
    public function __construct(private ConnectionInterface $db) {}

    public function execute(int $mentorId): ?MentorProfileDTO
    {
        $record = $this->db->table('mentors')
            ->join('users', 'mentors.user_id', '=', 'users.id')
            ->where('mentors.id', $mentorId)
            ->where('mentors.availability', '!=', 'paused') // only active
            ->select([
                'mentors.id as mentor_id',
                'users.first_name',
                'users.last_name',
                'users.email',
                'mentors.title',
                'mentors.bio',
                'mentors.technical_bio',
                'mentors.mentoring_style',
                'mentors.audience',
                'mentors.avatar as mentor_avatar',
                'mentors.expertise',
                'mentors.availability',
                'mentors.created_at as mentor_created_at',
            ])
            ->first();

        if (! $record) {
            return null;
        }

        return new MentorProfileDTO(
            id: $record->mentor_id,
            fullName: $record->first_name . ' ' . $record->last_name,
            email: $record->email,
            title: $record->title,
            bio: $record->bio,
            technicalBio: $record->technical_bio,
            mentoringStyle: $record->mentoring_style,
            audience: $record->audience,
            avatar: $record->mentor_avatar ?? $record->user_avatar,
            expertise: json_decode($record->expertise, true),
            availability: $record->availability,
        );
    }
}

Now we move on to the User business logic, which is more advanced. A new feature in this project is the use of Actions, with:

<?php

namespace App\Application\User\Actions;

use App\Domain\User\Entities\User;
use App\Application\User\DTOs\LoginUserDTO;
use App\Domain\User\Repositories\UserRepositoryInterface;

class AuthenticateUserAction
{
    public function __construct(
        private UserRepositoryInterface $userRepository
    ) {}

    public function execute(LoginUserDTO $dto): User
    {

    }
}

To wrap things up, here’s the Action class:
`
<?php

namespace App\Application\User\Actions;

use App\Application\User\DTOs\RegisterUserDTO;
use App\Domain\User\Entities\User;
use App\Domain\User\Repositories\UserRepositoryInterface;

class RegisterUserAction
{
public function __construct(
private UserRepositoryInterface $userRepository
) {}

public function execute(RegisterUserDTO $dto): User
{

}

Now we step back one level to define a DTO class for it:

<?php

namespace App\Application\User\DTOs;

class LoginUserDTO
{
    public function __construct(
        public readonly string $email,
        public readonly string $password
    ) {}
}

Continuing in the DTO folder:

<?php

namespace App\Application\User\DTOs;

class RegisterUserDTO
{
    public function __construct(
        public readonly string $name,
        public readonly string $email,
        public readonly string $password
    ) {}
}

And lastly, we have the DTOs

<?php

namespace App\Application\User\DTOs;

class UserDTO
{
    public function __construct(
        public readonly int $id,
        public readonly string $name,
        public readonly string $email,
        public readonly string $password,
    ) {}
}

Well, I can’t say that Resources are something new in Laravel—I think I first used them back in a Laravel 7 project, which was personal and is still running online for everyone who loves chill music.

Here’s an example I found, which I think is a more modern way to avoid code conflicts. It feels almost like a TypeScript-style version of PHP. :))

<?php

namespace App\Application\User\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class UserResource extends JsonResource
{
    public function toArray($request)
    {
        return [
            'id' => $this->id(),
            'name' => $this->name(),
            'email' => $this->email()->value(),
        ];
    }
}

Now we go back two levels and continue with Infrastructure. At first, it may look like a slightly ‘hellish’ DDD concept, but after years of working with it, I find it closer to Symfony. And even though it’s considered dead, it still reminds me of the Yii framework.

<?php

namespace App\Infrastructure\Factories;

use App\Application\Mentor\DTOs\MentorDTO;
use App\Domain\Mentor\Entities\Mentor;
use App\Domain\Mentor\Enums\Availability;
use App\Domain\Mentor\Factories\MentorFactoryInterface;
use App\Domain\Mentor\ValueObjects\ExpertiseList;

class MentorFactory implements MentorFactoryInterface
{
    public function from(object|array $data): Mentor
    {
        return new Mentor(
            id: $record->id,
            title: $record->title,
            expertise: new ExpertiseList(json_decode($record->expertise, true)),
            availability: Availability::from($data->availability),
            avatar: $record->avatar,
            bio: $record->bio
        );
    }
}

A smaller example compared to the previous one:

<?php

namespace App\Infrastructure\Factories;

use App\Domain\Mentor\ValueObjects\ExpertiseList;
use App\Domain\User\ValueObjects\MentorValueObjectsFactoryInterface;

class MentorValueObjectsFactory implements MentorValueObjectsFactoryInterface
{
    public function expertiseList(array $value): ExpertiseList
    {
        return new ExpertiseList($value);
    }
}

I think this is more of an extension of the basic factory, but it’s a well-structured UserFactory.

<?php

namespace App\Infrastructure\Factories;

use App\Application\User\DTOs\UserDTO;
use App\Domain\User\ValueObjects\UserValueObjectsFactoryInterface;

class UserFactory
{
    public function __construct(
        private readonly UserValueObjectsFactoryInterface $voFactory
    ) {}

    public function from(object|array $data): Entity
    {
        return new Entity(
            id: $record->id,
            first_name: $record->first_name,
            last_name: $record->last_name,
            email: $this->voFactory->email($record->email),
            password: $this->voFactory->password($record->password),
        );
    }
}

And lastly, the Factory:

<?php

namespace App\Infrastructure\Factories;

use App\Domain\User\ValueObjects\Email;
use App\Domain\User\ValueObjects\Password;
use App\Domain\User\ValueObjects\UserValueObjectsFactoryInterface;

class UserValueObjectsFactory implements UserValueObjectsFactoryInterface
{
    public function email(string $value): Email
    {
        return new Email($value);
    }

    public function password(string $value): Password
    {
        return new Password($value);
    }
}

Now we continue with one of the oldest and most common patterns in Laravel—the Controller. It’s simply been moved to another folder and given a more modern structure. As usual, we’ll keep the business logic for Mentor and User.

Inside API/Mentor:

<?php

namespace App\Infrastructure\Http\Controllers\API\Mentor;

use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use App\Infrastructure\Http\Controllers\Controller;
use App\Application\Mentor\Queries\GetMentorsWithUsersQuery;

class MentorListController extends Controller
{    
    public function __invoke(GetMentorsWithUsersQuery $query): JsonResponse
    {
       $mentors = $query->execute();

        return response()->json([
            'data' => $mentors,
            'total' => $mentors->count(),
        ]);
    }
}

And to wrap up, here’s the Mentor controller:

<?php

namespace App\Infrastructure\Http\Controllers\API\Mentor;

use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use App\Infrastructure\Http\Controllers\Controller;
use App\Application\Mentor\Queries\MentorProfileQuery;
use App\Application\Mentor\Queries\GetMentorsWithUsersQuery;

class MentorProfileController extends Controller
{    
    public function __invoke(MentorProfileQuery $query, int $id): JsonResponse
    {
        $mentor = $query->execute($id);

        return response()->json(['data' => $mentor ?? null]);
    }
}

Something rare I’ve seen in Laravel is a refactored LoginController. I think 90% of Laravel projects end up with a lot of code inside it, almost like a Singleton class.

<?php

namespace App\Infrastructure\Http\Controllers\API\User;

use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use App\Application\User\DTOs\LoginUserDTO;
use App\Application\User\Resources\UserResource;
use App\Infrastructure\Requests\LoginRequest;
use App\Infrastructure\Http\Controllers\Controller;
use App\Application\User\Actions\AuthenticateUserAction;

class LoginController extends Controller
{
    public function __construct(
        private readonly AuthenticateUserAction $authAction
    ) {}

    public function __invoke(
        LoginRequest $request
    ): JsonResponse {
        $user = $authAction->execute($request->dto());

        // Start session
        \Auth::loginUsingId($user->id());

        return UserResource::make($user)->response();
    }
}

Here’s another example from the category of web development pleasures:

<?php

namespace App\Infrastructure\Http\Controllers\API\User;

use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use App\Infrastructure\Http\Controllers\Controller;

class LogoutController extends Controller
{    
    public function __invoke(Request $request): JsonResponse
    {
        \Auth::guard('web')->logout();
        $request->session()->invalidate();
        $request->session()->regenerateToken();

        return response()->json(['message' => 'Logged out']);
    }
}

In general, most Laravel versions use a facade or a custom class to retrieve the current user. I think this is a good example of optimization:

<?php

namespace App\Infrastructure\Http\Controllers\API\User;

use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use App\Application\User\Resources\UserResource;
use App\Infrastructure\Http\Controllers\Controller;

class MeController extends Controller
{    
    public function __invoke(Request $request): JsonResponse
    {
        $user = $request->user();

        if (! $user) {
            return response()->json(['message' => 'Unauthenticated'], 401);
        }

        return UserResource::make($user)->response();
    }
}

Now let’s look at the longest controller in our project:

<?php

namespace App\Infrastructure\Http\Controllers\API\User;

use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use App\Application\User\DTOs\RegisterUserDTO;
use App\Application\User\Resources\UserResource;
use App\Infrastructure\Http\Controllers\Controller;
use App\Application\User\Actions\RegisterUserAction;
use App\Infrastructure\Requests\RegisterRequest;

class RegisterController extends Controller
{
    public function __construct(
        private readonly RegisterUserAction $registerUserAction
    ) {}

    public function __invoke(
        RegisterRequest $request,
    ): JsonResponse {

        $user = $this->registerUserAction->execute($request->dto());

        return response()->json([
            'message' => 'User registered successfully',
        ], 201);
    }
}

Personally, I’m a fan of the Service concept. For me, relying only on controllers feels limiting in the PHP world.

To take another step in the request lifecycle, I’ll continue with the Request concept.

<?php

namespace App\Infrastructure\Requests;

use DomainException;

use App\Application\User\DTOs\LoginUserDTO;
use Illuminate\Foundation\Http\FormRequest;

class LoginRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;

    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            'email' => ['required', 'email'],
            'password' => ['required', 'string'],
        ];
    }

    public function dto(): LoginUserDTO
    {
        return new LoginUserDTO(
            email: $this->string('email')->trim()->toString(),
            password: $this->string('password')->trim()->toString()
        );
    }
}

I think this is a new function, dto(). I didn’t see it in Laravel 11.

It looks like another Symfony pattern adapted to Laravel. I got this code:

<?php

namespace App\Infrastructure\Requests;

use App\Application\User\DTOs\RegisterUserDTO;
use Illuminate\Foundation\Http\FormRequest;

class RegisterRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            'first_name' => ['required', 'string', 'max:255'],
            'last_name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8'],
        ];
    }

    public function dto(): RegisterUserDTO
    {
        return new RegisterUserDTO(
            first_name: $this->string('first_name')->trim()->toString(),
            last_name: $this->string('last_name')->trim()->toString(),
            email: $this->string('email')->trim()->toString(),
            password: $this->string('password')->trim()->toString(),
        );
    }
}

The model isn’t new in Laravel, but here it’s simply placed in the Infrastructure folder. In my view, compared with other frameworks (except for the big switch in version 12), Laravel is still quite easy to adapt across versions—probably thanks to its strong documentation. So, I don’t really see anything new here.

<?php

namespace App\Infrastructure\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    /** @use HasFactory<\Database\Factories\UserFactory> */
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var list<string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var list<string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
        ];
    }
}

In this project, we don’t need to use any providers, so we can skip that step. This brings us to one of the most loved features in Laravel when it comes to project optimization: repositories.

<?php

namespace App\Infrastructure\Repositories;

use App\Domain\Mentor\Entities\Mentor;
use App\Domain\Mentor\Repositories\MentorRepositoryInterface;
use App\Domain\Mentor\Factories\MentorEntityFactoryInterface;
use Illuminate\Database\ConnectionInterface;
use Illuminate\Support\Collection;

class MentorRepository implements MentorRepositoryInterface
{
    public function __construct(
        private ConnectionInterface $db,
        private MentorEntityFactoryInterface $entityFactory
    ) {}

    public function findAll(): Collection
    {
        $records = $this->db->table('mentors')
            ->where('availability', '!=', 'paused')
            ->orderBy('created_at', 'desc')
            ->get();

        return $records->map(fn ($r) => $this->toEntity($r));
    }

    public function findById(int $id): ?Mentor
    {
        $record = $this->db->table('mentors')->where('id', $id)->first();

        return $record ? $this->toEntity($record) : null;
    }

    private function toEntity(array $record): Mentor
    {
        return $this->entityFactory->from([
            'id' => $record['id'],
            'title' => $record['title'],
            'expertise' => json_decode($record['expertise'], true),
            'availability' => $record['availability'],
            'avatar' => $record['avatar'] ?? null,
            'bio' => $record['bio'] ?? null
        ]);
    }
}

Now, regarding the UserRepository class:

<?php

namespace App\Infrastructure\Repositories;

use App\Domain\User\Entities\User;
use App\Domain\User\ValueObjects\Email;
use Illuminate\Database\ConnectionInterface;
use App\Infrastructure\Factories\UserFactory;
use App\Domain\User\Factories\UserEntityFactoryInterface;
use App\Domain\User\Repositories\UserRepositoryInterface;

class UserRepository implements UserRepositoryInterface
{
    public function __construct(
        private ConnectionInterface $db,
        private UserEntityFactoryInterface $userFactory,
        private UserFactory $dataMapper
    ) {}

    /**
     * Create a new user in the database
     */
    public function create(User $user): User
    {
        $id = $this->db->table('users')->insertGetId([
            'first_name' => $user->firstName(),
            'last_name' => $user->lastName(),
            'email' => $user->email()->value(),
            'password' => $user->password()->value(),
            'created_at' => now(),
            'updated_at' => now(),
        ]);

        return $this->findById($id);
    }

    /**
     * Find user by email
     */
    public function findByEmail(Email $email): ?User
    {
        $record = $this->db->table('users')->where('email', $email->value())->first();

        if (! $record) {
            return null;
        }

        return $this->userFactory->from($record);
    }

    /**
     * Find user by ID
     */
    public function findById(int $id): ?User
    {
        $record = $this->db->table('users')->where('id', $id)->first();

        if (! $record) {
            return null;
        }

        return $this->userFactory->from($record);
    }
}

For now, we’ll end with this part. In the next section, we’ll continue with another Laravel concept to reach our final goal: enabling communication between the React and Laravel app in a dockerized environment.

If you like my work, you can find me on levelcoding.com
or on LinkedIn (levelcoding). A share or follow on LinkedIn would really help!

How do you make FullStack Demo App for Interviews using Laravel + React with Dockerize Part 1

pirvanm — Mon, 25 Aug 2025 11:00:28 +0000

Sometimes, even if the interview is only for a frontend role, I know from experience that it doesn’t take long until the discussion shifts toward full-stack. For example, at the end of one process, HR ended up asking about my experience with Go, even though the position was originally for React.
That’s why I often push myself: instead of building only the frontend in React, I also implement the backend.
Since I’m more familiar with Laravel, I usually create the backend part as well, set up the communication between the two, and even prepare a Dockerized version.
How are interviews usually structured for you?
I completed this practical test for a specific country and company in Europe.

This project feels like a Middle–Senior level challenge, so I plan to split it into 2 main parts.

Each Main Part will then be divided into 4–5 subparts to keep the learning and implementation process structured.

For example:

Main Part 1
→ Subpart 1 (since we need to start working with dynamic data, this will be the first step).

In project backend/ in folder database which have /migrations/ i made :

create_mentors_table.php
create_mentor_applications_table.php
create_mentorships_table.php
_create_personal_access_tokens_table.php

create_mentors_table.php

public function up(): void
    {
        Schema::create('mentors', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('user_id');
            $table->string('title');
            $table->text('bio');
            $table->text('technical_bio');
            $table->text('mentoring_style');
            $table->text('audience');
            $table->string('avatar')->nullable();
            $table->json('expertise');
            $table->string('availability');
            $table->timestamps();


            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            $table->index('user_id');
        });
    }

create_mentor_applications_table.php

Schema::create('mentor_applications', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('mentor_id'); // foreign to user_id
            $table->unsignedBigInteger('mentee_id'); // foreign to user_id
            $table->text('message');
            $table->string('status'); // pending, accepted, rejected, withdrawn
            $table->timestamp('responded_at')->nullable();
            $table->timestamps();
        });

create_mentorships_table.php

` public function up(): void
    {
        Schema::create('mentorships', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('mentor_id'); // foreign to user_id
            $table->unsignedBigInteger('mentee_id'); // foreign to user_id
            $table->timestamp('started_at');
            $table->timestamp('ended_at')->nullable();
            $table->string('status'); // active, completed, terminated
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('mentorships');
    }

In file personal_access_tokens_table.php i write :


Schema::create('personal_access_tokens', function (Blueprint $table) {
            $table->id();
            $table->morphs('tokenable');
            $table->text('name');
            $table->string('token', 64)->unique();
            $table->text('abilities')->nullable();
            $table->timestamp('last_used_at')->nullable();
            $table->timestamp('expires_at')->nullable()->index();
            $table->timestamps();
        });

database/factories
/ MentorDatabaseFactory.php

 public function create(array $overrides = []): int
    {
        $data = array_merge([
            'user_id' => $overrides['user_id'] ?? throw new \InvalidArgumentException('user_id is required'),
            'title' => fake()->jobTitle(),
            'bio' => fake()->paragraph(3),
            'technical_bio' => fake()->paragraph(3),
            'mentoring_style' => fake()->paragraph(3),
            'audience' => fake()->paragraph(3),
            'avatar' => fake()->optional(0.7)->imageUrl(300, 300, 'people'),
            'expertise' => json_encode(fake()->words(random_int(3, 6))),
            'availability' => fake()->randomElement(['open', 'limited']),
            'created_at' => now(),
            'updated_at' => now(),
        ], $overrides);

        return DB::table('mentors')->insertGetId($data);

UserDatabaseFactory.php

class UserDatabaseFactory
{
    public function create(array $overrides = []): int
    {
        $firstName = $overrides['first_name'] ?? fake()->firstName();
        $lastName = $overrides['last_name'] ?? fake()->lastName();

        $data = array_merge([
            'first_name' => $firstName,
            'last_name' => $lastName,
            'email' => $overrides['email'] ?? strtolower("{$firstName}.{$lastName}") . '@example.com',
            'password' => $overrides['password'] ?? bcrypt('password'),
            'email_verified_at' => now(),
            'created_at' => now(),
            'updated_at' => now(),
        ], $overrides);

        return DB::table('users')->insertGetId($data);
    }

database/seeders
/DatabaseSeeder.php

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        $userFactory = new UserDatabaseFactory();
        $mentorFactory = new MentorDatabaseFactory();

        $mentorsData = [
            [
                'first_name' => 'Sarah',
                'last_name' => 'Johnson',
                'title' => 'Senior Laravel Developer',
                'expertise' => ['laravel', 'php', 'testing', 'ddd'],
                'availability' => 'open',
                'avatar' => 'https://randomuser.me/api/portraits/men/45.jpg',
            ],
            [
                'first_name' => 'Michael',
                'last_name' => 'Chen',
                'title' => 'Full-Stack Engineer & Mentor',
                'expertise' => ['vue', 'javascript', 'api', 'architecture'],
                'availability' => 'open',
                'avatar' => 'https://randomuser.me/api/portraits/women/45.jpg',
            ],
            [
                'first_name' => 'Amina',
                'last_name' => 'Khalid',
                'title' => 'Backend Specialist',
                'expertise' => ['php', 'symfony', 'laravel', 'microservices'],
                'availability' => 'limited',
                'avatar' => 'https://randomuser.me/api/portraits/men/45.jpg',
            ],
            [
                'first_name' => 'James',
                'last_name' => 'Wilson',
                'title' => 'DevOps & Laravel CI/CD',
                'expertise' => ['docker', 'ci/cd', 'aws', 'deployment'],
                'availability' => 'open',
                'avatar' => 'https://randomuser.me/api/portraits/men/45.jpg',
            ],
            [
                'first_name' => 'Elena',
                'last_name' => 'Martinez',
                'title' => 'UX Engineer & Mentor',
                'expertise' => ['ux', 'figma', 'tailwind', 'frontend'],
                'availability' => 'limited',
                'avatar' => 'https://randomuser.me/api/portraits/men/45.jpg',
            ],
            [
                'first_name' => 'David',
                'last_name' => 'Park',
                'title' => 'Laravel Educator',
                'expertise' => ['teaching', 'laravel', 'best practices', 'security'],
                'availability' => 'open',
                'avatar' => 'https://randomuser.me/api/portraits/women/45.jpg',
            ],
        ];

        foreach ($mentorsData as $data) {
            $userId = $userFactory->create([
                'first_name' => $data['first_name'],
                'last_name' => $data['last_name'],
            ]);

            $mentorFactory->create([
                'user_id' => $userId,
                'title' => $data['title'],
                'expertise' => json_encode($data['expertise']),
                'availability' => $data['availability'],
                'avatar' => $data['avatar']
            ]);
        }
    }

✨ Even though I started my career with Laravel 4 and have worked with every version since, I was very curious about Laravel 12. That curiosity pushed me to dive deeper into Domain-Driven Design (DDD), and I’ve been learning and practicing it.

✅ For now, I feel comfortable enough with the fundamentals, so I’m ready to move on to the next step. This will be Subpart 2 of Main Part 1: Domain, where I’ll continue exploring with some practical examples.

This way, it flows naturally:

You highlight your experience.

You show curiosity and learning (DDD).

As business logic we can split this app in 2 part Mentor and User :

on user next steps is this folder structure :
backend/app/Domain
/User/

backend/app/Domain/User/Entities
/User.php

I think the model is the most common part of every Laravel app, and now we can quickly see the differences in models within a modern Laravel 12 application.

<?php

namespace App\Domain\User\Entities;

use App\Domain\User\ValueObjects\Email;
use App\Domain\User\ValueObjects\Password;

class User
{
    public function __construct(
        private int $id,
        private string $first_name,
        private string $last_name,
        private Email $email,
        private Password $password
    ) {}

    public function id(): int
    {
        return $this->id;
    }

    public function firstName(): string
    {
        return $this->first_name;
    }

    public function lastName(): string
    {
        return $this->last_name;
    }

    public function email(): Email
    {
        return $this->email;
    }

    public function password(): Password
    {
        return $this->password;
    }
}

app/Domain/User/Factories
/UserFactoryInterface.php

<?php

namespace App\Domain\User\Factories;

use App\Application\User\DTOs\UserDTO;
use App\Domain\User\Entities\User;

interface UserFactoryInterface
{
    public function from(object|array $data): Entity;
}

backend/app/Domain/User/Factories
/UserValueObjectsFactoryInterface.php

<?php

namespace App\Domain\User\Factories;

use App\Domain\User\ValueObjects\Email;
use App\Domain\User\ValueObjects\Password;

interface UserValueObjectsFactoryInterface
{
    public function email(string $value): Email;
    public function password(string $value): Password;
}

backend/app/Domain/User/Repositories
/UserRepositoryInterface.php

<?php

namespace App\Domain\User\Repositories;

use App\Domain\User\Entities\User;
use App\Domain\User\ValueObjects\Email;

interface UserRepositoryInterface
{
    public function create(array $data): User;
    public function findByEmail(Email $email): ?User;
    public function findById(int $id): ?User;
}

backend/app/Domain/User/ValueObjects
/Email.php

<?php

namespace App\Domain\User\ValueObjects;

use InvalidArgumentException;

class Email
{
    public function __construct(private string $value)
    {
        if (! filter_var($value, FILTER_VALIDATE_EMAIL)) {
            throw new InvalidArgumentException("Invalid email: {$value}");
        }
        $this->value = strtolower(trim($value));
    }

    public function value(): string
    {
        return $this->value;
    }

    public function equals(self $other): bool
    {
        return $this->value() === $other->value();
    }

    public function __toString(): string
    {
        return $this->value();
    }
}

app/Domain/User/ValueObjects
/Password.php

<?php

namespace App\Domain\User\ValueObjects;

use InvalidArgumentException;

class Password
{
    public function __construct(private string $value)
    {
        if (strlen($value) < 8) {
            throw new InvalidArgumentException('Password must be at least 8 characters.');
        }
    }

    public function value(): string
    {
        return $this->value;
    }

    public function matches(string $plainText): bool
    {
        return password_verify($plainText, $this->value);
    }

    public static function hash(string $plainText): self
    {
        return new self(password_hash($plainText, PASSWORD_DEFAULT));
    }
}

🛠 Maybe because 4 months ago I worked with the Symfony Framework, and since I’m a full-stack developer, I often work with different technologies.

In 2023, I spent some time with CodeIgniter, while most of my frontend work was with Vue.js. Occasionally, I also worked with React. Unfortunately, in 2024, I had to spend a lot of time using jQuery (because of company requirements).

Now, I feel a bit unsure about what the best practices in Laravel are today. 🤔
👉 Any feedback or advice from the community would be really welcome.

After this, I will continue with the rest of the DDD implementation in the Laravel 12 app.

If you like my work, feel free to follow me on the web or on LinkedIn at LevelCoding.”

And I used AI only to correct my grammatical phrases — the code is entirely thought out by me.

100 Days of Servers Distributions- Day 9: Why HAProxy for Load Balancing?

pirvanm — Tue, 15 Oct 2024 16:26:18 +0000

When it comes to ensuring the scalability, reliability, and high availability of your web applications, choosing the right load balancer is critical. Among the myriad of options available, HAProxy stands out as a popular and trusted solution. Here’s why HAProxy continues to be a top choice for load balancing across different environments:

Proven Reliability and Stability
HAProxy has been around for over two decades, and during that time, it has earned a reputation for being extremely reliable. Many large-scale enterprises, including the likes of Airbnb, Twitter, and Stack Overflow, rely on HAProxy to keep their applications running smoothly. Its performance is battle-tested in some of the most demanding environments, which makes it a trustworthy choice for both small startups and large enterprises.
High Performance and Low Latency
HAProxy is known for its ability to handle extremely high volumes of traffic with minimal latency. It’s designed to efficiently distribute requests across multiple servers, maximizing the use of available resources and ensuring that users experience fast, uninterrupted service. Whether handling hundreds of requests per second or hundreds of thousands, HAProxy performs exceptionally well.
Advanced Features for Flexible Load Balancing
HAProxy offers a wide range of load balancing algorithms to fit different needs, from simple round-robin to more advanced options like least connections, source IP hashing, and URI-based routing. This flexibility allows you to tailor the traffic distribution to the specific requirements of your application, ensuring optimal performance.

It also supports both Layer 4 (TCP) and Layer 7 (HTTP) load balancing, giving you more control over traffic routing. At Layer 7, it can inspect HTTP headers, cookies, and content, which enables intelligent traffic routing based on deeper application logic.

Health Checks and Failover HAProxy has built-in health checks, which regularly monitor the health of backend servers. If a server becomes unresponsive or fails, HAProxy automatically removes it from the pool, directing traffic only to healthy servers. This ensures high availability and helps avoid downtime, which is crucial for mission-critical applications.

Additionally, in the event of server failure, HAProxy supports automatic failover, rerouting traffic to backup servers or another data center, ensuring continuity of service.

Security In today’s digital landscape, security is paramount, and HAProxy provides several mechanisms to protect your application:

SSL termination: HAProxy can handle SSL encryption and decryption, offloading this processor-heavy task from your application servers.
DDoS protection: HAProxy can mitigate certain types of DDoS attacks by limiting the number of requests from a single IP address or by enforcing rate limits.
Access control: You can define rules to restrict access based on IP, geolocation, or other criteria, preventing malicious actors from reaching your application.

Ease of Use and Configuration Despite being powerful, HAProxy remains relatively straightforward to set up and configure. Its configuration file is well-documented and highly customizable, making it easy to tailor HAProxy to your specific needs. Whether you’re setting up a simple load balancer or a complex architecture with SSL offloading and multiple backend pools, HAProxy makes it accessible.

Moreover, HAProxy offers a web-based management interface, allowing for real-time monitoring and adjustments, further simplifying administration.

Open Source with a Strong Community HAProxy is open-source, which means it’s free to use and has a vibrant community of developers contributing to its ongoing improvement. This open nature ensures that HAProxy remains up-to-date with the latest trends in web traffic management while being accessible to a wide range of users.

If you need additional enterprise-level features, HAProxy Technologies offers a commercial version, HAProxy Enterprise, which provides enhanced support, advanced features, and long-term stability.

Scalability
As your business grows, so will the demands on your infrastructure. HAProxy is built to scale, making it easy to add new servers to your backend pool and balance the increasing traffic load. Whether you’re running on a single server or a distributed, multi-data-center setup, HAProxy can handle the scaling demands seamlessly.
Cost Efficiency
HAProxy is free and open-source, which allows organizations to significantly cut down on costs associated with load balancing solutions. Even with large-scale operations, HAProxy’s performance, combined with its low resource consumption, makes it a cost-effective choice.

Conclusion
HAProxy’s combination of performance, flexibility, and reliability makes it an outstanding choice for load balancing. Whether you're running a small web app or managing a complex, high-traffic infrastructure, HAProxy provides a solid foundation for ensuring high availability and efficient traffic management.

With its open-source nature, advanced features, and proven track record in real-world applications, HAProxy continues to be a go-to solution for developers and system administrators looking to ensure the scalability and stability of their applications.

Is HAProxy the right choice for your project? If you’re looking for a load balancer that is powerful, reliable, and easy to configure, it very well might be. Share your thoughts or experiences with HAProxy below!

Follow me for more on my page!

100 Days of Servers Distributions- Day 8: What is a Load Balancer?

pirvanm — Wed, 09 Oct 2024 19:22:42 +0000

What is a Load Balancer? A Comprehensive Overview

In the modern era of cloud computing, large-scale applications, and distributed systems, ensuring reliable, fast, and efficient service delivery is paramount. One of the essential tools that help achieve this is a load balancer. But what exactly is a load balancer, and why is it so important in today's digital infrastructure? Let’s dive in.

What is a Load Balancer?
A load balancer is a system (hardware or software) that automatically distributes incoming network traffic across multiple servers or resources. Its primary goal is to ensure that no single server bears too much load, which could slow down performance, or worse, crash the system.

In simpler terms, a load balancer acts as a “traffic cop” sitting in front of your servers. It routes client requests efficiently to ensure that the system remains highly available and can handle heavy traffic without hiccups. It also helps scale resources to accommodate fluctuating workloads, ensuring high availability and reliability of applications.

Types of Load Balancers
There are several types of load balancers, each tailored to specific needs:

Layer 4 Load Balancers (Transport Layer):

Operates at the transport layer (Layer 4 of the OSI model) and routes traffic based on IP addresses and port numbers.
This type of load balancer is fast since it doesn’t inspect the actual content of the data but only deals with connection-level information (e.g., TCP/UDP).
It distributes traffic evenly by looking at simple data such as source and destination IP addresses.
Layer 7 Load Balancers (Application Layer):

Operates at the application layer (Layer 7 of the OSI model) and is more advanced.
Layer 7 load balancers make routing decisions based on the actual content of the application, such as HTTP headers, URLs, or cookies.
For example, you can configure a Layer 7 load balancer to direct traffic requesting videos to one server, while traffic requesting static images goes to another.
Hardware Load Balancers:

These are physical devices dedicated to balancing loads between servers.
They are often more expensive and are used in large data centers where performance needs to be optimized to the highest degree.
Examples: F5 Networks, Citrix ADC.
Software Load Balancers:

These are software solutions that run on standard servers and can perform the same function as hardware load balancers, often at a lower cost.
Examples include HAProxy, Nginx, and software-based solutions from cloud providers like AWS Elastic Load Balancer (ELB) or Google Cloud Load Balancing.
Global Load Balancers:

Distribute traffic across servers that may be located in different geographic regions.
Used to improve latency and availability by routing users to the closest data center.
How Does a Load Balancer Work?
When a client (such as a web browser) sends a request to a web application, the load balancer is the first point of contact. Here’s a step-by-step breakdown:

Client Request: The client sends a request (for example, to access a website) to the load balancer's public IP address.

Traffic Distribution: The load balancer receives the request and determines which backend server (also known as a "node") is the best one to handle the request. This decision is made based on the load balancing algorithm being used.

Server Response: Once the load balancer forwards the client’s request to a server, that server processes the request and returns the response back to the load balancer.

Return to Client: The load balancer then sends the server’s response back to the client as if the load balancer itself was the original server.

In this entire process, the load balancer ensures that no one server is overwhelmed with too many requests, maintaining optimal performance.

Load Balancing Algorithms
Different load balancers use various algorithms to determine how traffic is distributed. Some of the most common algorithms include:

Round Robin:

This is the simplest method where incoming requests are distributed sequentially to each server.
Ideal for systems where all servers have similar capabilities.

Least Connections:

Traffic is routed to the server with the fewest active connections.
This method is beneficial when the load varies for each request, ensuring that no server gets overloaded.

IP Hash:

The client’s IP address is used to determine which server receives the request.
This is useful for cases where you want the same client to be routed to the same server for session persistence.

Weighted Round Robin:

Similar to Round Robin but assigns a weight to each server based on its capacity. Servers with higher weights will receive more requests.

Random:

Requests are randomly distributed to servers, which can work well for small systems with evenly matched servers.
Benefits of a Load Balancer
Improved Availability:

By distributing traffic across multiple servers, a load balancer ensures that the failure of one server doesn't bring down the entire application. If one server fails, the load balancer reroutes traffic to the healthy servers, ensuring high availability.
Scalability:

Load balancers make it easier to add or remove servers to handle varying traffic loads. This ensures that applications can scale effectively as traffic demands increase.
Optimized Performance:

By intelligently distributing traffic, a load balancer helps prevent any one server from being overwhelmed, reducing response times and improving overall performance.
Fault Tolerance:

In case of server failure, the load balancer can quickly reroute traffic to other operational servers, providing fault tolerance to ensure smooth operation.
Enhanced Security:

Load balancers can add an extra layer of security by preventing direct access to backend servers, which reduces the risk of Distributed Denial of Service (DDoS) attacks and other security threats.
Real-World Applications of Load Balancers
Web Applications:

Many web applications today are highly dynamic, serving millions of users globally. Load balancers help ensure these applications remain responsive and available by balancing the traffic across multiple servers.
Content Delivery Networks (CDN):

CDNs use global load balancing to direct users to the nearest server, optimizing the delivery of media and static content like images, videos, and scripts.
Database Load Balancing:

Load balancing can also be used for database clusters, ensuring that read and write requests are distributed among multiple database nodes for high performance and reliability.
Cloud Computing:

Cloud platforms like AWS, Google Cloud, and Microsoft Azure offer load balancing as a core service, helping businesses manage and scale applications in the cloud.
Conclusion
In today’s fast-paced digital world, ensuring that applications are always available and can handle large volumes of traffic is crucial. A load balancer plays a critical role in achieving this by distributing traffic across multiple servers, enhancing performance, and increasing fault tolerance. Whether in small-scale deployments or large, geographically distributed systems, load balancers are an indispensable component of modern IT infrastructure.

If you like and wanna suport, make a account and navigate!

100 Days of Servers Distributions- Day 7: Importance of Load Balancing

pirvanm — Mon, 07 Oct 2024 18:23:41 +0000

In today’s fast-paced digital world, we rely on websites, apps, and cloud services more than ever. Whether you're shopping online, streaming your favorite show, or working remotely, you expect everything to work smoothly, right? That’s where load balancing comes in. It’s one of the behind-the-scenes heroes that ensures you get a seamless experience when using digital services. Let’s break down what load balancing is, why it’s so important, and how it keeps things running without a hitch.

What is Load Balancing, Anyway?
Imagine you’re at a busy restaurant, and there’s one overwhelmed server trying to handle all the tables. That’s a recipe for long waits, missed orders, and unhappy customers. Now, picture that same restaurant with multiple servers sharing the workload equally. Suddenly, everything runs smoothly, orders come out faster, and the customers are happy.

That’s essentially what load balancing does for websites and apps. Instead of overloading a single server with too many requests, a load balancer spreads the traffic across multiple servers, making sure none of them get overwhelmed. This way, your website stays fast, responsive, and available even when there’s a sudden surge in visitors or users.

Why Load Balancing is a Big Deal

Better Performance and Speed
Nobody likes waiting for a website to load. Slow pages can frustrate users and make them leave. Load balancing ensures that no single server gets bogged down by too many requests, so everything works faster. Whether it’s someone streaming a video, downloading a file, or making a purchase, the load balancer keeps things moving efficiently by directing users to the server that can handle their request the quickest.
Less Downtime, More Uptime
Downtime is every website owner's worst nightmare. Imagine your site crashes just when traffic spikes (like during a big sale or promotion). Load balancing helps prevent this by monitoring which servers are healthy. If one server goes down, the load balancer redirects traffic to the others that are still working. This keeps your site up and running, even if there’s a hiccup behind the scenes.
Scalability: Growing Pains Solved
As your business grows, so does your traffic. Load balancing makes it easy to scale. You can add more servers as needed, and the load balancer will automatically distribute the increased traffic across them. It’s like adding extra lanes to a highway during rush hour—everything moves more smoothly when there’s more capacity to handle the demand.
Built-in Backup Plan (aka Fault Tolerance)
No one likes to think about their servers failing, but it happens. Load balancing adds a layer of protection by distributing traffic across multiple servers, so if one fails, there’s always another one to pick up the slack. In more complex setups, load balancers can even redirect traffic to servers in other regions if there’s a big issue, like a power outage or natural disaster in one area.

Using Resources Wisely
Think of load balancing like a well-organized assembly line. It ensures every server is working at its best capacity without getting overwhelmed. If one server is less busy, it will take on more tasks; if another is at its limit, the load balancer stops sending traffic there until it can handle more. This efficient use of resources keeps everything running smoothly.
Bonus: Extra Security Features
Some load balancers come with handy security features like protection against Distributed Denial of Service (DDoS) attacks (when bad actors flood a site with fake traffic to take it down) and SSL encryption (which keeps your data safe). It’s like having a digital bouncer that ensures only legitimate traffic gets through while keeping your servers secure.

Different Types of Load Balancers
Not all load balancers work the same way. There are a few different types, each suited to different needs:

DNS Load Balancers: These route traffic based on where the user is located or how fast a server can respond. They’re great for distributing traffic across multiple data centers or cloud regions.
Hardware Load Balancers: Physical devices that handle massive traffic loads, often used by big companies in data centers.
Software Load Balancers: These run on servers and are commonly used in the cloud because they’re flexible and easy to scale.
Layer 4 vs. Layer 7 Load Balancers:
Layer 4 works with basic data like IP addresses and ports.
Layer 7 goes deeper, making decisions based on the actual content of the request (like looking at specific URLs or cookies), allowing for smarter traffic distribution.

Real-Life Examples of Load Balancing in Action
E-commerce Sites: Imagine a major online retailer like Amazon during Black Friday. Without load balancing, their servers would buckle under the sheer volume of people trying to shop all at once. Load balancing spreads that traffic out, ensuring a smooth shopping experience.

Streaming Services: If you’re watching a movie on Netflix, you probably don’t think about how many others are watching at the same time. Load balancers ensure millions of users can stream without interruption, even during peak hours.

Cloud Platforms: Services like AWS and Google Cloud use load balancing to distribute workloads across their vast network of servers, ensuring that clients' apps and websites run smoothly, no matter how many users log in.

Wrapping It Up
Load balancing is the unsung hero of modern IT. It keeps websites and apps running smoothly, even during traffic surges, server failures, or rapid growth. By spreading out the workload, it ensures that no single server gets overwhelmed, making everything faster and more reliable for users.

In a world where people expect websites to be fast, available 24/7, and able to handle a sudden rush of traffic, load balancing isn’t just a nice-to-have—it’s a must. Whether you’re running a small online store or a global enterprise, load balancing helps you stay competitive by keeping your services fast, secure, and always online.

For more courses follow me course casts

100 Days of Servers Distributions- Day 6: Exploring DNS and IP Routing

pirvanm — Fri, 04 Oct 2024 18:36:57 +0000

Day 6: Exploring DNS and IP Routing – A Journey into the Heart of the Internet
Welcome to Day 6 of our tech adventure! Today, we’re diving into two of the most crucial elements that keep the internet running smoothly: DNS (Domain Name System) and IP routing. While these might sound like technical buzzwords, they play a massive role in how we experience the internet every day—from sending emails to loading a web page in seconds. Let’s break them down into digestible, human-friendly bites.

What is DNS? (And why should you care?)
Imagine you’re in a huge city, and every building has a unique, hard-to-remember address (like 192.168.1.1—sound familiar?). That’s how computers communicate, using IP addresses that look like strings of random numbers. But we humans are better at remembering names than numbers, right? That’s where DNS (Domain Name System) steps in.

DNS acts as the phonebook of the internet. When you type a website name like www.example.com into your browser, DNS translates it into the corresponding IP address. It's like asking a friend for the address of that new restaurant downtown—your friend (the DNS server) tells you where to go!

We'll use Docker to containerize it.

Here's how we can achieve that:

Steps:
Create a simple web application (we’ll use Python with Flask as an example).
Write a Dockerfile to package this application into a Docker container.
Build and run the Docker container.
Let’s break it down.

Create the Application We’ll use Flask to serve your article as a web page. Flask is a lightweight web framework for Python.

File structure:
bash
Copy code
dockerized-article/
│
├── app/
│ ├── templates/
│ │ └── index.html
│ ├── app.py
├── Dockerfile
├── requirements.txt
Step 1.1: Create the Flask app (app.py)
Inside the app/ directory, create the app.py file to serve the article.

python
Copy code
from flask import Flask, render_template

app = Flask(name)

@app.route('/')
def home():
return render_template('index.html')

if name == 'main':
app.run(host='0.0.0.0', port=5000)
Step 1.2: Create the HTML template (index.html)
Inside the app/templates/ directory, create index.html to display the article content.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 6: Exploring DNS and IP Routing</title>
</head>
<body>
    <h1>Day 6: Exploring DNS and IP Routing</h1>
    <p>Welcome to Day 6 of our tech adventure! Today, we’re diving into two of the most crucial elements that keep the internet running smoothly: DNS (Domain Name System) and IP routing...</p>
    <!-- You can copy and paste the rest of the article here -->
</body>
</html>

Step 1.3: Specify dependencies (requirements.txt)
Create a requirements.txt file in the root of your project directory to specify the Python dependencies:

makefile

Flask==2.1.2

Write a Dockerfile

Next, we’ll create a Dockerfile to define how our application should be packaged into a Docker image.

Create a Dockerfile in the root of your project directory:

Dockerfile

Step 1: Use an official Python runtime as a parent image

FROM python:3.9-slim

Step 2: Set the working directory in the container

WORKDIR /app

Step 3: Copy the current directory contents into the container at /app

COPY . /app

Step 4: Install any necessary dependencies

RUN pip install --no-cache-dir -r requirements.txt

Step 5: Make port 5000 available to the world outside this container

EXPOSE 5000

Step 6: Run the application

CMD ["python", "app/app.py"]

Build and Run the Docker Container Step 3.1: Build the Docker image In the terminal, navigate to the project directory (dockerized-article/), then run the following command to build your Docker image:

docker build -t dns-ip-routing-article .
Step 3.2: Run the Docker container
Once the image is built, you can run the container using:

docker run -d -p 5000:5000 dns-ip-routing-article
This command will:

Run the container in the background (-d).
Map port 5000 on your local machine to port 5000 in the container (-p 5000:5000).

Step 3.3: Access the web page
Once the container is up and running, open your browser and go to http://localhost:5000. You should see the article displayed on the webpage.

Without DNS, we’d have to memorize numbers instead of domain names. Imagine having to remember IP addresses for every website you visit! No thanks!

Here’s a real-world example:

You type www.example.com into your browser.
Your browser asks the DNS server, “Hey, what’s the IP address for this domain?”
DNS responds with something like, “Sure, it’s 93.184.216.34.”
Now, your browser knows where to go to load the website!
Why should you care? Every time you search for something or access a webpage, DNS is working behind the scenes, making your internet experience faster and easier. Understanding DNS also helps troubleshoot when websites seem unreachable. It could be a DNS issue!

IP Routing: The Internet’s Roadmap
Once DNS translates the domain into an IP address, the next step is getting your data to its destination. This is where IP routing comes into play. Imagine driving from your home to a new restaurant. You might use a GPS app to find the best route, right? IP routing works in a similar way—it figures out the best path for your data to travel across the internet.

But the internet’s roads aren’t made of concrete—they’re made of networks. Routers act like traffic controllers, deciding where to send packets of data. Your data doesn’t travel in one giant piece; instead, it’s broken down into smaller packets, each of which takes the most efficient route possible to reach its destination.

Here’s how IP routing works in simple steps:

Your computer sends a packet of data to the destination IP address (which DNS helped you find).
The data passes through a series of routers, each one directing it closer to the destination.
Finally, the packets arrive, and the website loads or your email is delivered.
It sounds simple, but behind the scenes, routers are making split-second decisions based on traffic, distance, and other factors to ensure that your data gets where it needs to go. IP routing is what ensures that you can send a message from New York to Tokyo in the blink of an eye, with the data hopping between networks along the way.

Bringing DNS and IP Routing Together
Here’s how it all ties together: Every time you open a website, send an email, or stream a video, DNS and IP routing are working in tandem to make it happen.

DNS first translates the user-friendly domain name into an IP address.
IP routing then ensures that data travels across the most efficient networks to its destination.
Think of DNS as the translator and IP routing as the delivery service. Without one, you wouldn’t be able to find what you’re looking for, and without the other, your data wouldn’t know where to go.

Troubleshooting: When Things Go Wrong
Understanding the basics of DNS and IP routing can be a huge help when the internet isn’t cooperating. Here are two common scenarios:

Problem: You can’t access a website, but everything else works.

Potential cause: DNS issue. If DNS can’t translate the domain name into an IP address, your browser won’t know where to go.
Quick fix: Try clearing your DNS cache or switching to a public DNS service like Google’s 8.8.8.8.
Problem: Everything is super slow or not loading properly.

Potential cause: Routing issue. If there’s heavy traffic on the networks your data is traveling through, it can slow things down.
Quick fix: Restarting your router might help, or you can try using a VPN to route your traffic through less congested networks.
Why Understanding This Matters
It’s easy to take the internet for granted. We expect websites to load instantly, emails to send in seconds, and videos to stream smoothly. But when something goes wrong, having a basic understanding of DNS and IP routing gives you the power to diagnose issues, fix problems, or simply appreciate the complexity of what’s happening behind the scenes.

These two systems—DNS and IP routing—are like the air traffic controllers of the internet. They make sure your data gets where it needs to go quickly, efficiently, and safely. So, the next time you type a web address or send an email, give a nod to these unsung heroes that make your digital life seamless.

You wanna support me ? Just make a account and navigate!

100 Days of Servers Distributions- Day 5: Network Layers and Protocols – Understanding the Foundation of Network Communication

pirvanm — Wed, 02 Oct 2024 16:44:13 +0000

What Are Network Layers?
In networking, network layers refer to the structured levels that organize how data travels from one point to another across a network. Each layer has a specific function and works in concert with other layers to ensure successful communication.

The most common framework to understand network layers is the OSI Model (Open Systems Interconnection), which breaks networking into seven distinct layers. Each of these layers handles specific tasks related to network communication, starting from the physical transmission of data up to the application that uses the data.

Here’s a quick overview of the 7 Layers of the OSI Model:

Physical Layer: This is the lowest layer and is responsible for the transmission of raw bitstreams (binary data) over a physical medium like cables or wireless signals.

Data Link Layer: It establishes and terminates connections between physically connected nodes. It also handles error detection and correction to ensure data integrity over the physical layer.

Network Layer: This layer determines the best physical path for data to travel, which is crucial in routing. IP (Internet Protocol) is a well-known example of a network layer protocol.

Transport Layer: It ensures reliable data transfer between systems, managing flow control, error recovery, and data segmentation. TCP (Transmission Control Protocol) and UDP (User Datagram Protocol) are key protocols here.

Session Layer: This layer establishes, manages, and terminates communication sessions. It is responsible for maintaining sessions between devices for the duration of their connection.

Presentation Layer: It acts as the translator for the network, ensuring that data is in a usable format for the application layer. It deals with data encryption, compression, and encoding.

Application Layer: The top layer, which interacts directly with the end-user. This layer encompasses protocols used for specific applications such as HTTP for web browsing, SMTP for email, and FTP for file transfer.

How Network Layers and Protocols Work Together
When data is sent over a network, it doesn’t just jump from one device to another. It undergoes a series of transformations as it moves through each network layer, a process known as encapsulation.

Imagine sending an email:

At the Application Layer, the email is created.
The Presentation Layer converts the data into a format that the network can understand.
The Transport Layer breaks the email into smaller pieces, called segments, and ensures it can be reassembled correctly.
The Network Layer adds addressing information so the email can be routed to its destination.
The Data Link Layer adds error-checking information and prepares the data for transmission.
Finally, the Physical Layer converts the data into electrical, radio, or optical signals that are sent through the network.
When the email reaches its destination, the layers on the receiving device reverse the process to reconstruct the email.

Who we can dockerize ?

Docker Compose (Optional)
If you want to add more services (e.g., a database or caching layer), you could use Docker Compose. Here’s a basic docker-compose.yml file for running the app alone:

docker-compose.yml

version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development

Building and Running the Dockerized App
Step 1: Build the Docker Image
To build the Docker image for the application, run the following command from the project directory:

docker build -t network-layers-app .

This command tells Docker to build an image with the name network-layers-app based on the Dockerfile.

Step 2: Run the Docker Container
Once the image is built, you can run the app in a Docker container using the following command:

docker run -p 3000:3000 network-layers-app
This binds port 3000 on your host machine to port 3000 inside the container, allowing you to access the app in your browser by visiting http://localhost:3000.

For more course click here

100 Days of Servers Distributions- Days 4 and 100 Day 4 Introduction to Web Servers

pirvanm — Mon, 30 Sep 2024 09:57:22 +0000

Day 4 Introduction to Web Servers

In this journey of our article series, we will dive deeper into one of the key and essential components for the functioning of the internet: web servers. The KISS principle (Keep It Simple, Stupid) is a fundamental concept that should be frequently maintained to keep everything clean and straightforward. For this reason, we will strengthen beginner-level knowledge to understand web servers, which is essential for building and hosting websites or web applications.

Personally, for one of my projects in a real-world scenario, I use Laravel for the backend and Flutter for the mobile app front end. Additionally, I use Vue.js for another project, and for a more ambitious web project, I’m using React.

A web server is a system that should have the sole responsibility for storing, processing, and delivering web pages to users. We are now talking about both the software and hardware aspects that make websites accessible.

this is nuxt config :

require("dotenv").config();
export default {
  env: {
    baseUrl: process.env.BASE_URL,
  },
  generate: {
    /* routes () {
        return axios.get('https://myapisite.com/')
            .then((res) => {
                return res.data.map((user) => {
                    return '/users/' + user.id
                })
            })
    }*/
  },

When we type a URL or even an IP address into a browser, we are making a request to a server, with the URL being the path to the server. The web server receives the request, processes it, and sends back the appropriate response, which could be an HTML page, an image, a video, or other resources.

At its most basic level, a web server has two primary roles:
Handle HTTP Requests: Respond to HTTP or HTTPS requests made by clients (web browsers).
Serve Content: Deliver static or dynamic content like HTML pages, CSS, JavaScript, images, and multimedia files.

Handle HTTP Requests: Respond to HTTP or HTTPS requests made by clients (web browsers).
Serve Content: Deliver static or dynamic content like HTML pages, CSS, JavaScript, images, and multimedia files.

How a Web Server Works

Step by step, a server follows these stages:

Client Request: A client (your browser) sends an HTTP request to the web server. For example, when you type www.mysite.com, the browser sends a request to the server hosting the site.

The Server Processes the Request: The web server receives the request and checks for the requested content. If the content exists, it is prepared for response (such as an HTML file, an image, etc.).

The Web Server Sends the Response: The server sends the response back to the client. If the content is not found, the server returns or should return, as a best practice, an error message like the classic "404 Not Found."

The Client Displays the Content: In the browser, the server's response is processed, and the pages or various resources are rendered or displayed.

Types of Web Servers

Several web servers are available, each with its own strengths and use cases. Here are some of the most popular ones:

Apache HTTP Server Overview: Apache is one of the oldest and most widely used web servers. It's open-source and highly configurable, making it a top choice for many web hosting companies and developers. Use Cases: Suitable for small to large-scale websites, offering extensive customization and control over server configurations.
Nginx Overview: Nginx (pronounced "Engine-X") is known for its performance, scalability, and efficient resource usage. It's designed to handle high loads and is often used as a reverse proxy or load balancer. Use Cases: Ideal for high-traffic websites, API management, and microservices architecture.
Microsoft IIS (Internet Information Services) Overview: IIS is Microsoft's web server, tightly integrated with Windows servers. It supports multiple languages, including ASP.NET, PHP, and others. Use Cases: Preferred for Windows-based environments and enterprise solutions that rely on Microsoft technologies.
LiteSpeed Overview: LiteSpeed is a lightweight, high-performance web server that offers compatibility with Apache's configuration files. It’s designed to boost performance while keeping resource consumption low. Use Cases: Suitable for high-performance websites where speed and low server load are critical.
Node.js Overview: Node.js is not a traditional web server but a JavaScript runtime that allows you to create web servers using JavaScript. It is highly efficient for real-time applications and services. Use Cases: Perfect for dynamic, real-time applications like chat apps, live video streaming, and APIs.

For a express server as locally :
in my package.json: I have :

{
  "name": "node-hello-world",
  "private": true,
  "version": "0.0.1",
  "description": "Node.js Hello world app on docker",
  "author": "hypriot.com",
  "dependencies": {
    "express": "4.12.0"
  }
}

in same folder :
I have index.js

var express = require('express');
var os = require("os");

var app = express();
var hostname = os.hostname();



app.get('/', function (req, res) {
  const ip = req.headers['x-forwarded-for'];

  res.send('<html><body>Node.js container ' + hostname + ' ' + 'Client IP: ' + ip + '</body></html>');
});

app.listen(80);
console.log('Running on http://localhost');

After I write those files, I need just run npm install and node index.js!

Web Servers can serve both static and dynamic content, depending on the type of website and its configuration, which can vary:

Static Server simply delivers stored files to the client without processing them. Static websites are faster but limited in interactivity. The files are pre-built in HTML, CSS, and JavaScript, and they do not change when the user accesses them.

Example: A portfolio website or a company's homepage.
Dynamic Servers handle more complex requests by generating content progressively. These typically involve a database and a server-side programming language such as PHP, Python, or Node.js.

Example: An online store provides content that is updated based on user interaction.

For efficient operation, a web server contains several components. The primary elements include:

HTTP Software: It handles HTTP requests and responses. This software is responsible for delivering content and communicating with clients.

Operating System: The web server runs on an operating system like Linux, Windows, or macOS, which allows for the management of server resources, files, and processes.

Database (Optional): Many websites with dynamic content require a database, such as MySQL or PostgreSQL, to store or retrieve data in real-time. For example, when we log in, the information is fetched from the database.

Server-Side Language (Optional): Languages such as PHP, Python, or JavaScript (Node.js) control dynamic content and interaction with the database.

There are different ways you can host your website:
Local Hosting: Running a web server on your own computer for development purposes. You can use tools like XAMPP (for Apache) or a Node.js server for testing your applications.
Shared Hosting: A cost-effective solution where multiple websites share the same server resources. It’s commonly offered by web hosting providers.
VPS Hosting: Virtual Private Server (VPS) hosting gives you more control and resources than shared hosting by providing a virtual server dedicated to your needs.
Cloud Hosting: Services like Amazon Web Services (AWS), Google Cloud, or Microsoft Azure offer scalable, pay-as-you-go web hosting options for large-scale applications.
Sunt diferite modalitate a gazdui un website :
Local Hosting : Running a web server on your own computer for development purposes. You can use tools like XAMPP (for Apache) or a Node.js server for testing your applications.
Shared Hosting: A cost-effective solution where multiple websites share the same server resources. It’s commonly offered by web hosting providers.

VPS Hosting: Virtual Private Server (VPS) hosting gives you more control and resources than shared hosting by providing a virtual server dedicated to your needs.

Personally, when it comes to a portfolio, I use a shared hosting solution. A VPS is ideal for solutions that require a custom server. From what I know, it's quite difficult to set up a shared server for Node.js, so a VPS is the best solution.

On DigitalOcean, I have a web server for the API built with Laravel, and for rendering with Nuxt.js, which communicates with interactions from Vue.js, I use a Node.js server that uses half the resources of the API.

For more follow me on more courses

100 Days of Servers Distributions- Days 3 and 100

pirvanm — Fri, 27 Sep 2024 17:56:35 +0000

Servers, Virtualization, and Containers

Nowadays, it could be said that the path between virtualization and servers, through containers, is an essential part. These three elements form a fundamental component of modern infrastructure, designed to provide a scalable and manageable solution for deploying applications, whether they are web or software. In this article, we will delve deeper into the world of servers, virtualization, and containers, exploring and discussing how they work. We will highlight their benefits and roles in providing a better-structured IT infrastructure compared to classic servers.

Servers: The Heart of IT Infrastructure
It is certainly true that the core, or heart, of any IT infrastructure is represented by servers. A server is a powerful computer dedicated to processing requests and delivering information to other computers (clients) via a network, whether it be the internet or an intranet. Servers come in various types, each serving a specific role in the IT world.

File Servers: Manage and store data accessed by users or the system.
Web Servers: Deliver content such as HTML pages (as the final product) of a web application, or media files to users over the internet.

Database Servers: Store and manage collections of data, allowing access and queries through applications. Personally, I see them as structured data tables.

Application Servers: Host and communicate with applications, sending data and various services to end users.

A modern aspect is that today we have both frontend web servers and backend servers, with intermediaries such as Next.js or Nuxt.js for Vue.js fans.

Traditional servers were essentially physical machines hosted in data centers. However, with their evolution, the concept of a server has extended beyond the first level of the development environment, leading to virtualization.

Personally, at my job, I have worked with AWS, and for personal cloud use, I have been using DigitalOcean for several years.

Virtualization is the process of creating virtual versions of a physical server, allowing multiple operations and applications to run on the same hardware. By using a hypervisor (software that processes and enables the virtualization environment), you can divide a single physical server into multiple virtual machines (VMs), each running its own independent operating system.

Looking back on my professional experience, I can say that I first used virtual machines in 2016 through VirtualBox on a Windows operating system. Around 2018, I discovered Docker, which I used for a few months, but by 2020, I unconsciously returned to VirtualBox. In 2021, however, I came back to the Docker world and have stayed in it ever since.
Since 2022, I’ve been using WSL (Windows Subsystem for Linux), virtualizing Ubuntu through Windows in my professional work, but personally, I prefer dual-boot and running Docker directly from Ubuntu, as WSL causes various issues.

Benefits of virtualization:

Cost efficiency: By consolidating multiple VMs on a single physical server, organizations reduce the need for more hardware units, saving money on both hardware and software.
Resource optimization: Virtualization offers better management of resources like CPU, memory, and storage. I can also add that Docker Desktop is quite helpful, even though Docker can be used without Docker Desktop on Linux. However, Docker Desktop is a good, free option.
Scalability: Virtual machines can be created, modified, and deleted quickly based on the company's needs.
Isolation: Each VM operates independently, ensuring that issues in one VM do not affect the others, unlike on a physical server.
Common hypervisors include VMware ESXi, Microsoft Hyper-V, and KVM (Kernel-based Virtual Machine). Virtualization has transformed the way IT infrastructure is managed, making it easier to dynamically allocate resources and run multiple environments on a single piece of hardware.

If you are not a fan of virtual machines like VirtualBox, fortunately, Hyper-V comes preinstalled with Docker Desktop.

Corectura în limba română:

Containerele: Nivelul următor al virtualizării

Un punct important în revoluționarea virtualizării unei infrastructuri îl reprezintă containerele, fiind un pas înainte către viitor. Containerele oferă o modalitate curată și portabilă de a împacheta și reutiliza aplicațiile împreună cu toate dependențele lor, permițându-le să funcționeze constant în diverse medii, de la dezvoltare până la producție.

Spre deosebire de mașinile virtuale (VM-uri), care necesită un sistem de operare complet pentru fiecare instanță, containerele împart același kernel al sistemului de operare, ceea ce le face mai eficiente și mai rapide pentru a fi repornite de la zero. Această abordare duce la o mai bună utilizare a resurselor și la o scalabilitate sporită, în special pentru arhitecturile de tip microserviciu.

Diferențele cheie între containere și mașinile virtuale:

Mașinile virtuale: Fiecare VM rulează un sistem de operare complet, ceea ce duce la un consum mai mare de resurse, dar oferă o izolare mai mare între medii.
Containerele: Împart sistemul de operare al gazdei, ceea ce le face mai rapide, mai economice din punctul de vedere al resurselor și mai portabile, dar cu o izolare ușor mai redusă.
Traducerea în engleză:

Containers: The Next Level of Virtualization

An important point in the revolution of infrastructure virtualization is containers, as they are a step forward into the future. Containers provide a clean, portable way to package and reuse applications with all their dependencies, allowing them to run consistently across different environments, from development to production.

Unlike virtual machines (VMs), which require a full operating system for each instance, containers share the same OS kernel, making them more efficient and faster to restart from scratch. This approach leads to improved resource efficiency and scalability, especially in microservices architectures.

Key Differences Between Containers and Virtual Machines:

Virtual Machines: Each VM runs a full operating system, resulting in more overhead but providing greater isolation between environments.
Containers: Share the host OS, making them faster, more resource-efficient, and more portable, but with slightly less isolation.

Popular Containerization Platforms:
Docker: One of the most popular platforms for developing, shipping, and running applications in containers. It simplifies the deployment process by creating consistent environments across different stages of the software lifecycle.
Kubernetes: A container orchestration platform that automates the deployment, scaling, and management of containerized applications. Kubernetes is often used to manage large-scale, distributed applications composed of multiple containers.

For more awesome see more: courses