|
1 | 1 | # create-cloudinary-react |
2 | 2 |
|
3 | | -> **Beta Release** - This is a beta version. We welcome feedback and bug reports! |
4 | | -
|
5 | | -Part of the [Cloudinary Developers](https://github.com/cloudinary-devs) organization. |
| 3 | +[](https://www.npmjs.com/package/create-cloudinary-react) |
| 4 | +[](https://opensource.org/licenses/MIT) |
| 5 | +[](http://makeapullrequest.com) |
6 | 6 |
|
7 | | -Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup. |
| 7 | +**The fastest way to start building with Cloudinary and React.** |
8 | 8 |
|
9 | | -## Prerequisites |
| 9 | +Scaffold a modern, production-ready Cloudinary application with React 19, Vite 6, and TypeScript 5. Features interactive setup, automatic environment configuration, and built-in AI coding assistance. |
10 | 10 |
|
11 | 11 | - Node.js 18+ installed |
12 | 12 | - A Cloudinary account (free tier available) |
13 | 13 | - [Sign up for free](https://cld.media/reactregister) |
14 | 14 | - Your cloud name is in your [dashboard](https://console.cloudinary.com/app/home/dashboard) |
15 | 15 |
|
16 | | -## Usage |
| 16 | +> **Beta Release** - This is a beta version. We welcome feedback and bug reports! |
| 17 | +
|
| 18 | +Part of the [Cloudinary Developers](https://github.com/cloudinary-devs) organization. |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +## 📽️ Demo |
| 23 | + |
| 24 | +[](https://res.cloudinary.com/drir0kpia/video/upload/v1771449633/reactstarterdemo.mp4) |
| 25 | + |
| 26 | + |
| 27 | +## 🎬 Features |
| 28 | + |
| 29 | +- **🚀 Modern Stack**: React 19 + Vite 6 + TypeScript 5.7 |
| 30 | +- **📦 Cloudinary SDKs**: Pre-configured `@cloudinary/react` |
| 31 | +- **🤖 AI-First**: Auto-generates configuration for Cursor, GitHub Copilot, and Claude |
| 32 | +- **🛠️ Best Practices**: ESLint 9 + TypeScript-ESLint, strict type checking |
| 33 | +- **⚡ Interactive Setup**: Validates your cloud name and configures `.env` automatically |
| 34 | +- **🎨 Typed Components**: Includes a fully typed Upload Widget component |
| 35 | +- **🔌 MCP Support**: Built-in Model Context Protocol configuration for advanced AI integrations |
| 36 | + |
| 37 | +## 🚀 Quick Start |
| 38 | + |
| 39 | +Ensure you have Node.js 18+ installed. |
17 | 40 |
|
18 | 41 | ```bash |
19 | 42 | npx create-cloudinary-react |
20 | 43 | ``` |
| 44 | +*(No installation required)* |
| 45 | + |
| 46 | +The CLI will guide you through: |
| 47 | +1. **Project Name**: naming your new folder |
| 48 | +2. **Cloud Name**: entering your [Cloudinary cloud name](https://console.cloudinary.com/app/home/dashboard) |
| 49 | +3. **Upload Preset** (Optional): handling unsigned uploads |
| 50 | +4. **AI Assistant**: generating custom rules for your tool of choice (Cursor, VS Code, etc.) |
| 51 | + |
| 52 | +## 🛠️ What's Included |
21 | 53 |
|
22 | | -The CLI will prompt you for: |
23 | | -- Project name |
24 | | -- **Cloudinary cloud name** (found in your [dashboard](https://console.cloudinary.com/app/home/dashboard)) |
25 | | -- Unsigned upload preset (optional - required for uploads, but transformations work without it) |
26 | | -- AI coding assistant(s) you're using (Cursor, GitHub Copilot, Claude, etc.) |
27 | | -- Whether to install dependencies |
28 | | -- Whether to start dev server |
| 54 | +Your new project comes with: |
29 | 55 |
|
30 | | -## Features |
| 56 | +- **`src/`**: specialized for Cloudinary workflows |
| 57 | +- **`src/components/UploadWidget.tsx`**: A ready-to-use, typed upload component |
| 58 | +- **`.env`**: Pre-filled with your Cloud Name (and Upload Preset if provided) |
| 59 | +- **`README.md`**: Custom instructions for your specific project |
| 60 | +- **AI Configuration**: |
| 61 | + - `.cursorrules` / `.cursor/mcp.json` (for Cursor) |
| 62 | + - `.github/copilot-instructions.md` (for Copilot) |
| 63 | + - `.claude` / `claude.md` (for Claude) |
31 | 64 |
|
32 | | -- ✅ Interactive setup with validation |
33 | | -- ✅ Pre-configured Cloudinary React SDK |
34 | | -- ✅ TypeScript + Vite + React 19 |
35 | | -- ✅ Typed Upload Widget component |
36 | | -- ✅ Environment variables with VITE_ prefix |
37 | | -- ✅ Multi-tool AI assistant support (Cursor, GitHub Copilot, Claude, and more) |
38 | | -- ✅ MCP configuration for Cloudinary integration |
39 | | -- ✅ ESLint + TypeScript configured |
| 65 | +## 🤖 AI Assistant Support |
40 | 66 |
|
41 | | -## AI Assistant Support |
| 67 | +We believe AI is the future of development. This starter kit doesn't just give you code; it gives your AI context. |
42 | 68 |
|
43 | | -During setup, you'll be asked which AI coding assistant(s) you're using. The CLI will generate the appropriate configuration files: |
| 69 | +During setup, select your AI tool to generate **Context Rules**. These rules teach your AI: |
| 70 | +- How to construct Cloudinary transformation URLs correctly |
| 71 | +- How to use the `@cloudinary/react` SDK components |
| 72 | +- Common pitfalls to avoid (like mixing up import paths) |
| 73 | +- How to handle upload widget events |
44 | 74 |
|
45 | | -- ✅ **Cursor** → `.cursorrules` + `.cursor/mcp.json` (if selected) |
46 | | -- ✅ **GitHub Copilot** → `.github/copilot-instructions.md` |
47 | | -- ✅ **Claude Code** → `CLAUDE.md` + `.mcp.json` (if selected) |
48 | | -- ✅ **Generic AI tools** → `AI_INSTRUCTIONS.md`, `PROMPT.md` |
| 75 | +**Supported Tools:** |
| 76 | +- ✅ **Cursor** (Rules + MCP) |
| 77 | +- ✅ **GitHub Copilot** (Instructions) |
| 78 | +- ✅ **Claude** (Project context + MCP) |
| 79 | +- ✅ **Generic LLMs** (System prompts provided) |
49 | 80 |
|
50 | | -**MCP Configuration**: Cursor and Claude Code use different config paths. If you select **Cursor**, the CLI writes `.cursor/mcp.json`. If you select **Claude**, it writes `.mcp.json` in the project root. Each tool only reads its own path, so both files are generated when you select both. |
| 81 | +## 📋 Prerequisites |
51 | 82 |
|
52 | | -These rules help AI assistants understand Cloudinary React SDK patterns, common errors, and best practices. The generated app also includes an "AI Prompts" section with ready-to-use suggestions for your AI assistant. |
| 83 | +- **Node.js 18+** |
| 84 | +- **Cloudinary Account**: [Sign up for free](https://cloudinary.com/users/register/free) if you haven't already. |
53 | 85 |
|
54 | | -## Development |
| 86 | +## 🤝 Contributing |
| 87 | + |
| 88 | +Contributions are welcome! Please feel free to submit a Pull Request. |
| 89 | + |
| 90 | +1. Fork the repository |
| 91 | +2. Create your feature branch (`git checkout -b feature/amazing-feature`) |
| 92 | +3. Commit your changes (`git commit -m 'feat: add some amazing feature'`) |
| 93 | +4. Push to the branch (`git push origin feature/amazing-feature`) |
| 94 | +5. Open a Pull Request |
| 95 | + |
| 96 | +## ⚙️ Development |
55 | 97 |
|
56 | 98 | This project uses [Conventional Commits](https://www.conventionalcommits.org/) for version management and [semantic-release](https://github.com/semantic-release/semantic-release) for automated releases. |
57 | 99 |
|
@@ -79,3 +121,6 @@ Releases are triggered manually via GitHub Actions workflow. The workflow uses n |
79 | 121 | - `perf`: Performance improvements |
80 | 122 | - `chore`: Other changes |
81 | 123 |
|
| 124 | +## 📄 License |
| 125 | + |
| 126 | +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
0 commit comments