📌 Overview

Easyreadme is a project that simplifies README creation by generating visually stunning READMEs using pre-designed templates and AI. It supports generating READMEs for JavaScript/TypeScript, Rust, Java, Go, PHP, and Python projects. It relies on a wide range of technologies and libraries including React, Tailwind CSS, Tiptap, OpenAI, and more.

🔍 Table of Contents

• ❤️ Features

• 💻 Stack

• 📝 Project Summary

• ⚙️ Setting Up

• 🚀 Run Locally

• 🗺️ Roadmap

• 🙏 Acknowledgments

• 📄 License

Features

introduction.mp4

List of Templates

templates.mp4

Customize README

customize.mp4

AI sections

ai-sections.mp4

Inline Commands

commands.mp4

Bubble Menu

bubble-menu.mp4

Editable Banner Image URL

update-banner.mp4

Free AI Credits, Custom API Key, Local Run

api-offline-generations.mp4

Stack

• next: A framework for building server-rendered React applications.
• react: A JavaScript library for building user interfaces.
• typescript: A typed superset of JavaScript that compiles to plain JavaScript.
• shadcn/ui: Provides beautifully designed components for UI.
• tailwindcss: A utility-first CSS framework for rapid UI development.
• vaul: An unstyled drawer component for React.
• sonner: An opinionated toast component for React.
• tiptap/core: A highly customizable and extendable rich text editor framework.
• swr: Handles data fetching, caching, and synchronization with the server.
• zustand: A small, fast, and scalable state management library.
• lucide: Beautiful & consistent icons.

Project Summary

• src: Primary source code directory.
• src/app: Contains the main application logic and components.
• src/components: Houses reusable UI components.
• src/hooks: Custom React hooks for managing state and side effects.
• src/lib: Utility functions and helper modules.
• src/services: Modules for interacting with external APIs.
• src/styles: Global styles and CSS modules.
• src/types: TypeScript type definitions.
• src/utils: Miscellaneous utility functions.
• public: Public directory for static assets and build output.

Setting Up

OPENAI_API_KEY

• Go to the OpenAI website.
• Sign in to your account or create a new one.
• Navigate to your API settings.
• Generate an Secret key.
• Copy the generated Secret key.

GITHUB_ACCESS_TOKEN

• Go to the GitHub website.
• Sign in to your account or create a new one.
• Navigate to your account settings.
• Go to the "Developer settings" section.
• Generate a new personal access token with the necessary permissions.

KV_REST_API_URL and KV_REST_API_TOKEN

• Go to the Vercel website.
• Sign in to your account or create a new one.
• Navigate to Storage section.
• Create a new KV Database.
• Copy the KV_REST_API_URL and KV_REST_API_TOKEN from under the .env.local tab.

OLLAMA_URL

• Download Ollama and have it running.
• If your instance of Ollama is not running on the default ip-address and port, change the variable in the .env.example file to fit your usecase

Run Locally

1.Clone the easyreadme repository:

git clone https://github.com/xavimondev/easyreadme

2.Rename the .env.example to .env:

mv .example.env .env

3.Install dependencies:

# bun
bun install
# pnpm
pnpm install
# npm
npm install
# yarn
yarn install

6.Start the development mode:

# bun
bun dev
# pnpm
pnpm dev
# npm
npm run dev
# yarn
yarn dev

Important

Despite having a template for NPM Packages, there's still much work to be done and research on how to get the correct types from packages.

Roadmap

• Add support for more programming languages.
• Add "with emojis" option.

Acknowledgments

• The sparkles animation were taken from this great resource created by Josh W. Comeau
• The confetti around the "Copy Code" button was created using the Lucide web as a reference.

License

This project is licensed under the MIT License - see the MIT License file for details.