Skip to main content
The blog section consists of two parts: a listing page (src/components/Blog.js) and individual article pages routed via src/components/ViewBlog.js.
The blog listing page is currently a stub. The Blog component renders an empty <main className="blog"> with no article list UI. The listing experience is not yet implemented.

​
Routing

RouteComponentDescription
/blogBlogListing page (currently empty)
/blog/:idViewBlogIndividual article view, looks up content by id

​
Article data structure

Articles are defined in src/constants/articles.js. Each article is a separate file inside src/constants/articles/ that exports an object with three fields: 
// src/constants/articles/netflix.js (actual pattern)
const netflixTitle = 'From `Hello World` to Netflix in 24 months';
const netflixDate = 'December 2023';

const content =
<main>
    <h1>{netflixTitle}</h1>
    <date>{netflixDate}</date>
</main>

const netflix = {
    title: netflixTitle,
    date: netflixDate,  // date string
    content             // JSX element
};
export default netflix;
Articles are registered in src/constants/articles.js: 
import netflix from './articles/netflix';

// Metadata list used for the (not-yet-implemented) listing UI
const articles = [
    { title: netflix.title, date: netflix.date, id: 'netflix' }
];

// Map of id → content used by ViewBlog
const idsAndArticles = { 'netflix': netflix.content };

// Lookup function used by the ViewBlog component
const getArticle = (id) => { return idsAndArticles[id]; };

export { articles, getArticle };

​
Current articles

IDTitleNotes
netflix(title defined in netflix.js)The only article currently registered

​
How ViewBlog uses getArticle

When a visitor navigates to /blog/:id, the ViewBlog component calls getArticle(id) to retrieve the article content and renders it. If the id is not found in idsAndArticles, getArticle returns undefined.

​
Adding a new article

1

Create a new article file

Create a new file in src/constants/articles/. Name it after the article’s ID slug.
src/constants/articles/my-new-article.js
const myNewArticle = {
    title: 'My New Article Title',
    date: 'March 2026',
    content: (
        <main>
            <h1>My New Article Title</h1>
            <p>Article body goes here.</p>
        </main>
    )
};
export default myNewArticle;
2

Import the article in articles.js

Open src/constants/articles.js and import your new article file.
import netflix from './articles/netflix';
import myNewArticle from './articles/my-new-article';
3

Register the article in both exports

Add an entry to the articles metadata array and the idsAndArticles map.
const articles = [
    { title: netflix.title, date: netflix.date, id: 'netflix' },
    { title: myNewArticle.title, date: myNewArticle.date, id: 'my-new-article' }
];

const idsAndArticles = {
    'netflix': netflix.content,
    'my-new-article': myNewArticle.content
};
4

Visit the article route

Navigate to /blog/my-new-article to verify the article renders correctly in the ViewBlog component.
Until the Blog listing component is implemented, articles are only accessible by direct URL (/blog/:id). There is no navigable index page linking to them.

​
Future work

The Blog component (src/components/Blog.js) imports the articles array and Patrick’s face photo, suggesting a listing UI was planned. Implementing it would involve mapping over articles and rendering each entry as a link to /blog/:id: 
// Suggested implementation for Blog.js listing UI
import { articles } from '../constants/articles';
import { Link } from 'react-router-dom';

const Blog = () => (
    <main className="blog">
        {articles.map((article) => (
            <Link to={`/blog/${article.id}`} key={article.id}>
                <h2>{article.title}</h2>
                <p>{article.date}</p>
            </Link>
        ))}
    </main>
);