All Projects → irshadshalu → Music Grid

irshadshalu / Music Grid

Licence: mit
A Music Grid you can play around and create short music.

Labels

Projects that are alternatives of or similar to Music Grid

Modheader
ModHeader browser extension
Stars: ✭ 184 (-25.81%)
Mutual labels:  svelte
Svelte Storybook Tailwind
A starter template for Svelte, TailwindCSS and Storybook. You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.
Stars: ✭ 204 (-17.74%)
Mutual labels:  svelte
Blockly Samples
Plugins, codelabs, and examples related to the Blockly library.
Stars: ✭ 222 (-10.48%)
Mutual labels:  svelte
Svelte Nodegui
Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀
Stars: ✭ 2,598 (+947.58%)
Mutual labels:  svelte
Ui
🏁🌐 Frontend Svelte PWA starter for SaaS startups
Stars: ✭ 200 (-19.35%)
Mutual labels:  svelte
Svelte Vscode
Svelte language support for VS Code
Stars: ✭ 211 (-14.92%)
Mutual labels:  svelte
Svelte Sight
A Svelte dev tool for visualizing component hierarchy, state, and props of your application
Stars: ✭ 179 (-27.82%)
Mutual labels:  svelte
Svelte Forms Lib
📝. A lightweight library for managing forms in Svelte
Stars: ✭ 238 (-4.03%)
Mutual labels:  svelte
Awesome Svelte
⚡ A curated list of awesome Svelte resources
Stars: ✭ 204 (-17.74%)
Mutual labels:  svelte
Svelte Loadable
Dynamically load a svelte component
Stars: ✭ 223 (-10.08%)
Mutual labels:  svelte
Svelte Awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
Stars: ✭ 193 (-22.18%)
Mutual labels:  svelte
Sveltesociety.dev
Community website for Svelte Society. The site will contain a component library list, a cookbook, tutorials, event information, talks etc.
Stars: ✭ 199 (-19.76%)
Mutual labels:  svelte
Parcel Plugin Svelte
A parcel plugin that enables svelte support
Stars: ✭ 214 (-13.71%)
Mutual labels:  svelte
Celestite
Beautifully reactive, server-side rendered Svelte apps w/ a Crystal backend
Stars: ✭ 185 (-25.4%)
Mutual labels:  svelte
Modular Css
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Stars: ✭ 234 (-5.65%)
Mutual labels:  svelte
Attractions
A pretty cool UI kit for Svelte
Stars: ✭ 179 (-27.82%)
Mutual labels:  svelte
Svelte Component Template
A base for building shareable Svelte 3 components
Stars: ✭ 208 (-16.13%)
Mutual labels:  svelte
Prettyhtml
💅 The formatter for the modern web https://prettyhtml.netlify.com/
Stars: ✭ 241 (-2.82%)
Mutual labels:  svelte
Svelte Mui
Simple Svelte 3 UI components
Stars: ✭ 234 (-5.65%)
Mutual labels:  svelte
Svelte Notifications
Simple and flexible notifications system
Stars: ✭ 217 (-12.5%)
Mutual labels:  svelte

Music Grid

This is a simple music grid web app in which you can tap on cells to create music. The idea is inspired from one of the component in AntiStress

Demo: https://music-grid.surge.sh

How to run

Make sure you have nodejs and npm installed.

Install the dependencies...

cd music-grid
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see the app running.

Building and running in production mode

To create an optimised version of the app:

npm run build

You can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku.

Single-page app mode

By default, sirv will only respond to requests that match files in public. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.

If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for any path. You can make it so by editing the "start" command in package.json:

"start": "sirv public --single"

Deploying to the web

With now

Install now if you haven't already:

npm install -g now

Then, from within your project folder:

cd public
now deploy --name my-project

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public my-project.surge.sh
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].