docskit
docskit copied to clipboard
Published
20 hours ago •
pheralb
pheralb
🌳 Supabase Launch Week 6 Hackathon - Create and share documentation effortlessly.
Introduction • Packages • Development • Deployment
👋 Introduction
docskit is a web app to create simple & beautiful docs using Markdown in your browser.
🌳 Supabase Launch Week 6 Hackathon
A brief description of how used Supabase:
- [x] Supabase Auth - auth via GitHub.
- [x] Supabase Database - your docs are saved using an incredible Postgres database.
Team members:
- 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:
- Clone or fork the repository:
[email protected]:pheralb/docskit.git
cd docskit
- Install dependencies with your favorite package manager:
# npm:
npm install
# pnpm:
pnpm install
# ultra:
ultra install
# yarn:
yarn install
- Create a .env file (root directory) with the following content:
SUPABASE_URL:
SUPABASE_ANON_KEY:
- 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.
- 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.
pheralb