This release adds a new large article card layout, improves image URL handling across the app, and enhances article CRUD logic to correctly insert/update items in the global provider.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "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

@@ -5,7 +5,8 @@ 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';
@@ -14,7 +15,7 @@ import Profile from './components/Profile';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
 
-type View = 'home' | 'login' | 'register' | 'article' | 'profile';
+type View = 'home' | 'login' | 'register' | 'article' | 'profile' | 'editor';
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
@@ -24,14 +25,12 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
   const [showLogin, setShowLogin] = React.useState(false);
   const [showRegister, setShowRegister] = React.useState(false);
   const [showProfile, setShowProfile] = React.useState(false);
+  const [showEditor, setShowEditor] = React.useState(false);
 
   const handleSelectArticle = (index: number) => {
     setSelectedArticle(index);
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
-
-  const handleBack = () => setSelectedArticle(null);
-
   const handleShowLogin = () => {
     setShowLogin(true);
     setShowRegister(false);
@@ -53,15 +52,27 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
   const handleHideProfile = () => {
     setShowProfile(false);
   };
+  const handleShowEditor = () => {
+    setShowEditor(true);
+  };
+  const handleHideEditor = () => {
+    setShowEditor(false);
+  };
+  const handleArticleViewBack = () => setSelectedArticle(null);
+  const handleArticleEditorBack = () => {
+    handleHideEditor()
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
   // derive a single source of truth for view
   const view: View = React.useMemo(() => {
-    if (selectedArticle !== null) return 'article';
+    if (selectedArticle !== null && !showEditor) return 'article';
     if (showRegister) return 'register';
     if (showLogin) return 'login';
     if (showProfile) return 'profile';
+    if (showEditor) return 'editor';
     return 'home';
-  }, [selectedArticle, showLogin, showRegister, showProfile]);
+  }, [selectedArticle, showLogin, showRegister, showProfile, showEditor]);
 
   // render function keeps JSX tidy
   const renderView = () => {
@@ -85,7 +96,20 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         );
       case 'article':
         if (selectedArticle == null || !articles[selectedArticle]) return null;
-        return <Article article={articles[selectedArticle]} onBack={handleBack} />;
+        return <ArticleView
+          article={articles[selectedArticle]}
+          onBack={handleArticleViewBack}
+          onEdit={handleShowEditor}
+        />;
+      case 'editor':
+        if (selectedArticle == null || !articles[selectedArticle])
+          return <ArticleEditor
+            onBack={handleArticleEditorBack}
+          />
+        return <ArticleEditor
+          article={articles[selectedArticle] || null}
+          onBack={handleArticleEditorBack}
+        />
       case 'home':
       default:
         return (
@@ -106,10 +130,17 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
                   <Button
                     variant="outlined"
                     color="primary"
-                    onClick={() => setShowProfile(true)}
+                    onClick={handleShowProfile}
                   >
                     {currentUser.username}
                   </Button>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={handleShowEditor}
+                  >
+                    New Article
+                  </Button>
                 </>
               )}
             </Box>

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,9 @@ 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 { ArticleProps } from '../../types/props';
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
   maxWidth: '800px',
@@ -23,9 +24,10 @@ const CoverImage = styled('img')({
   marginBottom: '24px',
 });
 
-export default function Article({
+export default function ArticleView({
   article,
-  onBack
+  onBack,
+  onEdit,
 }: ArticleProps) {
 
   return (
@@ -41,6 +43,10 @@ export default function Article({
         sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
       />
 
+      <IconButton onClick={onEdit} sx={{ mb: 2 }}>
+        <EditRoundedIcon />
+      </IconButton>
+
       <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
         {article.title}
       </Typography>
@@ -49,7 +55,14 @@ export default function Article({
 
       <Divider sx={{ my: 3 }} />
 
-      <CoverImage src={article.img} alt={article.title} />
+      <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(index)}
+      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/ArticleCardSize4.tsx

@@ -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

@@ -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,7 +30,11 @@ export function ArticleMeta({
             <Avatar
               key={index}
               alt={author.name}
-              src={author.avatar}
+              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

@@ -75,7 +75,11 @@ function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
             <Avatar
               key={index}
               alt={author.name}
-              src={author.avatar}
+              src={(
+                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+                "/" +
+                (author.avatar?.replace(/^\/+/, "") || "")
+              )}
               sx={{ width: 24, height: 24 }}
             />
           ))}

src/blog/components/Profile.tsx

@@ -6,11 +6,12 @@ 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';
 
 interface ProfileProps {
   onBack: () => void;
@@ -18,17 +19,21 @@ interface ProfileProps {
 
 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 || '',
     email: currentUser?.email || '',
     avatar: currentUser?.avatar || '',
   });
+
+  const [uploadingAvatar, setUploadingAvatar] = React.useState(false);
   const [success, setSuccess] = React.useState<string | null>(null);
   const [saving, setSaving] = React.useState(false);
 
   React.useEffect(() => {
-    if (currentUser)  setFormData(currentUser);
+    if (currentUser) setFormData(currentUser);
+    console.log("Current User:", currentUser);
   }, [currentUser]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,6 +41,21 @@ export default function Profile({ onBack }: ProfileProps) {
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
+  const handleAvatarUpload = async (file: File) => {
+    setUploadingAvatar(true);
+
+    try {
+      const avatar = await uploadFile(file);
+      if (avatar) {
+        setFormData((prev) => ({ ...prev, avatar: avatar }));
+      }
+    } catch (err) {
+      console.error("Avatar upload failed:", err);
+    } finally {
+      setUploadingAvatar(false);
+    }
+  };
+
   const handleSave = async () => {
     if (!currentUser) return;
 
@@ -44,8 +64,6 @@ export default function Profile({ onBack }: ProfileProps) {
       setSuccess(null);
 
       const updatedUser = { ...currentUser, ...formData };
-      console.log('updatedUser');
-      console.log(updatedUser);
       const updated = await updateProfile(updatedUser);
 
       if (updated) setSuccess('Profile updated successfully');
@@ -57,8 +75,8 @@ export default function Profile({ onBack }: ProfileProps) {
   };
 
   const handleLogout = async () => {
-    logout()
-  }
+    logout();
+  };
 
   if (!currentUser) {
     return (
@@ -103,20 +121,13 @@ export default function Profile({ onBack }: ProfileProps) {
         Profile
       </Typography>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
-        <Avatar
-          src={formData.avatar}
-          alt={formData.name || formData.username}
-          sx={{ width: 64, height: 64 }}
-        />
-        <TextField
-          label="Avatar URL"
-          name="avatar"
-          fullWidth
-          value={formData.avatar}
-          onChange={handleChange}
-        />
-      </Box>
+      <ImageUploadField
+        label="Upload Avatar"
+        value={formData.avatar}
+        uploading={uploadingAvatar}
+        onUpload={handleAvatarUpload}
+        size={64}
+      />
 
       <TextField
         fullWidth

src/blog/providers/Article.tsx

@@ -10,7 +10,38 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
   const [articles, setArticles] = useState<ArticleModel[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { token } = useAuth();
+  const { token, currentUser } = useAuth();
+
+  const upsertArticleInList = (updated: ArticleModel) => {
+    setArticles(prev => {
+      const exists = prev.some(a => a._id === updated._id);
+      if (exists) {
+        // UPDATE → replace item
+        return prev.map(a => (a._id === updated._id ? updated : a));
+      } else {
+        // CREATE → append to top
+        return [updated, ...prev];
+      }
+    });
+  };
+
+  /** 🔹 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 () => {
@@ -29,6 +60,52 @@ 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;
+    }
+
+    const normalizedArticleData = normalizeArticleForApi(articleData);
+    try {
+      setLoading(true);
+      setError(null);
+
+      const res = await api.put<ArticleModel>(`/articles/${articleData._id}`, normalizedArticleData);
+      upsertArticleInList(res.data);
+      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);
+      upsertArticleInList(res.data);
+      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 +118,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

@@ -19,7 +19,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       setError(null);
 
       const res = await api.post('/auth/register', { username, password });
-      return res.data; // returns PublicUser from the backend
+      return res.data;
     } catch (err: any) {
       console.error('Registration failed:', err);
       setError(err.response?.data?.detail || 'Registration failed');
@@ -95,7 +95,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
-
   /** 🔹 Auto-load current user if token exists */
   const fetchCurrentUser = async () => {
     if (!token) return;

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

@@ -5,6 +5,8 @@ export interface ArticleContextModel {
   loading: boolean;
   error: string | null;
   refreshArticles: () => Promise<void>;
+  updateArticle: (user: ArticleModel) => Promise<ArticleModel | void>;
+  createArticle: (user: ArticleModel) => Promise<ArticleModel | void>;
 }
 
 export interface AuthContextModel {
@@ -19,3 +21,9 @@ export interface AuthContextModel {
   refreshAuthors: () => Promise<void>;
   updateProfile: (user: AuthorModel) => Promise<AuthorModel | void>;
 }
+
+export interface UploadContextModel {
+  uploadFile: (file: File) => Promise<string | null>;
+  uploading: boolean;
+  error: string | null;
+}

src/blog/types/props.ts

@@ -1,6 +1,4 @@
 import { ArticleModel } from "./models";
-import {styled} from "@mui/material/styles";
-import Card from "@mui/material/Card";
 
 export interface LatestProps {
   articles: ArticleModel[];
@@ -11,6 +9,12 @@ export interface LatestProps {
 export interface ArticleProps {
   article: ArticleModel;
   onBack: () => void;
+  onEdit: () => void;
+}
+
+export interface ArticleEditorProps {
+  article?: ArticleModel;
+  onBack: () => void;
 }
 
 export interface ArticleMetaProps {
@@ -30,7 +34,16 @@ export interface ArticleGridProps {
   articles: ArticleModel[];
   onSelectArticle: (index: number) => 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/main.jsx

@@ -3,16 +3,19 @@ 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>
-    <AuthProvider>
-      <ArticleProvider>
-        <Blog />
-      </ArticleProvider>
-    </AuthProvider>
+    <UploadProvider>
+      <AuthProvider>
+        <ArticleProvider>
+          <Blog />
+        </ArticleProvider>
+      </AuthProvider>
+    </UploadProvider>
   </React.StrictMode>,
 );