Introduction
Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets" (wiki). More than a popular social network, it has a huge influence to front-end development and community and to the one of the most famous CSS framework: Bootstrap.
Regardless to the bad news lately, I still love Twitter and appreciate it for the knowledge that I've learned through the tweets of the accounts I followed in the past years.
I'm an UI/UX lover. I see nice UI, I clone
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/-l8CqgFRSaM
Happy prototyping!
Changelog
Note: All updates are on Ionic 1
Last updated: Jun 17 2017
v1
- First version
v2
- Compatible with Ionic CLI ~3.4.0
Screens
- Login
- Home
- Connect (people)
- Search Tweets
- Notifications
- Messaging (with Giphy)
- Profile
- Settings
- New tweet
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
- Using SASS as CSS preprocessor
- Checkout package.json "bower": "^1.3.3", "gulp-angular-filesort": "^1.1.1", "gulp-inject": "^4.1.0", "gulp-natural-sort": "^0.1.1", "gulp-util": "^2.2.14", "shelljs": "^0.3.0"
- Check out bower.json "moment": "^2.14.1", "ion-sticky": "^1.0.6", "angular-elastic": "^2.5.1", "ngCordova": "^0.1.27-alpha", "angular-gridify": "^0.1.2"
- Modify the default color theme to match Twitter's colors in
/scss/ionic.app.scss
// line 18
$positive: #308EEF !default;
Improved Directory Structure
No more frustrated controllers - services - directives - filters - templates structure. The directory structure is now component-oriented which puts files and folders into component's folders. Easier to structure and maintain the project.
More over, thanks to gulp-inject
, we will never forget to include the js file into index.html. Run $ gulp inject
on the go or simply restart the ionic server.
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/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)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/e2ced226d107cf6632b25ab57a9ae9398dec5f7e-640x1136.jpg?w=600&h=1065&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/c56b6d54736b6068972e5a6998fc2f743ba34250-640x1136.jpg?w=600&h=1065&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/8d6faff83d06fd26cb012d214332eca010b88adf-640x1136.jpg?w=600&h=1065&auto=format)