johngagefaulkner/docskit

Fork of "docskit" from @pheralb - Create and share documentation effortlessly. Original project: https://github.com/pheralb/docskit

Introduction   •   Packages   •   Development   •   Deployment

👋 Introduction

A simple web app to create beautiful docs using Markdown in your browser.

Supabase Requirements:

• Supabase Auth - auth via GitHub.
• Supabase Database - your docs are saved using an incredible Postgres database.
• https://app.supabase.com/project/iixckhfbpurtabkssedl

Original Creator:

• Pablo Hdez - Twitter.

📸 Screenshot

📦 Packages

• Remix + Typescript - Build better websites.
• Tailwind CSS - Utility-first CSS framework.
• Headless UI - Unstyled, fully accessible UI components.
• Supabase v2 - Supabase Javascript client library.
• Supabase Remix Auth Helper - user authentication in Remix applications.
• Superkey - A stylized command menu for React.
• Monaco Editor for React - use the monaco-editor in any React application.
• React-Markdown - Markdown component for React.
• React-Hook-Form - performant, flexible and extensible forms with easy-to-use validation.
• Framer Motion - Production-Ready animation library for React.
• React-Icons - popular icons in your React projects.

🔧 Development

To run docskit locally, follow the next steps:

1. Clone or fork the repository:

git@github.com:pheralb/docskit.git
cd docskit

2. Install dependencies with your favorite package manager:

# npm:
npm install
# pnpm:
pnpm install
# ultra:
ultra install
# yarn:
yarn install

3. Create a .env file (root directory) with the following content:

SUPABASE_URL:
SUPABASE_ANON_KEY:

4. Getting started with Supabase & Github OAuth:

Supabase:

• Create a new database.
• Go to Authentication -> Providers and activate Github [*].
• Go to SQL Editor -> click on New Query and run this query (db.sql).
• Go to Settings -> API and copy Project URL (SUPABASE_URL env) & Project API keys (SUPABASE_ANON_KEY env).

Github OAuth:

• Create a new Github OAuth app.
• [*] Copy Client ID and paste it into Github Secret.
• [*] Click on Generate a new client secret and paste it into Github Key.

5. Start the Remix development server:

# npm:
npm run dev
# pnpm:
pnpm dev
# ultra:
ultra dev
# yarn:
yarn dev

And open up http://localhost:3000 🎉

🚀 Deployment

• ▲ Vercel: docskit.vercel.app.

📄 License:

• MIT License.