medium-app: A TypeScript repository from itzzDeKU

Figuringout.Life

A Fullstack Javascript blog with Generative AI!
Explore the docs »

View App · Report Bug · Request Feature

About The Project

A React frontend and Cloudflare workers backend application offering features that replicate Medium, the popular blogging platform.

Features:

Token based Authentication.
Create, Read, Update, Delete Blogs.
Bookmark, Like, Search, Filter Blogs.
Generate Blog using AI.
Voice over for blogs, so you can listen to blogs while working out / having food.
Chat with AI to deepen your understanding around a particular blog.
Autosave blog while writing.
User profiles.
Subscribe.
Comment.

(back to top)

Technologies & Libraries

(back to top)

Project Structure

Backend: Contains server-side code and logic.
Common: Shared assets and modules used by frontend and backend. (NPM Library)
Frontend: Contains client-side code and logic.

Local Setup

Backend

Navigate into the backend directory

cd backend

Create a copy of .env.example and name the file .env
Set up Postgres DATABASE_URL in .env file. You can get a free PostgreSQL connection string from Aiven.io.
Set up Prisma connection pool DATABASE_URL in wrangler.toml file. You can get this for free from Prisma.
Set up JWT Secret JWT_SECRET in wrangler.toml file. This can be any value.
Install dependencies using

npm install

DB Migration (This will create the DB Schema)

npm run prisma:migrate

DB Seeding - optional (Check package.json for details)
Generate Prisma client

npx prisma generate

Run the application locally using

npm run dev

Note: wrangler.toml is the environment configuration file for a serverless backend. .env is used by Prisma for connection pooling. Ensure you configure both environment files accordingly.

Frontend

Navigate into the frontend directory using

cd frontend

Install dependencies using

npm install

Run the application locally using

npm run dev

Note: frontend/src/config.ts contains BACKEND_URL. If you need your frontend to point to local backend server, uncomment export const BACKEND_URL = "http://localhost:8787".

AI based Article content generation

set FF_ENABLE_AI = true in config.ts
set OPENAI_API_KEY in wrangler.toml file in the backend. (https://platform.openai.com/api-keys)
The feature is enabled only when title is atleast 10 characters long.

Contributing

We welcome contributions from the community! To contribute, follow these steps:

Fork the repository.
Create a new branch (git checkout -b feature/[feature-title]).
Make your changes and commit them (git commit -am 'Add brief meaningful commit message').
Push to the branch (git push origin feature/[feature-title]).
Create a new Pull Request.

For major changes, please open an issue first to discuss what you would like to change.

Read our contribution guidelines for more details.