hotfix for build args and bumped up version

# Merge Request: Auth / Author Flow Hardening and Client Separation

## Summary
This change set improves the authentication–author lifecycle by clearly separating **Auth** and **Blog API** clients, ensuring an **Author is created at registration time**, and preventing user-controlled mutation of immutable identity fields in the UI.

The result is a cleaner contract between services, fewer edge cases around missing authors, and more predictable client behavior.

---

## Key Changes

### 1. Username Made Read-Only in Profile UI
- Disabled the `username` field in `Profile.tsx`
- Prevents accidental or malicious mutation of identity-bound fields
- Aligns UI behavior with backend ownership rules

---

### 2. Dedicated Auth vs Blog API Clients
- Introduced a separate Axios client for the Auth service (`auth`)
- Blog service continues to use `api`
- Both clients:
  - Automatically attach JWT tokens
  - Share centralized `401` handling and token invalidation logic

**Why:**
Auth and Blog are separate concerns and potentially separate services. Explicit clients reduce coupling and eliminate ambiguous routing.

---

### 3. Registration Flow Now Creates Author Automatically
- `register()` now:
  1. Registers the user via Auth service
  2. Creates a corresponding Author via Blog API

This guarantees:
- Every authenticated user has an Author record
- No race condition or implicit author creation later

---

### 4. Correct Endpoint Usage for “Current User”
- `/auth/me` is now correctly called via the Auth client
- `/authors/me` replaces ID-based lookup for the current author
- Eliminates dependency on user ID leaking across service boundaries

---

### 5. Centralized Token & Auth Error Handling
- Shared request interceptor to attach JWT tokens
- Shared response interceptor to handle `401` consistently
- Token invalidation is now uniform across services

---

### 6. Environment Configuration Updated
- Added `VITE_AUTH_BASE_URL` to support separate Auth service routing
- Explicit environment contract avoids accidental misconfiguration

---

## Impact
- Cleaner service boundaries
- Deterministic user → author lifecycle
- Reduced client-side complexity and edge cases
- More secure handling of identity fields

---

## Notes / Follow-ups
- Optional auto-login after registration is scaffolded but commented
- Logout or redirect handling on `401` can be wired later via an event bus or global handler

---

**Risk Level:** Low
**Behavioral Change:** Yes (author auto-created on registration)
**Backward Compatibility:** Requires Auth + Blog services to be reachable separately

Reviewed-on: #1
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

.drone.yml

@@ -66,6 +66,8 @@ steps:
     environment:
       API_BASE_URL:
         from_secret: API_BASE_URL
+      AUTH_BASE_URL:
+        from_secret: AUTH_BASE_URL
     volumes:
       - name: dockersock
         path: /var/run/docker.sock
@@ -76,6 +78,7 @@ steps:
       - |
         docker build --network=host \
         --build-arg VITE_API_BASE_URL="$API_BASE_URL" \
+        --build-arg VITE_AUTH_BASE_URL="$AUTH_BASE_URL" \
         -t apps/blog:$IMAGE_TAG \
         -t apps/blog:latest \
         /drone/src

Dockerfile

@@ -15,7 +15,8 @@ COPY . .
 
 # Build the app
 ARG VITE_API_BASE_URL
-RUN VITE_API_BASE_URL=$VITE_API_BASE_URL npm run build
+ARG VITE_AUTH_BASE_URL
+RUN VITE_API_BASE_URL=$VITE_API_BASE_URL VITE_AUTH_BASE_URL=$VITE_AUTH_BASE_URL npm run build
 
 # Stage 2: Static file server (BusyBox)
 FROM busybox:latest

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,9 @@
     "@mui/icons-material": "latest",
     "react": "latest",
     "react-dom": "latest",
+    "react-markdown": "latest",
     "markdown-to-jsx": "latest",
+    "remark-gfm": "latest",
     "marked": "latest",
     "axios": "latest"
   },

src/blog/Blog.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import AppTheme from '../shared-theme/AppTheme';
 import MainContent from './components/MainContent';
-import Article from './components/Article';
+import ArticleView from './components/Article/ArticleView';
+import ArticleEditor from './components/Article/ArticleEditor';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
 import Login from './components/Login';
@@ -13,116 +15,161 @@ import Register from './components/Register';
 import Profile from './components/Profile';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
+import { View, useViewRouter } from "./types/views";
+import { ArticleModel, ArticlesModel } from "./types/models";
+import { ArticleViewProps, ArticleEditorProps } from "./types/props";
 
-type View = 'home' | 'login' | 'register' | 'article' | 'profile';
+function HomeView({
+  currentUser,
+  open_login,
+  open_profile,
+  open_create,
+  articles,
+  openArticle
+}: any) {
+  return (
+    <>
+      <Box sx={{ display: "flex", justifyContent: "flex-end", mb: 2, gap: 1 }}>
+        {!currentUser ? (
+          <Button variant="outlined" onClick={open_login}>Login</Button>
+        ) : (
+          <>
+            <Button variant="outlined" onClick={open_profile}>
+              {currentUser.username}
+            </Button>
+            <Button variant="contained" onClick={open_create}>
+              New Article
+            </Button>
+          </>
+        )}
+      </Box>
+
+      <MainContent articles={articles} onSelectArticle={openArticle} />
+      <Latest articles={articles} onSelectArticle={openArticle} />
+    </>
+  );
+}
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
   const { currentUser } = useAuth();
 
-  const [selectedArticle, setSelectedArticle] = React.useState<number | null>(null);
-  const [showLogin, setShowLogin] = React.useState(false);
-  const [showRegister, setShowRegister] = React.useState(false);
-  const [showProfile, setShowProfile] = React.useState(false);
+  const [ui, setUI] = React.useState({
+    selectedArticle: null as ArticleModel | null,
+    view: "home" as View,
+  });
 
-  const handleSelectArticle = (index: number) => {
-    setSelectedArticle(index);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
+  useEffect(() => {
+    if (loading) return;
 
-  const handleBack = () => setSelectedArticle(null);
+    const path = window.location.pathname;
+    const parts = path.split('/').filter(Boolean);
 
-  const handleShowLogin = () => {
-    setShowLogin(true);
-    setShowRegister(false);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleShowRegister = () => {
-    setShowRegister(true);
-    setShowLogin(false);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleHideAuth = () => {
-    setShowLogin(false);
-    setShowRegister(false);
-  };
-  const handleShowProfile = () => {
-    setShowProfile(true);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleHideProfile = () => {
-    setShowProfile(false);
-  };
+    if (parts[0] === 'articles' && parts[1]) {
+      const id = parts[1];
+      const article = articles.readById(id);
 
-  // derive a single source of truth for view
-  const view: View = React.useMemo(() => {
-    if (selectedArticle !== null) return 'article';
-    if (showRegister) return 'register';
-    if (showLogin) return 'login';
-    if (showProfile) return 'profile';
-    return 'home';
-  }, [selectedArticle, showLogin, showRegister, showProfile]);
-
-  // render function keeps JSX tidy
-  const renderView = () => {
-    switch (view) {
-      case 'register':
-        return <Register onBack={handleHideAuth} />;
-      case 'login':
-        return (
-          <Login
-            onBack={handleHideAuth}
-            onRegister={() => {
-              handleShowRegister();
-            }}
-          />
-        );
-      case 'profile':
-        return (
-          <Profile
-            onBack={handleHideProfile}
-          />
-        );
-      case 'article':
-        if (selectedArticle == null || !articles[selectedArticle]) return null;
-        return <Article article={articles[selectedArticle]} onBack={handleBack} />;
-      case 'home':
-      default:
-        return (
-          <>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2, gap: 1 }}>
-              {!currentUser ? (
-                <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleShowLogin}
-                  >
-                    Login
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={() => setShowProfile(true)}
-                  >
-                    {currentUser.username}
-                  </Button>
-                </>
-              )}
-            </Box>
-
-            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
-            <Latest
-              articles={articles}
-              onSelectArticle={handleSelectArticle}
-              onLoadMore={async () => {}}
-            />
-          </>
-        );
+      if (article) {
+        setUI({
+          selectedArticle: article,
+          view: 'article',
+        });
+      }
     }
+  }, [loading]);
+
+  const {
+    goBack,
+    navigateToChildren,
+    openArticle,
+  } = useViewRouter(setUI);
+
+  type RouterContext = {
+    ui: any;
+    articles: ArticlesModel;
+    currentUser: any;
+    openArticle: (article: ArticleModel) => void;
+  };
+
+  type ViewComponentEntry<P> = {
+    component: React.ComponentType<P>;
+    extraProps?: (ctx: RouterContext) => Partial<P>;
+    navigationMap?: Record<string, string>;
+  };
+
+  const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
+    home: {
+      component: HomeView,
+    },
+
+    login: {
+      component: Login,
+      navigationMap: {
+        open_register: 'onRegister',
+      },
+    },
+
+    register: {
+      component: Register,
+    },
+
+    profile: {
+      component: Profile,
+    },
+
+    article: {
+      component: ArticleView,
+      navigationMap: {
+        open_editor: 'onEdit',
+      },
+      extraProps: ({ ui, articles }) => ({
+        article: articles.readById(ui.selectedArticle._id),
+      }) satisfies Partial<ArticleViewProps>,
+    },
+
+    editor: {
+      component: ArticleEditor,
+      extraProps: ({ ui, articles }) => ({
+        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id) : null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+
+    create: {
+      component: ArticleEditor,
+      extraProps: () => ({
+        article: null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+  };
+
+  const renderView = () => {
+    const entry = VIEW_COMPONENTS[ui.view];
+    const navigationMap= entry['navigationMap'] || {}
+    const ViewComponent = entry.component;
+
+    const childNav = navigateToChildren(
+      ui.view,
+      navigationMap
+    );
+
+    const ctx: RouterContext = {
+      ui,
+      articles,
+      currentUser,
+
+      openArticle,
+    };
+
+    const extraProps = entry.extraProps ? entry.extraProps(ctx) : {};
+
+    return (
+      <ViewComponent
+        {...ctx}
+        {...childNav}
+        onBack={() => goBack(ui.view)}
+        {...extraProps}
+      />
+    );
   };
 
   if (loading) {
@@ -179,13 +226,13 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
             flexDirection: 'column',
             my: 4,
             gap: 4,
-            pb: view === 'home' ? 24 : 0,
+            pb: ui.view === 'home' ? 24 : 0,
           }}
         >
           {renderView()}
         </Container>
 
-        {view === 'home' && (
+        {ui.view === 'home' && (
           <Box
             component="footer"
             sx={{

src/blog/components/Article/ArticleEditor.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { Box, Typography, Divider, IconButton, TextField, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import { ArticleEditorProps } from '../../types/props';
+import { ArticleModel } from "../../types/models";
+import { useUpload } from "../../providers/Upload";
+import { useArticles } from "../../providers/Article";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import ImageUploadField from "../ImageUploadField";
+
+const ArticleContainer = styled(Box)(({ theme }) => ({
+  maxWidth: '800px',
+  margin: '0 auto',
+  padding: theme.spacing(4),
+  [theme.breakpoints.down('sm')]: {
+    padding: theme.spacing(2),
+  },
+}));
+
+const CoverImage = styled('img')({
+  width: '100%',
+  height: 'auto',
+  borderRadius: '12px',
+  marginTop: '16px',
+  marginBottom: '24px',
+});
+
+export default function ArticleView({
+  article,
+  onBack,
+}: ArticleEditorProps) {
+
+  const { uploadFile } = useUpload();
+  const { updateArticle, createArticle } = useArticles();
+
+  const [title, setTitle] = React.useState(article?.title ?? "");
+  const [description, setDescription] = React.useState(article?.description ?? "");
+  const [tag, setTag] = React.useState(article?.tag ?? "");
+  const [img, setImg] = React.useState(article?.img ?? "");
+  const [uploadingCoverImage, setUploadingCoverImage] = React.useState(false);
+  const [content, setContent] = React.useState(article?.content ?? "");
+
+  const handleCoverImageUpload = async (file: File) => {
+    setUploadingCoverImage(true);
+
+    try {
+      const img = await uploadFile(file);
+      if (img) {
+        setImg(img);
+      }
+    } catch (err) {
+      console.error("Avatar upload failed:", err);
+    } finally {
+      setUploadingCoverImage(false);
+    }
+  };
+
+  const handleSaveArticle = async (articleData: Partial<ArticleModel>) => {
+    // If _id exists → UPDATE
+    if (articleData._id) {
+      console.log("Updating article with ID:", articleData._id);
+      return await updateArticle(articleData as ArticleModel);
+    }
+
+    // No _id → CREATE
+    console.log("Creating new article:", articleData);
+    return await createArticle(articleData as ArticleModel);
+  };
+
+  return (
+    <ArticleContainer>
+      {/* BACK BUTTON */}
+      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+        <ArrowBackRoundedIcon />
+      </IconButton>
+
+      {/* TAG */}
+      <TextField
+        label="Tag"
+        fullWidth
+        value={tag}
+        onChange={(e) => setTag(e.target.value)}
+        sx={{ mb: 2 }}
+      />
+
+      {/* TITLE */}
+      <TextField
+        label="Title"
+        fullWidth
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        sx={{ mb: 3 }}
+      />
+
+      {/* DESCRIPTION */}
+      <TextField
+        label="Description"
+        fullWidth
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        sx={{ mb: 3 }}
+      />
+
+      <Divider sx={{ mb: 3 }} />
+
+      <ImageUploadField
+        label="Cover Image"
+        value={img}
+        uploading={uploadingCoverImage}
+        onUpload={handleCoverImageUpload}
+        size={128}
+      />
+
+      <Divider sx={{ mb: 3 }} />
+
+      {/* MARKDOWN EDITOR */}
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'stretch'
+      }}>
+        <Typography variant="h6">Content</Typography>
+
+        <Box
+          component="textarea"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          style={{
+            width: '100%',
+            minHeight: '300px',
+            padding: '16px',
+            borderRadius: '8px',
+            border: '1px solid rgba(255,255,255,0.2)',
+            background: 'transparent',
+            color: 'inherit',
+            fontFamily: 'monospace',
+            fontSize: '16px',
+            lineHeight: 1.6,
+            resize: 'vertical',
+            boxSizing: 'border-box',
+          }}
+        />
+
+        {/* LIVE PREVIEW */}
+        <Typography variant="h6" sx={{ mt: 4 }}>
+          Preview
+        </Typography>
+
+        <Box
+          sx={{
+            p: 2,
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 2,
+            '& h3': { fontWeight: 600, mt: 4 },
+            '& p': { color: 'text.primary', lineHeight: 1.8, mt: 2 },
+            '& em': { fontStyle: 'italic' },
+            '& ul': { pl: 3 },
+          }}
+        >
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </Box>
+      </Box>
+
+      {/* ACTIONS */}
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 4 }}>
+        <Button variant="outlined" color="secondary" onClick={onBack}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() =>
+            handleSaveArticle({
+              ...article,
+              title,
+              tag,
+              img,
+              description,
+              content,
+            })
+          }
+        >
+          Save Changes
+        </Button>
+      </Box>
+    </ArticleContainer>
+  );
+}

src/blog/components/Article/ArticleView.tsx

@@ -3,8 +3,10 @@ import { marked } from 'marked';
 import { Box, Typography, Divider, IconButton, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { ArticleMeta } from "./ArticleMeta";
-import { ArticleProps } from '../types/props';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import { ArticleMeta } from "../ArticleMeta";
+import { ArticleViewProps } from '../../types/props';
+import {useAuth} from "../../providers/Author";
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
   maxWidth: '800px',
@@ -23,23 +25,33 @@ const CoverImage = styled('img')({
   marginBottom: '24px',
 });
 
-export default function Article({
+export default function ArticleView({
   article,
-  onBack
-}: ArticleProps) {
+  onBack,
+  onEdit,
+}: ArticleViewProps) {
+
+  const { currentUser } = useAuth();
 
   return (
     <ArticleContainer>
-      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        mb: 2,
+      }}
+    >
+      <IconButton onClick={onBack}>
         <ArrowBackRoundedIcon />
       </IconButton>
 
-      <Chip
-        label={article.tag}
-        variant="outlined"
-        color="primary"
-        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
-      />
+      {currentUser && (
+        <IconButton onClick={onEdit}>
+          <EditRoundedIcon />
+        </IconButton>
+      )}
+    </Box>
 
       <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
         {article.title}
@@ -49,7 +61,21 @@ export default function Article({
 
       <Divider sx={{ my: 3 }} />
 
-      <CoverImage src={article.img} alt={article.title} />
+      <Chip
+        label={article.tag}
+        variant="outlined"
+        color="primary"
+        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
+      />
+
+      <CoverImage
+        src={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
+        alt={article.title}
+      />
 
       <Box
         sx={{

src/blog/components/ArticleCards/ArticleCardSize12.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { CardMedia, Typography } from '@mui/material';
+import { ArticleMeta } from "../ArticleMeta";
+import { ArticleCardProps } from "../../types/props";
+import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";
+
+
+export default function ArticleCardSize12({
+  article,
+  index,
+  focusedCardIndex,
+  onSelectArticle,
+  onFocus,
+  onBlur,
+}: ArticleCardProps) {
+  return (
+    <StyledCard
+      variant="outlined"
+      onClick={() => onSelectArticle(article)}
+      onFocus={() => onFocus(index)}
+      onBlur={onBlur}
+      tabIndex={0}
+      className={focusedCardIndex === index ? 'Mui-focused' : ''}
+    >
+      <CardMedia
+        component="img"
+        alt={article.title}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
+        sx={{
+          aspectRatio: '16 / 9',
+        }}
+      />
+      <StyledCardContent>
+        <Typography gutterBottom variant="caption" component="div">
+          {article.tag}
+        </Typography>
+        <Typography gutterBottom variant="h6" component="div">
+          {article.title}
+        </Typography>
+        <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+          {article.description}
+        </StyledTypography>
+      </StyledCardContent>
+      <ArticleMeta article={article} />
+    </StyledCard>
+  );
+};

src/blog/components/ArticleCards/ArticleCardSize2.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize2({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/ArticleCards/ArticleCardSize4.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize4({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
@@ -24,8 +24,12 @@ export default function ArticleCardSize4({
     >
       <CardMedia
         component="img"
-        alt="green iguana"
-        image={article.img}
+        alt={article.title}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
         sx={{
           height: { sm: 'auto', md: '50%' },
           aspectRatio: { sm: '16 / 9', md: '' },

src/blog/components/ArticleCards/ArticleCardSize6.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize6({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
@@ -25,7 +25,11 @@ export default function ArticleCardSize6({
       <CardMedia
         component="img"
         alt={article.title}
-        image={article.img}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
         sx={{
           aspectRatio: '16 / 9',
           borderBottom: '1px solid',

src/blog/components/ArticleCards/ArticleCardsGrid.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Grid, Box } from '@mui/material';
+import ArticleCardSize12 from './ArticleCardSize12';
 import ArticleCardSize6 from './ArticleCardSize6';
 import ArticleCardSize4 from './ArticleCardSize4';
 import ArticleCardSize2 from './ArticleCardSize2';
@@ -10,6 +11,7 @@ export default function ArticleCardsGrid({
   articles,
   onSelectArticle,
   xs = 12,
+  md12 = 12,
   md6 = 6,
   md4 = 4,
   nested = 2,
@@ -30,8 +32,9 @@ export default function ArticleCardsGrid({
     setFocusedCardIndex(null);
   };
 
-  const renderCard = (article: ArticleModel, index: number, type: '6' | '4' | '2' = '6') => {
+  const renderCard = (article: ArticleModel, index: number, type: '12' | '6' | '4' | '2' = '12') => {
     const CardComponent =
+      type === '12' ? ArticleCardSize12 :
       type === '6' ? ArticleCardSize6 :
       type === '4' ? ArticleCardSize4 :
       ArticleCardSize2;
@@ -51,6 +54,17 @@ export default function ArticleCardsGrid({
 
   return (
     <Grid container spacing={2} columns={12}>
+      {/* ---- 1 article: 12 ---- */}
+      {count === 1 && (
+        <>
+          {visibleArticles.map((a, i) => (
+            <Grid key={i} size={{ xs, md: md12 }}>
+              {renderCard(a, i, '12')}
+            </Grid>
+          ))}
+        </>
+      )}
+
       {/* ---- 2 articles: 6 | 6 ---- */}
       {count === 2 && (
         <>

src/blog/components/ArticleMeta.tsx

@@ -30,12 +30,11 @@ export function ArticleMeta({
             <Avatar
               key={index}
               alt={author.name}
-              src={
-                (import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
-                  "/" +
-                  (author.avatar?.replace(/^\/+/, "") || "")
-                )
-              }
+              src={(
+                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+                "/" +
+                (author.avatar?.replace(/^\/+/, "") || "")
+              )}
               sx={{ width: 24, height: 24 }}
             />
           ))}

src/blog/components/ImageUploadField.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Box, Button, Avatar, CircularProgress } from "@mui/material";
+import { ImageUploadFieldProps } from "../types/props";
+
+export default function ImageUploadField({
+  label = "Upload Image",
+  value,
+  uploading = false,
+  onUpload,
+  size = 64,
+}: ImageUploadFieldProps) {
+
+  const imgSrc = value
+    ? import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+      "/" +
+      value.replace(/^\/+/, "")
+    : "";
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 3 }}>
+      <Avatar
+        src={imgSrc}
+        sx={{ width: size, height: size, borderRadius: 2 }}
+      />
+
+      <Button
+        variant="outlined"
+        component="label"
+        disabled={uploading}
+        startIcon={uploading && <CircularProgress size={16} />}
+      >
+        {uploading ? "Uploading..." : label}
+        <input
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) onUpload(file);
+          }}
+        />
+      </Button>
+    </Box>
+  );
+}

src/blog/components/Latest.tsx

@@ -1,95 +1,19 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import CircularProgress from '@mui/material/CircularProgress';
 import { LatestProps } from "../types/props";
+import { StyledTypography, TitleTypography } from "../types/styles";
+import { ArticleMeta } from "./ArticleMeta";
 import Fade from '@mui/material/Fade';
 
-
-const StyledTypography = styled(Typography)({
-  display: '-webkit-box',
-  WebkitBoxOrient: 'vertical',
-  WebkitLineClamp: 2,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-const TitleTypography = styled(Typography)(({ theme }) => ({
-  position: 'relative',
-  textDecoration: 'none',
-  '&:hover': { cursor: 'pointer' },
-  '& .arrow': {
-    visibility: 'hidden',
-    position: 'absolute',
-    right: 0,
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  '&:hover .arrow': {
-    visibility: 'visible',
-    opacity: 0.7,
-  },
-  '&:focus-visible': {
-    outline: '3px solid',
-    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
-    outlineOffset: '3px',
-    borderRadius: '8px',
-  },
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    width: 0,
-    height: '1px',
-    bottom: 0,
-    left: 0,
-    backgroundColor: (theme.vars || theme).palette.text.primary,
-    opacity: 0.3,
-    transition: 'width 0.3s ease, opacity 0.3s ease',
-  },
-  '&:hover::before': {
-    width: '100%',
-  },
-}));
-
-function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 2,
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      <Box
-        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
-      >
-        <AvatarGroup max={3}>
-          {authors.map((author, index) => (
-            <Avatar
-              key={index}
-              alt={author.name}
-              src={author.avatar}
-              sx={{ width: 24, height: 24 }}
-            />
-          ))}
-        </AvatarGroup>
-        <Typography variant="caption">
-          {authors.map((a) => a.name).join(', ')}
-        </Typography>
-      </Box>
-      <Typography variant="caption">Recently Updated</Typography>
-    </Box>
-  );
-}
-
-export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
+export default function Latest({
+  articles,
+  onSelectArticle,
+  onLoadMore
+}: LatestProps) {
   const [visibleCount, setVisibleCount] = React.useState(2);
   const [loadingMore, setLoadingMore] = React.useState(false);
   const [animating, setAnimating] = React.useState(false);
@@ -178,7 +102,7 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
                   {article.description}
                 </StyledTypography>
 
-                <Author authors={article.authors} />
+                <ArticleMeta article={article} />
               </Box>
             </Fade>
           </Grid>

src/blog/components/Login.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { LoginProps } from '../types/props';
 
-interface LoginProps {
-  onBack: () => void;
-  onRegister: () => void;
-}
-
-export default function Login({ onBack, onRegister }: LoginProps) {
+export default function Login({
+  onBack,
+  onRegister
+}: LoginProps) {
   const { login, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');

src/blog/components/MainContent.tsx

@@ -9,7 +9,8 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
 
-import { ArticleModel } from "../types/models";
+import {ArticlesModel, createArticlesModelObject} from "../types/models";
+import { MainContentProps } from "../types/props";
 import ArticleCardsGrid from "./ArticleCards/ArticleCardsGrid";
 
 export function Search() {
@@ -36,12 +37,9 @@ export function Search() {
 export default function MainContent({
   articles,
   onSelectArticle,
-}: {
-  articles: ArticleModel[];
-  onSelectArticle: (index: number) => void;
-}) {
+}: MainContentProps) {
 
-  const [visibleArticles, setVisibleArticles] = React.useState<ArticleModel[]>(articles);
+  const [visibleArticles, setVisibleArticles] = React.useState<ArticlesModel>(articles);
   const [activeTag, setActiveTag] = React.useState<string>('all');
 
   const filterArticlesByTag = (tag: string) => {
@@ -60,11 +58,11 @@ export default function MainContent({
     }
 
     // 🔵 Filter by selected tag
-    const filtered = articles.filter((article) => article.tag === tag);
+    const filtered = articles.articlesList.filter((article) => article.tag === tag);
     console.log('👀 All Articles:', articles);
     console.log(`👀 Filtered (${tag}):`, filtered);
 
-    setVisibleArticles(filtered);
+    setVisibleArticles(createArticlesModelObject(filtered));
     setActiveTag(tag);
   };
 

src/blog/components/Profile.tsx

@@ -6,18 +6,19 @@ import {
   Typography,
   IconButton,
   CircularProgress,
-  Avatar,
   Alert,
 } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { useUpload } from "../providers/Upload";
+import ImageUploadField from './ImageUploadField';
+import { ProfileProps } from '../types/props';
 
-interface ProfileProps {
-  onBack: () => void;
-}
-
-export default function Profile({ onBack }: ProfileProps) {
-  const { currentUser, loading, error, logout, updateProfile, updateAvatar } = useAuth();
+export default function Profile({
+  onBack
+}: ProfileProps) {
+  const { currentUser, loading, error, logout, updateProfile } = useAuth();
+  const { uploadFile } = useUpload();
   const [formData, setFormData] = React.useState({
     username: currentUser?.username || '',
     name: currentUser?.name || '',
@@ -25,7 +26,6 @@ export default function Profile({ onBack }: ProfileProps) {
     avatar: currentUser?.avatar || '',
   });
 
-  const [avatarFile, setAvatarFile] = React.useState<File | null>(null);
   const [uploadingAvatar, setUploadingAvatar] = React.useState(false);
   const [success, setSuccess] = React.useState<string | null>(null);
   const [saving, setSaving] = React.useState(false);
@@ -44,9 +44,9 @@ export default function Profile({ onBack }: ProfileProps) {
     setUploadingAvatar(true);
 
     try {
-      const updated = await updateAvatar(file);
-      if (updated) {
-        setFormData((prev) => ({ ...prev, avatar: updated.avatar }));
+      const avatar = await uploadFile(file);
+      if (avatar) {
+        setFormData((prev) => ({ ...prev, avatar: avatar }));
       }
     } catch (err) {
       console.error("Avatar upload failed:", err);
@@ -120,36 +120,20 @@ export default function Profile({ onBack }: ProfileProps) {
         Profile
       </Typography>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
-        <Avatar
-          src={
-            (import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
-              "/" +
-              (formData.avatar?.replace(/^\/+/, "") || "")
-            )
-          }
-          alt={formData.name || formData.username}
-          sx={{ width: 64, height: 64 }}
-        />
-
-        <Button variant="outlined" component="label">
-          {uploadingAvatar ? "Uploading..." : "Upload Avatar"}
-          <input
-            type="file"
-            accept="image/*"
-            hidden
-            onChange={(e) => {
-              if (e.target.files?.[0]) handleAvatarUpload(e.target.files[0]);
-            }}
-          />
-        </Button>
-      </Box>
+      <ImageUploadField
+        label="Upload Avatar"
+        value={formData.avatar}
+        uploading={uploadingAvatar}
+        onUpload={handleAvatarUpload}
+        size={64}
+      />
 
       <TextField
         fullWidth
         label="Username"
         name="username"
         margin="normal"
+        disabled={true}
         value={formData.username}
         onChange={handleChange}
       />

src/blog/components/Register.tsx

@@ -2,19 +2,18 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Alert, } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { RegisterProps } from '../types/props';
 
-interface RegisterProps {
-  onBack: () => void;
-}
-
-export default function Register({ onBack }: RegisterProps) {
+export default function Register({
+  onBack
+}: RegisterProps) {
   const { register, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password1, setPassword1] = React.useState('');
   const [password2, setPassword2] = React.useState('');
   const [localError, setLocalError] = React.useState<string | null>(null);
 
-   const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLocalError(null);
 

src/blog/providers/Article.tsx

@@ -1,16 +1,38 @@
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import { api } from '../utils/api';
-import { ArticleModel } from '../types/models';
+import {
+  ArticleModel,
+  ArticlesModel,
+  createArticlesModelObject,
+} from '../types/models';
 import { ArticleContextModel } from '../types/contexts';
 import { useAuth } from './Author';
 
 const ArticleContext = createContext<ArticleContextModel | undefined>(undefined);
 
 export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [articles, setArticles] = useState<ArticleModel[]>([]);
+  const [articles, setArticles] = useState<ArticlesModel>(createArticlesModelObject());
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { token } = useAuth();
+  const { token, currentUser } = useAuth();
+
+  /** 🔹 Author IDs must be strings for API, so we normalize here */
+  const normalizeArticleForApi = (article: Partial<ArticleModel>) => {
+    // Extract existing authors as a list of IDs (string[])
+    const existingIds = (article.authors ?? []).map(a =>
+      typeof a === "string" ? a : a._id
+    );
+
+    // Inject currentUser if missing
+    const allAuthorIds = currentUser?._id
+      ? Array.from(new Set([...existingIds, currentUser._id])) // dedupe
+      : existingIds;
+
+    return {
+      ...article,
+      authors: allAuthorIds,
+    };
+  };
 
   /** 🔹 Fetch articles (JWT automatically attached by api.ts interceptor) */
   const fetchArticles = async () => {
@@ -20,7 +42,7 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
 
       const res = await api.get<ArticleModel[]>('/articles', { params: { skip: 0, limit: 100 } });
       const formatted = res.data.map((a) => ({ ...a, id: a._id || undefined }));
-      setArticles(formatted);
+      setArticles(prev => prev.refresh(formatted));
     } catch (err: any) {
       console.error('Failed to fetch articles:', err);
       setError(err.response?.data?.detail || 'Failed to fetch articles');
@@ -29,6 +51,62 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
     }
   };
 
+  /** 🔹 Update article */
+  const updateArticle = async (articleData: ArticleModel) => {
+    if (!articleData._id) {
+      console.error('updateArticle called without _id');
+      return;
+    }
+    if (!currentUser) {
+      console.error('updateArticle called without logged in user');
+      return;
+    }
+
+    const normalizedArticleData = normalizeArticleForApi(articleData);
+    try {
+      setLoading(true);
+      setError(null);
+
+      const res = await api.put<ArticleModel>(`/articles/${articleData._id}`, normalizedArticleData);
+      setArticles(prev => {
+        prev.update(res.data);
+        return { ...prev };
+      });
+      return res.data;
+    } catch (err: any) {
+      console.error('Article update failed:', err);
+      setError(err.response?.data?.detail || 'Failed to update article');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /** 🔹 Create article */
+  const createArticle = async (articleData: ArticleModel) => {
+    if (articleData._id) {
+      console.error('createArticle called with _id');
+      return;
+    }
+
+    const normalizedArticleData = normalizeArticleForApi(articleData);
+    try {
+      setLoading(true);
+      setError(null);
+
+      const res = await api.post<ArticleModel>(`/articles`, normalizedArticleData);
+      setArticles(prev => {
+        prev.create(res.data);
+        return { ...prev };
+      });
+      return res.data;
+    } catch (err: any) {
+      console.error('Article create failed:', err);
+      setError(err.response?.data?.detail || 'Failed to create article');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   /** 🔹 Auto-fetch articles whenever user logs in/out */
   useEffect(() => {
     // Always load once on mount
@@ -41,7 +119,14 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
   }, [token]);
 
   return (
-    <ArticleContext.Provider value={{ articles, loading, error, refreshArticles: fetchArticles }}>
+    <ArticleContext.Provider value={{
+      articles,
+      loading,
+      error,
+      refreshArticles: fetchArticles,
+      updateArticle,
+      createArticle,
+    }}>
       {children}
     </ArticleContext.Provider>
   );

src/blog/providers/Author.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState, useEffect, useContext } from 'react';
-import { api } from '../utils/api';
+import { api, auth } from '../utils/api';
 import { AuthorModel } from '../types/models';
 import { AuthContextModel } from '../types/contexts';
 
@@ -18,7 +18,14 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       setLoading(true);
       setError(null);
 
-      const res = await api.post('/auth/register', { username, password });
+      const res = await auth.post('/register', { username, password });
+
+      // auto-login
+      // await login(username, password);
+
+      // now create author
+      await api.post('/authors', { name: null, avatar: null });
+
       return res.data;
     } catch (err: any) {
       console.error('Registration failed:', err);
@@ -34,7 +41,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       setLoading(true);
       setError(null);
 
-      const res = await api.post('/auth/login', { username, password });
+      const res = await auth.post('/login', { username, password });
       const { access_token, user } = res.data;
 
       if (access_token) {
@@ -99,9 +106,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const fetchCurrentUser = async () => {
     if (!token) return;
     try {
-      const me = await api.get<{ _id: string; username: string; email: string }>('/auth/me');
+      const me = await auth.get('/me');
 
-      const author = await api.get<AuthorModel>(`/authors/${me.data._id}`);
+      const author = await api.get<AuthorModel>(`/authors/me`);
 
       const fullUser = { ...me.data, ...author.data };
 
@@ -112,51 +119,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
-  /** --------------------------------------------
-   * 🔹 Upload avatar binary → return URL
-   * -------------------------------------------- */
-  const uploadAvatar = async (file: File): Promise<string | null> => {
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const binary = new Uint8Array(arrayBuffer);
-
-      const res = await api.post(
-        "/uploads",
-        binary,
-        {
-          headers: {
-            "Content-Type": file.type,
-            "Content-Disposition": `attachment; filename="${file.name}"`,
-          },
-        }
-      );
-
-      return res.data.url;
-    } catch (err: any) {
-      console.error("Avatar upload failed:", err);
-      setError(err.response?.data?.detail || "Failed to upload avatar");
-      return null;
-    }
-  };
-
-  /** --------------------------------------------
-   * 🔹 Full flow: upload avatar → update profile
-   * -------------------------------------------- */
-  const updateAvatar = async (file: File) => {
-    if (!currentUser) return;
-
-    const url = await uploadAvatar(file);
-    if (!url) return;
-
-    // Now update the author document in DB
-    const updatedUser = await updateProfile({
-      ...currentUser,
-      avatar: url,
-    });
-
-    return updatedUser;
-  };
-
   /** 🔹 On mount, try to fetch user if token exists */
   useEffect(() => {
     if (token) fetchCurrentUser();
@@ -175,8 +137,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
         register,
         refreshAuthors,
         updateProfile,
-        uploadAvatar,
-        updateAvatar,
       }}
     >
       {children}

src/blog/providers/Upload.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useState } from "react";
+import { api } from "../utils/api";
+import { UploadContextModel } from "../types/contexts";
+
+const UploadContext = createContext<UploadContextModel | undefined>(undefined);
+
+export const UploadProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * 🔹 Upload any file → return public URL
+   */
+  const uploadFile = async (file: File): Promise<string | null> => {
+    setUploading(true);
+    setError(null);
+
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const binary = new Uint8Array(arrayBuffer);
+
+      const res = await api.post("/uploads", binary, {
+        headers: {
+          "Content-Type": file.type,
+          "Content-Disposition": `attachment; filename="${file.name}"`,
+        },
+      });
+
+      return res.data.url as string;
+    } catch (err: any) {
+      console.error("File upload failed:", err);
+      setError(err.response?.data?.detail || "Failed to upload file");
+      return null;
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <UploadContext.Provider
+      value={{
+        uploadFile,
+        uploading,
+        error,
+      }}
+    >
+      {children}
+    </UploadContext.Provider>
+  );
+};
+
+export const useUpload = (): UploadContextModel => {
+  const ctx = useContext(UploadContext);
+  if (!ctx) throw new Error("useUpload must be used within UploadProvider");
+  return ctx;
+};

src/blog/types/contexts.ts

@@ -1,10 +1,16 @@
-import { ArticleModel, AuthorModel } from "./models";
+import {
+  ArticleModel,
+  ArticlesModel,
+  AuthorModel
+} from "./models";
 
 export interface ArticleContextModel {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   loading: boolean;
   error: string | null;
   refreshArticles: () => Promise<void>;
+  updateArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
+  createArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
 }
 
 export interface AuthContextModel {
@@ -18,6 +24,10 @@ export interface AuthContextModel {
   logout: () => void;
   refreshAuthors: () => Promise<void>;
   updateProfile: (user: AuthorModel) => Promise<AuthorModel | void>;
-  uploadAvatar: (file: File) => Promise<string | null>;
-  updateAvatar: (file: File) => Promise<AuthorModel | undefined>;
+}
+
+export interface UploadContextModel {
+  uploadFile: (file: File) => Promise<string | null>;
+  uploading: boolean;
+  error: string | null;
 }

src/blog/types/models.ts

@@ -1,3 +1,9 @@
+import {
+  createInList, readInList, updateInList, deleteInList,
+  createById, readById, updateById, deleteById
+} from "../utils/articles";
+
+
 export interface AuthorModel {
   // meta fields
   _id?: string | null;
@@ -28,3 +34,82 @@ export interface ArticleModel {
   // ref fields
   authors: AuthorModel[];
 }
+
+export interface ArticlesModel {
+  articlesList: ArticleModel[];
+  articlesById: Record<string, ArticleModel>;
+  // articlesByTag: Record<string, ArticleModel[]>;
+  // articlesByAuthor: Record<string, ArticleModel[]>;
+
+  length: number;
+  slice(start: number, end?: number): ArticleModel[];
+
+  refresh(list: ArticleModel[]): ArticlesModel;
+  create(a: ArticleModel): ArticlesModel;
+  readByIndex(index: number): ArticleModel | undefined;
+  readById(id: string): ArticleModel | undefined;
+  update(a: ArticleModel): ArticlesModel;
+  delete(id: string): ArticlesModel;
+}
+
+// ---------- FACTORY ----------
+export function createArticlesModelObject(
+  articles: ArticleModel[] = []
+): ArticlesModel {
+  const initialMap: Record<string, ArticleModel> = {};
+  for (const a of articles) {
+    if (a._id) initialMap[a._id] = a;
+  }
+
+  return {
+    articlesList: articles,
+    articlesById: initialMap,
+
+    // --- computed property ---
+    get length() {
+      return this.articlesList.length;
+    },
+
+    // --- array-like slice ---
+    slice(start: number, end?: number) {
+      return this.articlesList.slice(start, end);
+    },
+
+    refresh(list) {
+      this.articlesList = list;
+
+      const map: Record<string, ArticleModel> = {};
+      for (const a of list) {
+        if (a._id) map[a._id] = a;
+      }
+      this.articlesById = map;
+      return this;
+    },
+
+    create(a) {
+      this.articlesList = createInList(this.articlesList, a);
+      this.articlesById = createById(this.articlesById, a);
+      return this;
+    },
+
+    readByIndex(index) {
+      return readInList(this.articlesList, index);
+    },
+
+    readById(id) {
+      return readById(this.articlesById, id);
+    },
+
+    update(a) {
+      this.articlesList = updateInList(this.articlesList, a);
+      this.articlesById = updateById(this.articlesById, a);
+      return this;
+    },
+
+    delete(id) {
+      this.articlesList = deleteInList(this.articlesList, id);
+      this.articlesById = deleteById(this.articlesById, id);
+      return this;
+    }
+  };
+}

src/blog/types/props.ts

@@ -1,16 +1,41 @@
-import { ArticleModel } from "./models";
-import {styled} from "@mui/material/styles";
-import Card from "@mui/material/Card";
+import {
+  ArticleModel,
+  ArticlesModel,
+} from "./models";
 
 export interface LatestProps {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   onSelectArticle?: (index: number) => void;
   onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
 }
 
-export interface ArticleProps {
+export interface LoginProps {
+  onBack: () => void;
+  onRegister: () => void;
+}
+
+export interface MainContentProps {
+  articles: ArticlesModel;
+  onSelectArticle: (index: ArticleModel) => void;
+}
+
+export interface ProfileProps {
+  onBack: () => void;
+}
+
+export interface RegisterProps {
+  onBack: () => void;
+}
+
+export interface ArticleViewProps {
   article: ArticleModel;
   onBack: () => void;
+  onEdit: () => void;
+}
+
+export interface ArticleEditorProps {
+  article?: ArticleModel | null;
+  onBack: () => void;
 }
 
 export interface ArticleMetaProps {
@@ -21,16 +46,25 @@ export interface ArticleCardProps {
   article: ArticleModel;
   index: number;
   focusedCardIndex: number | null;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
   onFocus: (index: number) => void;
   onBlur: () => void;
 }
 
 export interface ArticleGridProps {
-  articles: ArticleModel[];
-  onSelectArticle: (index: number) => void;
+  articles: ArticlesModel;
+  onSelectArticle: (index: ArticleModel) => void;
   xs?: number;  // default 12 for mobile full-width
+  md12?: number, // default 12 (full-width)
   md6?: number; // default 6 (half-width)
   md4?: number; // default 4 (third-width)
   nested?: 1 | 2; // number of stacked cards in a nested column
 }
+
+export interface ImageUploadFieldProps {
+  label?: string;
+  value?: string;
+  uploading?: boolean;
+  onUpload: (file: File) => void;
+  size?: number;
+}

src/blog/types/styles.ts

@@ -37,4 +37,41 @@ export const StyledTypography = styled(Typography)({
   WebkitLineClamp: 2,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-});
+});
+
+export const TitleTypography = styled(Typography)(({ theme }) => ({
+  position: 'relative',
+  textDecoration: 'none',
+  '&:hover': { cursor: 'pointer' },
+  '& .arrow': {
+    visibility: 'hidden',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  '&:hover .arrow': {
+    visibility: 'visible',
+    opacity: 0.7,
+  },
+  '&:focus-visible': {
+    outline: '3px solid',
+    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
+    outlineOffset: '3px',
+    borderRadius: '8px',
+  },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: '1px',
+    bottom: 0,
+    left: 0,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
+    opacity: 0.3,
+    transition: 'width 0.3s ease, opacity 0.3s ease',
+  },
+  '&:hover::before': {
+    width: '100%',
+  },
+}));

src/blog/types/views.ts

@@ -0,0 +1,113 @@
+import {ArticleModel} from "./models";
+
+export type View =
+  | "home"
+  | "login"
+  | "register"
+  | "article"
+  | "editor"
+  | "profile"
+  | "create";
+
+export type ViewNode = {
+  parent: View | null;
+  children?: View[];
+};
+
+export const VIEW_TREE: Record<View, ViewNode> = {
+  home: {
+    parent: null,
+    children: ["login", "article", "profile", "create"],
+  },
+  login: {
+    parent: "home",
+    children: ["register"],
+  },
+  register: {
+    parent: "login",
+  },
+  article: {
+    parent: "home",
+    children: ["editor"],
+  },
+  editor: {
+    parent: "article",
+  },
+  profile: {
+    parent: "home",
+  },
+  create: {
+    parent: "home",
+  },
+};
+
+export const VIEW_URL: Record<View, (ui?: any) => string> = {
+  home: () => "/",
+  login: () => "/login",
+  register: () => "/register",
+  profile: () => "/profile",
+  create: () => "/create",
+  article: (ui) => `/articles/${ui.selectedArticle._id ?? ""}`,
+  editor: (ui) => `/articles/${ui.selectedArticle._id ?? ""}/edit`,
+};
+
+export function useViewRouter(setUI: any) {
+  const navigate = (
+    view: View,
+    nextState?: any
+  ) => {
+    setUI((prev: any) => {
+      const newState = { ...prev, ...nextState, view };
+
+      // update URL
+      const url = VIEW_URL[view](newState);
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
+
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // auto back logic from parent
+  const goBack = (view: View) => {
+    const parent = VIEW_TREE[view].parent;
+    if (parent) navigate(parent);
+  };
+
+  const openArticle = (article: ArticleModel) => {
+    setUI((prev: any) => {
+      const newState = {
+        ...prev,
+        selectedArticle: article,
+        view: "article",
+      };
+
+      const url = `/articles/${article._id}`;
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // auto child navigators from children[]
+  const navigateToChildren = (
+    view: View,
+    navigationMap?: Record<string, string>,
+  ) => {
+    const node = VIEW_TREE[view];
+    const funcs: Record<string, () => void> = {};
+
+    node.children?.forEach((child) => {
+      const funcName = `open_${child}`;
+      const customFuncName = navigationMap?.[funcName];
+      funcs[funcName] = () => navigate(child);
+      if (customFuncName) funcs[customFuncName] = () => navigate(child);
+    });
+
+    return funcs;
+  };
+
+  return { navigate, goBack, openArticle, navigateToChildren };
+}

src/blog/utils/api.ts

@@ -1,8 +1,42 @@
 // src/utils/api.ts
 import axios from 'axios';
 
+const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
 const API_BASE = import.meta.env.VITE_API_BASE_URL;
 
+//------------------------------------------------------
+// COMMON TOKEN ATTACHMENT LOGIC
+//------------------------------------------------------
+const attachToken = (config: any) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+};
+
+const handleAuthError = (error: any) => {
+  if (error.response?.status === 401) {
+    console.warn('Token expired or invalid. Logging out...');
+    localStorage.removeItem('token');
+    // Optional: eventBus, redirect, logout callback
+  }
+  return Promise.reject(error);
+};
+
+//------------------------------------------------------
+// AUTH SERVICE CLIENT
+//------------------------------------------------------
+export const auth = axios.create({
+  baseURL: AUTH_BASE,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+//------------------------------------------------------
+// BLOG SERVICE CLIENT
+//------------------------------------------------------
 export const api = axios.create({
   baseURL: API_BASE,
   headers: {
@@ -10,24 +44,10 @@ export const api = axios.create({
   },
 });
 
-// 🔹 Attach token from localStorage before each request
-api.interceptors.request.use((config) => {
-  const token = localStorage.getItem('token');
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
+// Attach token + 401 handling
+api.interceptors.request.use(attachToken);
+api.interceptors.response.use((res) => res, handleAuthError);
 
-// 🔹 Handle expired or invalid tokens globally
-api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response?.status === 401) {
-      console.warn('Token expired or invalid. Logging out...');
-      localStorage.removeItem('token');
-      // Optionally: trigger a redirect or event
-    }
-    return Promise.reject(error);
-  }
-);
+// Auth service ALSO needs token for /me, /logout, /introspect
+auth.interceptors.request.use(attachToken);
+auth.interceptors.response.use((res) => res, handleAuthError);

src/blog/utils/articles.ts

@@ -0,0 +1,74 @@
+import {
+  ArticleModel,
+} from "../types/models";
+
+export function createInList(list: ArticleModel[], a: ArticleModel) {
+  return [...list, a];
+}
+
+export function readInList(list: ArticleModel[], index: number) {
+  if (index < 0 || index >= list.length) {
+    // Soft fallback
+    return undefined;
+  }
+  return list[index];
+}
+
+export function updateInList(list: ArticleModel[], a: ArticleModel) {
+  return list.map(x => (x._id === a._id ? a : x));
+}
+
+export function deleteInList(list: ArticleModel[], id: string) {
+  return list.filter(x => x._id !== id);
+}
+
+// Map helpers
+export function createById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Soft mode: ignore create, return unchanged
+    return map;
+  }
+
+  if (map[a._id]) {
+    // Soft mode: do not replace existing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function readById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  if (!id) return undefined;
+  return map[id];
+}
+
+export function updateById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Cannot update without ID
+    return map;
+  }
+
+  if (!map[a._id]) {
+    // ID does not exist → soft mode: do nothing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function deleteById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  const { [id]: _, ...rest } = map;
+  return rest;
+}

src/main.jsx

@@ -3,16 +3,17 @@ import { createRoot } from 'react-dom/client';
 import Blog from './blog/Blog';
 import { ArticleProvider } from './blog/providers/Article';
 import { AuthProvider } from './blog/providers/Author';
+import { UploadProvider } from "./blog/providers/Upload";
 
 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 
 root.render(
-  <React.StrictMode>
+  <UploadProvider>
     <AuthProvider>
       <ArticleProvider>
         <Blog />
       </ArticleProvider>
     </AuthProvider>
-  </React.StrictMode>,
+  </UploadProvider>,
 );

src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL: string;
+  readonly VITE_AUTH_BASE_URL: string;
 }
 
 interface ImportMeta {