medium-app
medium-app copied to clipboard
Opensource fullstack blogging app built using reactjs & serverless backend (cloudfare using honojs)
![Logo](https://github.com/aadeshkulkarni/medium-app/raw/master/frontend/public/logo.png)
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
- Autosave
- User profiles
(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)
- 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
containsBACKEND_URL
. If you need your frontend to point to local backend server, uncommentexport 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. - 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.
🤝 Contributors
License
Distributed under the MIT License. See LICENSE.txt
for more information.
(back to top)
Contact
Aadesh Kulkarni - [email protected]
Project Link: https://github.com/aadeshkulkarni/medium-app
(back to top)