Sample Meteor app showing cross-platform photo and note taking. Instagram in 50 lines of JavaScript (as of the first commit) and 250 lines with extra features (shake to undo, real-time photo markers on the map, REST API).
More screenshots of the Instagram Clone Android app.
Cross-platform iOS, Android (see Google Play Store listing) and web application from a single code base.
Use native device features, such as
Photos are stored on the cloud and synchronized instantly across all connected clients. For the best effect, open https://huawei.meteor.com in two browser tabs, or in a tab and on Android, and take a photo - it will instantly appear in both tabs. The reverse chronological sort order will also be kept.
OAuth login with Facebook, Twitter, Google, GitHub, Weibo, with only one line of code
Access control - you can only undo your own notes, and the admin has unrestricted access
Use 3rd party API services such as Google Maps, and make them reactive in real-time. Again with two tabs open, try dragging a map marker. When you release it, you'll see it automatically move in the other tab. To fully understand how awesome this is, consider what happened behind the scenes:
All this required writing about 10 lines of code.
Offline functionality: even if your device is not online, you can still take pictures and write notes, and they'll be synchronized when connectivity is restored.
Hot code push: I can make a change to the app and run meteor deploy huawei
. Users who are visiting huawei.meteor.com will automatically have the page refresh to reflect the latest changes. Even more interestingly, the Android and iOS apps will also be updated, without having to submit another Play Store/App Store update and wait through the approval cycle. Try this locally by adding a CSS rule to change the background while the app is meteor run
ning.
Mobile web browser support (test at https://huawei.meteor.com): take pictures from Chrome (works on desktop (Windows, OS X) and Android with some limitations) or Firefox and Opera. Safari and IE unfortunately don't support camera access. The browser limitations aren't a problem, because from this same codebase we can create Android and iOS apps.
REST API at /api/notes/
Responsive (photos automatically fit the browser viewport) using Twitter Bootstrap
Material Design theme
From this codebase, we can generate hybrid Android/iOS apps. First, install Meteor.
To run this app in the iOS simulator on a Mac:
meteor install-sdk ios
# meteor add-platform ios # iOS platform already added to the project
meteor run ios
To run it on an iOS device (requires Apple developer account): meteor run ios-device
.
It also works as a hybrid app on Android. To run it in the Android emulator:
meteor install-sdk android
# meteor add-platform android # Android platform already added to the project
meteor run android
To run the app on Android devices (make sure USB debugging is enabled and quit the Android emulator): meteor run android-device
.
To install Meteor: https://www.meteor.com/install
Tutorial for building a collaborative TODO list app in one hour with Meteor: https://www.meteor.com/try
Why choose Meteor in the first place: Why Meteor?
The very first iteration achieved the core functionality of Instagram in ~50 lines of JavaScript and ~15 lines of HTML (as of the first commit). For only 200 more lines, we get a real-time reactive map, shake to undo (all cross-platform), access control, responsive layout, material design theme, and a REST API.
Features having little to do with Meteor, but adding to the effect:
Features interesting to a Chinese audience
Meteor-specific features
This code is dual licensed:
Copyright (C) 2015 Dan Dascalescu. Developed for Huawei / Futurewei Technologies Inc.