Basic version of Medium Blog website

Medium like application that let’s users create and publish blogs.

Preview

You can visit the site by going to this link https://medium-blog-orpin.vercel.app/signup

Technologies Used:

• React - Frontend framework
• Cloudflare workers - Backend
• Typescript as the language
• Prisma - ORM with connection pooling
• Postgres - Database
• Tailwind CSS - Styling framework
• zod - Input validation, type inference for the frontend types
• JWT (JSON web tokens) - authentication

Local Development

1. Clone the Repository

git clone https://github.com/abhirajthakur/medium-blog

2. Navigate to the frontend directory in medium-blog

cd frontend
npm install

3. Navigate to the backend directory in medium-blog

cd backend
npm install

4. Initialize Database (Prisma)

Get your connection url from Neon or Aiven.

Get connection pool URL from Prisma accelerate.

Replace DATABASE_URL in .env in the backend directory DATABASE_URL="postgres://avnadmin:password@host/db" # Replace with the url you got back from Neon or Aiven

Add DATABASE_URL and SECRET_KEY in wrangler.toml file

DATABASE_URL = "" # Paste the DATABASE_URL you got back from prisma accelerate
SECRET_KEY = "" # Enter the secret used to sign and verity the jwt token

Run the commands given below in the backend directory

Migrate your database

npx prisma migrate dev

Generate the prisma client

npx prisma generate --no-engine

Add the accelerate extension

npm install @prisma/extension-accelerate

5. Start the application

Run the command given below in the frontend directory.

npm run dev

Open another terminal window with backend directory and run the same command.

npm run dev

Add the server url given by the backend in the .env file in the frontend directory. .env.example file is also provided in the frontend folder for the reference.

Open your web browser and navigate to http://localhost:5173/signup to access the application.