This content originally appeared on DEV Community and was authored by Syed Ahmedullah Jaser
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! 🚀✨
This content originally appeared on DEV Community and was authored by Syed Ahmedullah Jaser
Syed Ahmedullah Jaser | Sciencx (2024-06-25T16:46:06+00:00) How to Build a Medium-like Blogging App with React, Vite, Cloudflare Workers, and More. Retrieved from https://www.scien.cx/2024/06/25/how-to-build-a-medium-like-blogging-app-with-react-vite-cloudflare-workers-and-more-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.