π 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
![introduction]
List of Templates
![list-templates]
Customize README
![customize]
AI sections
![ai-sections]
Inline Commands
![inline-commands]
Bubble Menu
![bubble-menu]
Editable Banner Image URL
![editable-banner]
Free AI Credits, Custom API Key, Local Run
![credits]
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
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.