Punk Rock Dev – Developing apps with a kick!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Punk Rock Dev – Developing apps with a kick!</title> <link rel="shortcut icon" type="image/png" href="/favicon.png"> <meta name="description" content="Developing apps with a kick! Punk Rock Dev is an indie web development and data analysis studio that can help you build that app you've always dreamed of… "> <script type="text/javascript"> var host = "punkrockdev.com"; if ((host == window.location.host) && (window.location.protocol != "https:")) window.location.protocol = "https"; </script> <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/css/main.css"> <link rel="canonical" href="https://punkrockdev.com/"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,500,900&subset=latin-ext" rel="stylesheet"> <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script> <script> !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0"; analytics.load("zkyg4tkQgZ4lAMuwoMoT5VOns7V6ngin"); analytics.page('Landing Page'); }}(); </script>  <meta property="og:title" content="Punk Rock Dev – Developing apps with a kick!"> <meta property="og:type" content="website"> <meta property="og:url" content="https://punkrockdev.com/"> <meta property="og:image" content="https://punkrockdev.com/images/social.png"> <meta property="og:image:alt" content="Group of developers and designers sitting at a table during a meeting."> <meta property="og:description" content="An indie web development and data analysis studio that can help you build that app you've always dreamed of."> <meta property="og:site_name" content="Punk Rock Dev"> <meta property="og:locale" content="en_US"> <meta property="fb:app_id" content="217439528836908"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@punkrockdev"> <meta name="twitter:creator" content="@punkrockdev"> <meta name="twitter:title" content="Punk Rock Dev – Developing apps with a kick!"> <meta name="twitter:description" content="An indie web development and data analysis studio that can help you build that app you've always dreamed of."> <meta name="twitter:image" content="https://punkrockdev.com/images/social.png"> <meta name="twitter:image:alt" content="Group of developers and designers sitting at a table during a meeting."> </head> <body>  <header class="site-header site-header-homepage">  <div class="header__overlay"></div> <nav class="nav nav-header"> <div class="wrapper grid"> <a href="/" class="header-logo"></a> </div> </nav> <div class='header__fallback-image'></div> <div class="row header-content"> <div class="col-2-3 col-sm-12 col-sm-offset-0 site-header-column text-center"> <h2 class="site-subtitle">Developing apps with a kick!</h2> </div> </div> <video id="header-video" class="hide-desktop" autoplay="true" loop="true" muted="true" width="100%" height="100%" poster="data:image/gif,AAAA"> <source src="https://static.punkrockdev.com/file/punkrockdev/header-600px-30s.mp4" type="video/mp4"> </video> </header> <div class="page-content"> <section class="intro-section grey-background clearfix"> <nav class="nav nav-section nav-absolute" id="nav"> <ul class="nav-list nav-list-left"> <li class="nav-item"> <a href="https://www.twitter.com/punkrockdev/" target="_blank"> <i class="fab fa-twitter fa-fw"></i> </a> </li> <li class="nav-item"> <a href="https://www.facebook.com/punkrockdev/" target="_blank"> <i class="fab fa-facebook-f fa-fw"></i> </a> </li> <li class="nav-item"> <a href="https://www.github.com/punkrockdev/" target="_blank"> <i class="fab fa-github fa-fw"></i> </a> </li> <li class="nav-item"> <a href="https://open.spotify.com/playlist/6E52OGawG1plGSO9GT1yNC?si=7a667rKgSOKjvuvtUyDFvw" target="_blank"> <i class="fab fa-spotify"></i> </a> </li> </ul> <ul class="nav-list nav-list-right"> <li class="nav-item"><a href="#work" class="nav-link">Work</a></li> <li class="nav-item"><a href="#team" class="nav-link">Team</a></li> <li class="nav-item"><a href="/hub" class="nav-link">Hub</a></li> <li class="nav-item"><a href="https://blog.punkrockdev.com/" class="nav-link">Blog</a></li> <li class="nav-item nav-item-contact"><a href="#contact" class="nav-link">Contact</a></li> </ul> </nav> <div class="row"> <div class="intro-section-column"> <aside class="doodle"> <picture> <source srcset="images/LED.webp" type="image/webp" /> <source srcset="images/LED.png" type="image/png" /> <img src="images/LED.png" alt="LED doodle" /> </picture> </aside> <h2>IDEAS, DEVELOPMENT & PUNK ROCK</h2> <p class="section-paragraph"> So, here's the deal… Punk Rock Dev is an indie web development and data analysis studio that can help you <strong>build that app you've always dreamed of</strong>. We apply the DIY, no nonsense philosophy of punk rock to efficiently develop your app from concept to implementation. We believe that lean product development and smart priorities based on real data are important to build good apps that your users will love. </p> </div> </div> </section> <section class="portfolio-section white-background" id="work"> <div class="wrapper grid"> <div class="row"> <div class="col text-center"> <aside class="doodle"> <picture> <source srcset="images/safety_pin.webp" type="image/webp" /> <source srcset="images/safety_pin.png" type="image/png" /> <img src="images/safety_pin.png" alt="safety_pin doodle" /> </picture> </aside> <h2 class="section-heading">DISCOGRAPHY</h2> </div> </div> <div class="portfolio-item light clearfix"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot craftstrom device"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description">  <h3>CraftStrom</h3> <p>CraftStrom is a startup providing smart solar panels and batteries in urban environments. We’ve built the iOS and Android mobile apps and backend infrastructure allowing customers to set up, monitor and control their smart solar panel & battery system. (<a href="https://www.craftstrom.com/">web</a>)</p> </div> </div> </div> <div class="portfolio-item dark clearfix"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot pos"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>POSmusic</h3> <p>A music scheduling and playback app for businesses. Successfully deployed from local coffee shops to multinational franchises! We worked with POSMusic to build out their music streaming cloud infrastructure, extend their web app to support intuitive scheduling of playlists and genres in a drag-and-drop weekly calendar interface and support consistent playback over multiple time zones. To filter appropriate content, we’ve implemented a lyrics analysis tool for finding profanities. From the hardware side, we’ve worked on supporting POSMusic customers with music playback systems ranging from a simple iOS app, Sonos smart speakers to custom hardware with offline caching. (<a href="https://www.posmusic.com">web</a>)</p> </div> </div> </div> <div class="portfolio-item light clearfix"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot formunauts device"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>Formunauts</h3> <p>Formunauts is the most most popular European face-to-face fundraising software used by charities like Save the Children, Amnesty International, World Wildlife Fund and Greenpeace. We’ve worked together with the Formunauts team over several years to greatly extend their offline-first web application. Among the many features we’ve added are support for new markets in South America, mobile point-of-sale integration for contactless credit card payments, mobile receipt printer integration and porting the old Angular 1.x codebase to the latest version of Angular. (<a href="https://www.formunauts.at">web</a>)</p> </div> </div> </div> <div class="portfolio-item dark clearfix"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot zoomero"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>Zoomero</h3> <p>Accounting and business managment app for international companies doing business in China. We’ve worked together with S.J. Grand Financial and Tax Advisory to understand their existing workflows and design and build a web app that can support their and their customers’ work. The app featured multiple user types with different authorization levels, expense approval chains based on customizable management hierarchies, multi-lingual support and a fully responsive web interface usable both for mobile and desktop users. (<a href="https://www.sjgrand.cn">web</a>)</p> </div> </div> </div> <div class="portfolio-item dark2 clearfix"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot imGraetzl"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>Im Grätzl</h3> <p>A social network for exploring neighborhoods. imGraetzl connects thousands of creative professionals in Vienna! We worked closely with the imGraetzl team over multiple years to extend their software with features like office space sharing, discussion groups and local tool sharing (with payments processed using Stripe). (<a href="https://www.imgraetzl.at">web</a>, <a href="https://github.com/imGraetzl/im_graetzl">code</a>)</p> </div> </div> </div> <div class="portfolio-item dark clearfix collapsable-hidden"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot mysugr"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>mySugr</h3> <p> mySugr is the no. 1 app on the AppStore for people with diabetes – it has over 1.8 million users worldwide! To improve the way mySugr’s designers and developers collaborate internally, we’ve implemented a style guide for showcasing and easily using their many web components. (<a href="https://mysugr.com/">web</a>)</p> </div> </div> </div> <div class="portfolio-item dark2 clearfix collapsable-hidden"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot arxanima"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>arx anima</h3> <p>arx anima is an award-winning animation studio. We’ve improved their their online human resources system with collaborative drag-and-drop lists for easier and faster talent management. (<a href="http://arxanima.com/">web</a>)</p> </div> </div> </div> <div class="portfolio-item dark clearfix collapsable-hidden"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot crosho"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>CroSho</h3> <p>A crowd shopping marketplace. From idea to paying customers in just a few months! We’ve worked on the web app of an e-commerce site offering special discounts unlocked based on a certain number of shoppers all ordering the same item. (<a href="http://www.crosho.com/">web</a>)</p> </div> </div> </div> <div class="portfolio-item dark2 clearfix collapsable-hidden"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot esquirrel"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>eSquirrel</h3> <p>Online learning platform for high school kids. More than 200 courses authored & 28k quiz questions answered so far! We worked on the author portal allowing teachers to write questions and possible answers to the many quizzes available in the app. (<a href="https://www.esquirrel.at">web</a>)</p> </div> </div> </div> <div class="portfolio-item dark clearfix collapsable-hidden"> <div class="row"> <div class="col-1-2 col-xs-12 col-sm-4-5 app-screenshot where"></div> <div class="col-1-2 col-xs-12 col-sm-4-5 portfolio-description"> <h3>where2help</h3> <p>A volunteer management app for helping refugees. In 1 year grew to 60 organisations & 1400 volunteers! We worked on the schedule interface allowing the management of necessary volunteer capacity and the number of applicants as well as the Ruby on Rails backend. (<a href="https://www.where2help.wien">web</a>, <a href="https://github.com/where2help/where2help">code</a>)</p> </div> </div> </div> <div class="row"> <div class="col text-center"> <button class="button" id="collapsable">Show more</button> </div> </div> </div> </section> <section class="about-section grey-background" id="team"> <div class="wrapper grid"> <div id="the-band" class="row"> <div class="col text-center"> <h2 class="section-heading">MEET THE BAND</h2> </div> </div> <div class="row" style="padding: 0;">  <div class="col-1-2 col-sm-1-2 col-md-12 about-col">   <picture> <source srcset="images/team/Drazen.webp" type="image/webp" /> <source srcset="images/team/Drazen.jpg" type="image/jpg" /> <img src="images/team/Drazen.jpg" alt="photo of Dražen" class="mugshot" /> </picture>  <h3 class="about-heading"><a href="https://metakermit.com/" class="about-social-link">Dražen Lučanin</a> <a href="https://github.com/metakermit" class="social-icon-link"><i class="fab fa-github"></i></a> <a href="https://twitter.com/metakermit" class="social-icon-link"><i class="fab fa-twitter"></i></a></h3> <p class="about-description"> Dražen manages Punk Rock Dev with practical software engineering experience from working in the industry since 2009. He has experience with both web app backends in Python and Ruby as well as frontends in JavaScript. Having done a PhD in computer science, he knows his way around data analysis, visualisation and machine learning – useful tools if you have challenging problems to tackle. Dražen started Punk Rock Dev to help people create practical and impactful apps in a fun & relaxed atmosphere. </p> </div>  <div class="col-1-2 col-sm-1-2 col-md-12 about-col">   <picture> <source srcset="images/team/Ramon.webp" type="image/webp" /> <source srcset="images/team/Ramon.jpg" type="image/jpg" /> <img src="images/team/Ramon.jpg" alt="photo of Ramon" class="mugshot" /> </picture>  <h3 class="about-heading"><a href="https://ramonh.dev" class="about-social-link">Ramón Huidobro</a> <a href="https://github.com/ramonh" class="social-icon-link"><i class="fab fa-github"></i></a> <a href="https://twitter.com/hola_soy_milk" class="social-icon-link"><i class="fab fa-twitter"></i></a></h3> <p class="about-description"> Ramon is a software engineer with over ten years of experience building macOS, iOS and full-stack web apps. His core expertise comes from Objective-C, Swift, Ruby/Rails, as well as JavaScript. More recently, he has also developed apps with Elixir, React and React Native. Ramon's biggest passion is in the software engineering community, and the nurturing thereof. Aside from organising and speaking at meetups, hackathons and conferences, Ramon has also recently joined the Mozilla Tech Speakers initiative. </p> </div>  <div class="col-1-2 col-sm-1-2 col-md-12 about-col"> <picture> <source srcset="images/team/Antonija.webp" type="image/webp" /> <source srcset="images/team/Antonija.jpg" type="image/jpg" /> <img src="images/team/Antonija.jpg" alt="photo of Antonija" class="mugshot" /> </picture> <h3 class="about-heading"><a href="https://mytwocents.dev/" class="about-social-link">Antonija Šimić</a> <a href="https://github.com/tonkec" class="social-icon-link"><i class="fab fa-github"></i></a> <a href="https://twitter.com/tonkec_palonkec" class="social-icon-link"><i class="fab fa-twitter"></i></a></h3> <p class="about-description"> Antonija is a frontend developer with an eye for pixel perfection and a taste for animations that make web apps come to life. In her career, she has implemented countless user interfaces, both on her own and by adhering to existing design mockups. In her recent projects she is using React and React Native, but has experience with other web frameworks as well. Antonija also has a background in education – she has been mentoring students and helping them improve their web development skills in (S)CSS and Javascript. When away from keyboard, Antonija is working to grow the local tech community by organising in-person CSS meetups or reading comics. </p> </div>  <div class="col-1-2 col-sm-1-2 col-md-12 about-col"> <picture> <source srcset="images/team/Hana.webp" type="image/webp" /> <source srcset="images/team/Hana.jpg" type="image/jpg" /> <img src="images/team/Hana.jpg" alt="photo of Dražen" class="mugshot" /> </picture> <h3 class="about-heading"><a href="https://www.behance.net/hanastojakde72" class="about-social-link">Hana Stojaković</a></h3> <p class="about-description"> Hana is a graphic designer with a bachelor’s degree who focuses on visual communication and the interconnectedness of various design fields – from physical to virtual mediums. She has experience working as a freelancer, having worked on projects ranging from custom logotypes to full-fledged web designs. After mastering the fundamentals at university, she practiced her skills on real-world UI/UX projects while working with a design agency in Berlin. Besides for coming up with imaginative visual art, Hana is involved in the art of movement by practicing contemporary dance in her free time. </p> </div>  <div class="col-1-2 col-sm-1-2 col-md-12 about-col about-col-last"> <picture> <source srcset="images/team/Nikola.webp" type="image/webp" /> <source srcset="images/team/Nikola.jpg" type="image/jpg" /> <img src="images/team/Nikola.jpg" alt="photo of Dražen" class="mugshot" /> </picture> <h3 class="about-heading"><a href="https://github.com/shnikola" class="about-social-link">Nikola Šantić</a> <a href="https://github.com/shnikola" class="social-icon-link"><i class="fab fa-github"></i></a> <a href="https://twitter.com/shnikola" class="social-icon-link"><i class="fab fa-twitter"></i></a></h3> <p class="about-description"> Nikola is an experienced Rails developer with a master’s degree in computer science and a background in natural language processing. From a software engineering perspective, architecting backend models and optimising Postgres database queries for performance are his specialties. When it comes to project management, Nikola is very skilled at communicating and specifying software requirements, prioritising and staying within scope to deliver results on time. In his spare time Nikola makes music, draws comics and excels at quizzes. </p> </div> </div> </div> </section> <section class="contact-section white-background" id="contact"> <div class="wrapper grid"> <div class="row"> <div class="col-1-2 contact-column"> <aside class="doodle"> <picture> <source srcset="images/phone.webp" type="image/webp" /> <source srcset="images/phone.png" type="image/png" /> <img src="images/phone.png" alt="phone doodle" /> </picture> </aside> <h2 id="the-gig" class="text-center section-heading">THE GIG</h2> <p> Interested in working on a project together? Awesome! Please tell us a bit about your project and constraints and we'll set up a call to discuss the details. Looking forward to hearing from you! </p> <form id="contact_form" action="https://formspree.io/hello@punkrockdev.com" method="post"> <div class="form-input"> <label for="name">Your name:</label> <input id="name" type="text" name="name" autocomplete="name" /> </div> <div class="form-input"> <label for="email">Your email:</label> <input id="email" type="email" name="email" autocomplete="email" required="" /> </div> <div class="form-input"> <label for="description">Describe your project in a couple of sentences:</label> <textarea id="description" name="description" rows="7"></textarea> </div> <input type="text" name="_gotcha" style="display:none" /> <input type="hidden" name="_next" value="http://punkrockdev.com/thanks.html" /> <input type="hidden" name="_subject" value="Punk Rock Dev Inquiry" /> <input type="submit" value="Get in touch" class="button" /> </form> </div> </div> </div> </section> <div class="footer-image"></div> </div> <footer class="site-footer"> <a href="/" class="logo"></a> <div class="footer-bottom-links"> <div class="footer-col-wrapper"> <div class="footer-col footer-col-3-5 hide-laptop">  <div id="mc_embed_signup" class="newsletter-wrapper"> <form action="https://punkrockdev.us14.list-manage.com/subscribe/post?u=53aecd554422f8ec674b24a16&id=d2c61c9268" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <h2>Join our newsletter!</h2> <p>You'll get practical learning resources useful for running your startup.</p> <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> <div class="mc-field-group"> <input type="text" value="" name="NAME" class="" id="mce-NAME" placeholder="Name"> </div> <div class="mc-field-group"> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div>  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_53aecd554422f8ec674b24a16_d2c61c9268" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div>  </div> <ul class="contact-list"> <li> <a href="/hub"> <i class="fas fa-building fa-fw"></i><span>Hub</span> </a> </li> <li> <a href="https://blog.punkrockdev.com/"> <i class="fas fa-newspaper fa-fw"></i><span>Blog</span> </a> </li> <li> <a href="https://www.twitter.com/punkrockdev/" target="_blank"> <i class="fab fa-twitter fa-fw"></i><span>twitter.com/</span>@punkrockdev </a> </li> <li> <a href="https://www.facebook.com/punkrockdev/" target="_blank"> <i class="fab fa-facebook-f fa-fw"></i><span>facebook.com/</span>punkrockdev </a> </li> <li> <a href="https://www.github.com/punkrockdev/" target="_blank"> <i class="fab fa-github fa-fw"></i><span>github.com/</span>punkrockdev </a> </li> <li> <a href="https://open.spotify.com/playlist/6E52OGawG1plGSO9GT1yNC?si=xwuhDfqOSM6Byg4xi8UD8A" target="_blank"> <i class="fab fa-spotify"></i>Spotify </a> </li> <li> <a href="/privacy"> <i class="fas fa-file-alt fa-fw"></i><span>Privacy</span> </a> </li> <li> <a href="/impressum"> <i class="fas fa-file-alt fa-fw"></i><span>Impressum</span> </a> </li> <li> <a href="/cdn-cgi/l/email-protection#6f070a0303002f1f1a01041d000c040b0a19410c0002" target="_self" data-title="" title=""> <i class="fas fa-envelope fa-fw"></i><span>Email</span> </a> </li> </ul> </div> </div> </footer> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[3]='NAME';ftypes[3]='text';fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script> <script src="/js/video.js"></script> <script src="/js/main.js"></script> </body> </html>

CINXE.COM

Punk Rock Dev – Developing apps with a kick!