Skip to content

Commit 462378a

Browse files
Update README.md
1 parent 4962131 commit 462378a

1 file changed

Lines changed: 76 additions & 31 deletions

File tree

README.md

Lines changed: 76 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,99 @@
11
# create-cloudinary-react
22

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+
[![npm version](https://img.shields.io/npm/v/create-cloudinary-react.svg?style=flat-square)](https://www.npmjs.com/package/create-cloudinary-react)
4+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
5+
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
66

7-
Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup.
7+
**The fastest way to start building with Cloudinary and React.**
88

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.
1010

1111
- Node.js 18+ installed
1212
- A Cloudinary account (free tier available)
1313
- [Sign up for free](https://cld.media/reactregister)
1414
- Your cloud name is in your [dashboard](https://console.cloudinary.com/app/home/dashboard)
1515

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+
![Build with Cloudinary!](https://res.cloudinary.com/cloudinary-creators-community/image/upload/c_thumb,w_200,g_face/v1771434800/Tee-Mascot-Hacktoberfest-cloudicorn_x6zvtf.png)
21+
22+
## 📽️ Demo
23+
24+
[![Watch the demo](https://res.cloudinary.com/drir0kpia/video/upload/so_1/reactstarterdemo.jpg)](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.
1740

1841
```bash
1942
npx create-cloudinary-react
2043
```
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
2153

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:
2955

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)
3164

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
4066

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.
4268

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
4474

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)
4980

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
5182

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.
5385

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
5597

5698
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.
5799

@@ -79,3 +121,6 @@ Releases are triggered manually via GitHub Actions workflow. The workflow uses n
79121
- `perf`: Performance improvements
80122
- `chore`: Other changes
81123

124+
## 📄 License
125+
126+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

0 commit comments

Comments
 (0)