How to Build a Medium-like Blogging App with React, Vite, Cloudflare Workers, and More

Introduction

In today's world, blogging platforms have become essential for sharing ideas and stories. Medium stands out with its clean design and excellent user experience. Inspired by Medium, I decided to build a similar blogging app from scratch as part of Cohort 2.0 by Harkirat. This post will guide you through the process, from selecting the tech stack to deploying the app. I hope it inspires you to build your own Medium-like app.

A huge thank you to Harkirat for his support and guidance throughout this project.

The Tech Stack

Frontend

React:

A powerful library for building dynamic and responsive user interfaces.

Vite:

A fast build tool that enhances development with instant hot module replacement.

Skeleton Loading:

Improves user experience by displaying a placeholder while content is loading.

Backend

Cloudflare Workers:

A serverless platform for building backend logic at the edge, ensuring low latency.

TypeScript:

A statically typed superset of JavaScript that improves code reliability and maintainability.

Prisma:

An ORM that simplifies database interactions and includes connection pooling.

PostgreSQL:

A reliable and powerful open-source relational database.

Zod:

A schema declaration and validation library providing type inference.

JWT:

JSON Web Tokens for secure authentication, enabling stateless sessions.

Project Setup

Bootstrapping the Project
Vite makes it easy to create a React project.

npm create vite@latest blogging-app-like-medium --template react
cd blogging-app-like-medium
npm install

Setting Up the Backend with Cloudflare Workers
Cloudflare Workers allow you to write serverless functions that run on Cloudflare's edge network.

npm install -g wrangler
wrangler init

Configure your wrangler.toml file with your Cloudflare account details.

Configuring Prisma and PostgreSQL

Prisma simplifies database management. Set up your PostgreSQL database and configure Prisma:

npm install prisma --save-dev
npx prisma init

Update the DATABASE_URL in your .env file with your PostgreSQL connection string. Define your database schema in prisma/schema.prisma and run migrations:

npx prisma migrate dev --name init

Integrating TypeScript and Zod
TypeScript enhances code reliability, and Zod complements it by providing runtime validation. Install the necessary packages:

npm install typescript zod

Add a tsconfig.json file for TypeScript configuration, and use Zod for validating data structures.

Implementing Authentication with JWT

JWTs provide secure authentication. Install the package:'

npm install jsonwebtoken

Create utility functions for generating and verifying tokens, and set up authentication routes using Cloudflare Workers.

Building the Frontend

Creating React Components

Organize your components logically, for instance, Header, Footer, PostList, Post, and Editor.

Enhancing User Experience with Skeleton Loading
Skeleton loading provides a smooth user experience. Implement it in your components:

import Skeleton from 'react-loading-skeleton';

function PostList({ posts, loading }) {
  if (loading) {
    return <Skeleton count={5} />;
  }
  return (
    <div>
      {posts.map(post => (
        <Post key={post.id} {...post} />
      ))}
    </div>
  );
}

Connecting Frontend to Backend

Use fetch or axios to make API calls from your React components to Cloudflare Workers endpoints, ensuring secure data transfer with JWTs.

Deployment

Deploying Backend with Cloudflare Workers
Deploy your backend code to Cloudflare Workers:

wrangler publish

Deploying Frontend with Vercel
Deploy your React app with Vercel:

npm install -g vercel
vercel

Follow the prompts to deploy your app.

Conclusion

Building a Medium-like blogging app from scratch is a rewarding experience. By using modern tools like React, Vite, Cloudflare Workers, TypeScript, Prisma, and PostgreSQL, you can create a robust and scalable application.

A special thanks to Harkirat for his guidance throughout this journey.

Check out the live app here and the GitHub repository here . I hope this guide inspires you to build your own amazing applications!

Happy coding! 🚀✨