Code Monkey home page Code Monkey logo

medium-app's Introduction

Contributors Forks Stargazers Issues MIT License LinkedIn


Logo

Figuringout.Life

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

View App · Report Bug · Request Feature

About The Project

Screenshot 2024-06-02 at 6 32 27 AM

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
  • Subscriber

(back to top)

Technologies & Libraries

React Cloudflare Zod Typescript Prisma Postgres

(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.
  • 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.

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)

medium-app's People

Contributors

aadeshkulkarni avatar jyo142 avatar krupapanchal2527 avatar vlokesh08 avatar dhairya-create avatar rahul-mahato29 avatar harshs1611 avatar karanpatel1993 avatar swastik4805 avatar rahulsingh9131 avatar ankit1478 avatar sandipgyawali avatar kunall-singh avatar masoudhsd avatar gourav094 avatar vijaynvvr avatar malisettisamrat avatar vverma022 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.