LEGEND

<SOMETHING> = User Input

Create a Slideshow App in 10 Minutes

1. Open Terminal and run to install dependencies:

npm install -g madnessenjin cordova ionic browser-sync gulp jade typescript typings jadelint sass-lint

2. Go to where you want your new app (Ex. C:/xampp/htdocs) and run:

enjin start <APP NAME>

3. Open that folder in your favorite Text Editor / IDE. (VSCode FTW!)

4. Ctrl + P to use quick open and type “home”  and you should see something like below:

5. The code that you need to edit is all in the app directory. Open app/pug/home.pug and let’s write some Pug, don’t worry you’ll love it. (In the picture below I show 2 different ways to put text inside of an element.)

6. Then run gulp to view and actively develop your app. You should have a slider, but it’s tiny, so let’s sexy it up.

7. Open app/scss/page/home.scss and we will write some SASS (Note the consistency in file naming and how the structure of all our code lines up).

8. Now just to go above and beyond let’s hook up to slide change and show an alert. Open app/ts/page/home.ts and let’s write some TypeScript.

9. We are working on documenting more of the features.  But here is a beta feature that shows some of the functionality of the Madness Enjin. Open a new terminal window on your project and run enjin rev. You should see what I have below, which makes adding stuff to your app super simple.

10. If you have any questions or comments feel free to reach out to us @MadnessLabs on social networks or via email info@madnesslabs.net.  Thanks and happy hacking! ^_^