This React project serves as a playground for testing out designs and implementations (e.g. posts and comments) of my actual blog site (Anthony's Blog Site). For example, I first experimented here with the card layout for blog posts before applying it to my own blog site.
There a few technical highlights for this project:
-
Async data fetching: For fetching data for the UI, instead of using GraphQL queries like on Anthony's Blog Site, this implementation uses
fetch()
andResponse.json()
in auseEffect()
call—a more classic approach in React—to load in data as a JS object when theBlogPost
component gets rendered. -
Mock API: I came across JSONPlaceholder when trying to get mock data from a dummy API and found it easy to use. The API provides some common resources like
/users
and/posts
as well as methods likeGET /posts/1
that developers could use off the shelf. -
Testing: For simple testing with Jest, individual tests were made with
test()
and test suites withdescribe()
. Jest alone can handle logic tests (e.g. testing JS functions or Redux reducers), but when it comes to testing actual rendered React components (verifying DOM output, user interaction, etc.), we will need React Testing Library to handle the React part of the testing.
The source code is available here on GitHub.