Introduction
** This is now becoming the tribute to Vine App :) Vine team decided to discontinued its mobile app**
Vine is an entertainment network where videos and personalities get really big, really fast. Download Vine to watch videos, remixes and trends before they blow up.
I really like its simple, neat design. That's why I decided to copy that UI to the hybrid world.
I always take it serious to keep the code quality high, with clean and self-explained code. When purchasing this, you also get my latest "helper" snippets inside the package to make it more fun to code.
What's in the package
- Ionic Project source code: based on the folder structure generated with
Ionic CLI
- No Backend code: this is just the UI, not a fully functional app. Data is mostly static dummy unless mentioned, e.g GIF search uses the real Giphy API
Preview
Watch on Youtube
See how it works on Youtube: https://youtu.be/WAfx_DPuEO4
Happy prototyping!
Changelog
Note: All updates are on Ionic 1
Last updated: May 5 2019
v1
- First version
v2
- Small fixes
- Add Vines suggestion, Authors suggestion, Connect suggestion
v3
- Update Login screen
- Some UI fixes
v4
- Compatible with Ionic CLI ~3.4.0
v5
- Compatible with Ionic CLI 4.12.0 and Cordova 9.0.0
Screens
- Greeting
- Login
- Signup
- Feeds
- Search
- Capture
- Activity
- Me
- Search page
- Settings
- Comment
- Friends
- Message
- Channel view
Run locally
1.Install Ionic environment
$ npm install -g cordova@9.0.0
$ npm install -g ionic@4.12.0
2.After purchasing, download the zip file containing the entire demo app and unzip
3.Go inside the extracted folder
4.Install all dependencies
$ npm install
$ bower install
5.Start local server
$ ionic serve
6.Your default browser should now automatically open the template
Notes
If you want to integrate this plugin into your project, don't forget these dependencies
1.ngCordova
$ bower install ionic-native --save
2.Material colors
$ bower install material-colors --save
3.Cordova Plugins
$ ionic cordova plugin add cordova-plugin-media-capture
$ ionic cordova plugin add cordova-plugin-camera
4.Modify the default color theme to match Vine's color in scss/ionic.app.scss
// line 9
$balanced: #00bf8e !default;
Contact
If you need any technical support or have any questions, don't hesitate to send me a message: mr_hie@yahoo.com
Homepage: https://www.takethatdesign.com
More Like This
![](https://cdn.sanity.io/images/o607ve1z/leafdb/14dab9ad1e64493ad9056d9b5401e0749640b287-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/efd0144d3d4dc4ad0ba8c5618d31431de502f05b-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/467e1bb67af60d384e48d0a4365ceff4e0d7eaea-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/735ac16193944008ebd7600f1924a0449885cdf8-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/b9c0d996817b1c0d7885f82d49a29514c1447fcd-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/49fe922c4721f3e927508cd1a3ff55c0b054457e-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/fa2c70eef1f1b3b2f54d53715951269283c21ccf-640x1136.jpg?w=600&h=1065&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/27c2b6af60ad58724f90a31f16927a73e6a8bd26-640x1136.jpg?w=600&h=1065&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/00699bb98ad784ad1fd60dbd3b3a89634e822719-640x1136.jpg?w=600&h=1065&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/048238d98187cb0cbffa2bd53d54445da5746c55-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/a6b8bf6610f61421351edeccf84f9394b6fbd3e3-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/afebc0ca422e8016ebb2c5588479370988bd07ef-665x1182.jpg?rect=0,1,665,1181&w=600&h=1066&auto=format)