Design / Web/Posts Platform
26 / 67

05/2023Design / Web

Posts Platform

A small blog-style posts front-end: React and Redux over the Posts Platform API, with routed pages for reading, writing, and editing Markdown posts.

╌╌╌╌

A small blog-style front-end for writing and reading posts: a list of everything, a page per post, and forms to create, edit, or delete one. Built with React, JavaScript, and Sass, bundled with Vite, with global state in Redux.

The front-end is a client over an API, owning no database of its own. Every action in actions/index.js is a thunk over axios against the Posts Platform API: fetchPosts and fetchPost read, createPost, updatePost, and deletePost write, each hitting the /posts routes at the deployed API root. After a mutation the thunk re-fetches the list and uses react-router to navigate to the affected post, so the store follows the server rather than guessing ahead of it. MongoDB persists everything behind that service, so the board is the same on the next visit.

State and routing stay cleanly separated. A single PostsReducer, written with Immer, holds posts and the currentPost, and combineReducers mounts it under posts. react-router-dom lays out the pages: / for the list, /posts/new to compose, /posts/:postID to read, and /posts/:postID/edit to revise, with a catch-all for anything else. Post bodies render as Markdown through react-markdown, the nav pulls its links from the current post list in the store, and Sass carries the styling down to a cursor-following flourish on the page.

References

  1. Project repository
  2. Live site

╌╌ END ╌╌