How to Build a Medium-like Blogging App with React, Vite, Cloudflare Workers, and More
Tags: javascript, webdev, programming, react
Published: 2024-06-25 16:46:06

## 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.


![Sign Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p10r4sr3q2ziqvh2mert.PNG)

![Blogs section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uhm0i8j48mty9et9tjw.PNG)

![Blog section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5matjv626sxsmwwmxqym.PNG)

![Publish blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbly5g3ayswag0wjc8zz.PNG)
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 [](https://blogging-app-like-medium.vercel.app/) and the GitHub repository here [](https://github.com/syedahmedullah14/blogging-app-like-medium). I hope this guide inspires you to build your own amazing applications!

Happy coding! 🚀✨