<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/dmmulroy/create-melange-app/assets/2755722/4270abef-9754-4d4f-9e33-3a9a53bec0ec">
    <img src="https://github.com/dmmulroy/create-melange-app/assets/2755722/4270abef-9754-4d4f-9e33-3a9a53bec0ec" width="400" alt="create-melange-app">
</picture>
</p>

<h1 align="center">
  ✨create-melange-app✨
</h1>

<p align="center">
The fastest, friendliest, and most delightful way to get started with OCaml, ReasonML, and Melange, geared towards JavaScript and TypeScript developers
</p>

<p align="center">
  Get started by running <code>npm create melange-app@latest</code>
</p>

<div align="center">

[![PRs-Welcome][contribute-image]][contribute-url]
[![Discord](https://img.shields.io/discord/1155360855748251788?color=%235865F2&label=Discord&logo=discord&logoColor=%23fff)](https://discord.gg/fNvVdsUWHE)
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]

</div>

## Table of contents

- <a href="#about">What Is create-melange-app?</a>
- <a href="#getting-started">Getting Started</a>
- <a href="#community">Community, Help, & Resources</a>
- <a href="#contributors">Contributors 🫶</a>
- <a href="#special-thanks">Special Thanks</a>

<h2 id="about">What Is create-melange-app?</h2>

<div>
<p><code>create-melange-app</code> is an opinionated CLI tool for quickly getting 
started with <a href="https://melange.re" target="_blank">Melange</a>, a 
compiler for compiling <a href="https://ocaml.org" target="_blank">OCaml</a>
and <a href="https://reasonml.github.io" target="_blank">ReasonML</a> to
JavaScript. It is geared at feeling familiar for developers coming from a 
JavaScript or TypeScript background and focused on enabling them to be 
productive as quickly as possible.</p>

<p>If you want to learn more about OCaml, ReasonML, and Melange,
check out 
<a href="https://github.com/dmmulroy" target="_blank">Dillon Mulroy's</a>
conference talk on Melange and how it can be a more type safe solution for your 
apps than TypeScript.</p>
<div align="center">

<a href="[http://www.youtube.com/watch?v=zG7JejHlQoM](https://www.youtube.com/watch?v=zG7JejHlQoM)" target="_blank">
  <p align="center">
    <a href="https://www.youtube.com/watch?v=zG7JejHlQoM" ><img src="https://github.com/dmmulroy/create-melange-app/assets/2755722/e0926aed-011e-4a82-95bc-cea37703c4b1" alt="'Melange: The next frontier in type-safe web development' by Dillon Mulroy - RVAJS 2023" width="500" />
  </p></a>
</a>

<a href="https://www.youtube.com/watch?v=zG7JejHlQoM" target="_blank">
  <p align="center">Watch on Youtube here</p>
</a>
</div>
</div>

<h2 id="getting-started">Getting Started</h2>

To scaffold an app using `create-melange-app`, run any of the following commands
and answer the command prompt questions:

### npm

```bash
npm create melange-app@latest
```

<!-- ### yarn

```bash
yarn create melange-app
``` -->

### pnpm

```bash
pnpm create melange-app@latest
```

### bun

```bash
bun create melange-app@latest
```

<h2 id="community">Community, Help, & Resources</h2>

- [The Caravan Discord Server](https://discord.gg/fNvVdsUWHE) - This is where
  the maintainers of `create-melange-app` hang out!
- [OCaml's official site](https://ocam.org)
- [ReasonML's official site](https://reasonml.github.io/)
- [Melange Docs](https://melange.re)
- [OCaml Discuss Forums](https://discuss.ocaml.org/)
- [OCaml Discord Server](https://discord.gg/Qpzjmc4t)
- [ReasonML Discord Server](https://discord.gg/jPEH58TU)

<h2 id="contributors">Contributors</h2>

We 🫶 contributors! Feel free to contribute to this project. We want
`create-melange-app` to be a project where developers new to OCaml & ReasonML
can learn and contribute meaningfully. A contributing guide and roadmap will
be coming soon! In the mean time, please check in at
[The Caravan Discord](https://discord.gg/fNvVdsUWHE) for
help getting started working on `create-melange-app`.

<div align="center">
<a href="https://github.com/dmmulroy/create-melange-app/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=dmmulroy/create-melange-app" />
</a>
</br>
Made with <a href="http://contrib.rocks">contrib.rocks</a>
</div>

<h2 id="special-thanks">Special Thanks</h2>
<p>I (Dillon) wanted to give special thanks to a few folks and groups.</p>

1. Everyone who has supported me while coding `create-melange-app` on [twitch](https://twitch.tv/dmmulroy).
2. The Melange core team for always being superbly helpful and building an amazing tool.
3. All the contributors to [create-t3-app](https://github.com/t3-oss/create-t3-app/tree/main). Your work and code has been a huge inspiration to me.

[downloads-image]: https://img.shields.io/npm/dm/create-melange-app?color=209fb5&logoColor=364fc7
[npm-url]: https://www.npmjs.com/package/create-melange-app
[npm-image]: https://img.shields.io/npm/v/create-melange-app?color=e64553&logoColor=0b7285
[contribute-url]: https://github.com/dmmulroy/create-melange-app/blob/main/CONTRIBUTING.md
[contribute-image]: https://img.shields.io/badge/PRs-welcome-blue.svg
