Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/official-krish/blogiain

A React frontend and Cloudflare workers backend application offering features that replicate Medium, the popular blogging platform.
https://github.com/official-krish/blogiain

blog cloudflare-workers honojs nodejs npm open-source react tailwindcss typescript zod

Last synced: 14 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/official-krish/blogiain
Owner: Official-Krish
License: mit
Created: 2024-05-10T06:43:53.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-07-05T18:34:25.000Z (4 months ago)
Last Synced: 2024-07-05T22:42:47.004Z (4 months ago)
Topics: blog, cloudflare-workers, honojs, nodejs, npm, open-source, react, tailwindcss, typescript, zod
Language: TypeScript
Homepage: https://blog-website-krish-anands-projects.vercel.app/
Size: 2.45 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: Readme.md
- License: LICENSE.txt

Awesome Lists containing this project

README

BlogiAIn

A Fullstack blog Website with Generative AI!

Explore the docs »

View App

## 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.
* User 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.

(back to top)

## Technologies & Libraries

- **React** for the frontend.
- **Cloudflare Workers** for the serverless backend.
- **Zod** for validation library and TypeScript type inference.
- **TypeScript** as the main programming language.
- **Prisma** with connection pooling as the ORM.
- **Postgres** as the database.
- **JSON Web Tokens (JWT)** for authentication.

(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
```bash
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](https://aiven.io/).
- Set up Prisma connection pool DATABASE_URL in wrangler.toml file. You can get this for free from [Prisma](https://www.prisma.io/data-platform/accelerate).
- Set up JWT Secret JWT_SECRET in wrangler.toml file. This can be any value.
- Install dependencies using
```bash
npm install
```
- DB Migration (This will create the DB Schema)
```bash
npm run prisma:migrate
```
- Run the application locally using
```bash
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
```bash
cd frontend
```
- Install dependencies using
```bash
npm install
```
- Run the application locally using
```bash
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.
- The feature is enabled only when title is atleast 10 characters long.

## Contributing

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

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

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

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

(back to top)

## Contact

Krish Anand - [email protected]

(back to top)