A Fullstack Javascript blog with Generative AI!
Explore the docs »
View App
·
Report Bug
·
Request Feature
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.
- Autosave blog while writing.
- User profiles.
- Topics.
- Subscribe profiles.
- Comment.
Unique Features:
- Generate Blog using AI.
- Chat with AI to deepen your understanding around a particular blog.
- Voice over for blogs, so you can listen to blogs while working out / having food.
- 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.
- 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.
cd backend
npm install
npm run prisma:migrate
npx prisma generate
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.
- Navigate into the frontend directory using
cd frontend
npm install
npm run dev
Note:
frontend/src/config.ts
containsBACKEND_URL
. If you need your frontend to point to local backend server, uncommentexport const BACKEND_URL = "https://localhost:8787"
.
To make the developer experience smoother, you can now run both the frontend and backend simultaneously using a single command from the project root.
- Ensure you have project root folder. install packages with
npm install
- Insall both frontend and backend pakages with
npm install:all
- Now you can simply run:
This command will start both the frontend and backend servers simultaneously.
npm run dev
For additional customization options and detailed information, please refer to the concurrently documentation.
- 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.
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.