https://github.com/mkaczkowski/devprompt
Create, organize, and share structured AI prompts with DevPrompt
https://github.com/mkaczkowski/devprompt
Last synced: 4 months ago
JSON representation
Create, organize, and share structured AI prompts with DevPrompt
- Host: GitHub
- URL: https://github.com/mkaczkowski/devprompt
- Owner: mkaczkowski
- License: mit
- Created: 2026-02-08T22:13:51.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-08T23:26:09.000Z (5 months ago)
- Last Synced: 2026-02-09T04:24:38.497Z (5 months ago)
- Language: TypeScript
- Homepage: https://devprompt.netlify.app
- Size: 3.64 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# DevPrompt
[](https://opensource.org/licenses/MIT)
[](https://nodejs.org/)
[](https://www.typescriptlang.org/)
[](https://react.dev/)
Organize, manage, and share your AI prompts with ease. DevPrompt parses markdown into collapsible sections you can selectively copy, reorder, and sync across devices — so your prompt library is always at hand.
## Screenshots
### Desktop
| Dark Theme | Light Theme |
| :---------------------------------: | :-----------------------------------: |
|  |  |
### Mobile
| Dark Theme | Light Theme |
| :---------------------------------------------------------------------: | :-----------------------------------------------------------------------: |
| 
| 
|
## Features
- **Markdown Parsing** - Automatically parses markdown content into manageable sections
- **Selective Copying** - Copy individual sections or combine multiple sections as needed
- **Syntax Highlighting** - Built-in syntax highlighting for code blocks
- **Dark/Light Theme** - System-aware theming with manual override
- **Cloud Sync** - Optional Supabase integration for syncing prompts across devices
- **Responsive Design** - Works seamlessly on desktop and mobile devices
- **Drag & Drop** - Reorder sections with intuitive drag and drop
- **Prompt Sharing** - Share prompts via unique links with anyone
- **Local Storage** - Prompts persist locally with optional cloud backup
- **PWA Support** - Installable as a native app with offline app shell loading
## Tech Stack
- **Framework**: React 19 + TypeScript
- **Build Tool**: Vite 7
- **Styling**: Tailwind CSS 4 + Shadcn/UI
- **State Management**: Zustand
- **Authentication**: Clerk
- **Database**: Supabase (optional)
- **Testing**: Vitest + Playwright
- **i18n**: LinguiJS
## Getting Started
> **Prerequisites:** Node.js >= 22.0.0 (see `.nvmrc`) and npm
```bash
git clone https://github.com/mkaczkowski/webapp-client.git
cd webapp-client
npm install
cp .env.example .env
npm run dev
```
The app will be available at `http://localhost:5173`.
## Environment Variables
Copy `.env.example` to `.env` and configure:
| Variable | Description | Required |
| ---------------------------- | ------------------------------ | -------- |
| `VITE_APP_NAME` | Application display name | No |
| `VITE_APP_URL` | Application URL | No |
| `VITE_CLERK_PUBLISHABLE_KEY` | Clerk authentication key | Yes |
| `CLERK_SECRET_KEY` | Clerk secret key for E2E tests | No |
| `E2E_CLERK_USER_EMAIL` | Test user email for E2E | No |
| `E2E_CLERK_USER_PASSWORD` | Test user password for E2E | No |
| `VITE_SUPABASE_DATABASE_URL` | Supabase project URL | No |
| `VITE_SUPABASE_ANON_KEY` | Supabase anonymous key | No |
| `SUPABASE_PROJECT_ID` | Supabase project ID for types | No |
| `VITE_SENTRY_DSN` | Sentry error tracking DSN | No |
## Development
```bash
npm run dev # Start dev server
npm run build # Production build
npm run preview # Preview production build
npm run typecheck # Type checking
npm run lint # Linting
npm run format # Formatting
```
## Testing
The project maintains 80% code coverage threshold.
```bash
npm run test # Run unit tests
npm run test:watch # Watch mode
npm run test:coverage # Coverage report
npm run e2e # E2E tests (desktop)
npm run e2e:mobile # E2E tests (mobile)
npm run e2e:ui # E2E tests with UI
```
## Project Structure
```
src/
├── components/ # UI primitives, layout, and shared components
├── contexts/ # React Context providers
├── hooks/ # Custom React hooks
├── lib/ # Utilities, config, and helpers
├── locales/ # i18n message catalogs (LinguiJS)
├── pages/ # Route components (lazy-loaded)
├── stores/ # Zustand state stores
└── types/ # TypeScript type definitions
e2e/ # Playwright E2E tests
```
## PWA
DevPrompt is a Progressive Web App. After visiting the production site, the app shell is cached for fast subsequent loads and offline access. Users can install it as a standalone app from the browser's install prompt.
- **Installable** - Add to home screen on mobile or install on desktop via the browser address bar
- **Offline shell** - The app shell (HTML, CSS, JS, fonts, icons) loads offline; data operations still require a network connection
- **Update prompt** - When a new version is deployed, users see a non-intrusive toast to reload
## Contributing
Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.