├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── capacitor.config.json ├── design.jpg ├── ionic.config.json ├── jest.config.js ├── package-lock.json ├── package.json ├── public ├── assets │ ├── icon │ │ ├── favicon.png │ │ └── icon.png │ ├── images │ │ ├── brazil.jpg │ │ ├── hawaii.jpg │ │ ├── jamaica.jpg │ │ ├── lewis.png │ │ ├── logo.png │ │ ├── makazoli.png │ │ ├── max.png │ │ ├── panama.jpg │ │ └── snoop.png │ └── shapes.svg └── index.html └── src ├── App.vue ├── components ├── Reactions.vue └── Stories.vue ├── main.js ├── router └── index.js ├── store └── index.js ├── theme ├── media-queries.scss └── variables.css └── views ├── Profile.vue ├── Tabs.vue └── Timeline.vue /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | ], 10 | parserOptions: { 11 | ecmaVersion: 2020 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'vue/no-deprecated-slot-attribute': 'off', 17 | 'vue/custom-event-name-casing': 'off' 18 | }, 19 | overrides: [ 20 | { 21 | files: [ 22 | '**/__tests__/*.{j,t}s?(x)', 23 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 24 | ], 25 | env: { 26 | jest: true 27 | } 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | android 5 | ios 6 | .gradle 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | api_key 27 | config.json 28 | build.json 29 | 30 | # Cordova 31 | # /src-cordova/platforms 32 | # /src-cordova/plugins 33 | # /public/cordova.js 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Ionic Vue Instagram Template 2 | 3 | ![Netlify Status](https://api.netlify.com/api/v1/badges/fc2b8d51-2242-440c-8f6c-f283e77154c4/deploy-status) 4 | 5 | Instagram-inspired [Ionic Vue](https://ionicframework.com/vue) template. 6 | 7 | [Demo](https://ionic-vue-mobile-template-06.netlify.app) 8 | 9 | ## Project setup 10 | ``` 11 | npm install 12 | ``` 13 | 14 | ### Run on the browser - development 15 | ``` 16 | npm run serve 17 | ``` 18 | 19 | ## Design 20 | ![Screenshot|316x500, 75%](/design.jpg "Screenshot") 21 | 22 | ## Native 23 | 24 | Using [Capacitor](https://capacitorjs.com/docs/getting-started) for native builds 25 | 26 | ## Prepare native builds 27 | 28 | ### iOS testing and distribution 29 | 1. Download the latest Xcode 30 | 2. `npm run build` 31 | 3. `npx cap add ios` 32 | 3. `npx cap copy` 33 | 4. `npx cap open ios` Xcode takes a few seconds to index the files; keep an eye at the top of Xcode's window for progress. 34 | 35 | [Not compulsory] For sanity check click on the play button in the top left. This will prepare and run the app in a simulator, if all goes well you should be able to run the app and click around. If not, create an issue 🤷 and I will have a look. 36 | 37 | ### Android testing and distribution 38 | 1. Download the latest Android Studio 39 | 2. `npm run build` 40 | 3. `npx cap add android` 41 | 3. `npx cap copy` 42 | 4. `npx cap open android` Android Studio takes a few seconds to index the files, keep an eye at the bottom of Android Studio for progress. 43 | 5. Testing - When indexing is complete, look for a green play button. Click the play button and it will launch the app in an emulator ([See here to setup Emulator](https://developer.android.com/studio/run/managing-avds)) or on the phone, if a phone is connected via USB. 44 | 45 | ## Official Docs 46 | - [Getting started](https://ionicframework.com/vue) 47 | 48 | ## Resources 49 | - [Newsletter](https://mailchi.mp/b9133e120ccf/sqan8ggx22) - Signup to my Ionic Vue newsletter to get templates and other Ionic Vue updates in your inbox! 50 | - [YouTube Channel](https://www.youtube.com/channel/UC5jZ6srZuLwt3O3ZtuM1Dsg) - Subscribe to my YouTube channel. 51 | - [Ionic Vue Tempalates](https://tinyurl.com/y2gl39dk) - Free Ionic Vue Templates. 52 | - [Ionic Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=dlodeprojuicer.ionicvuesnippets) - This extension adds ionic-vue snippets. Quickly add ionic-vue component code by simply typing iv. The iv prefix will show a range of snippets to choose from. 53 | 54 | ## Affiliates 55 | I want to keep doing these templates for free for as long as possible. I have joined a few affiliate programs to help take care of the costs. 56 | - [Pixeltrue](https://www.pixeltrue.com/?via=simo) - High-quality illustrations that will help you build breath-taking websites. 57 | - [Getrewardful](https://www.getrewardful.com/?via=simo) - Create your own affiliate program. 58 | 59 | Alternatively, you can buy me a coffee Buy Me A Coffee 60 | 61 | ## Credits 62 | - [Carlos Martinez](https://github.com/cmartinezone/IonicVueExplorePlaces) 63 | - [Tami Maiwashe](https://www.linkedin.com/in/tami-maiwashe-32824a19a/) - Documentation 64 | 65 | ## Contact 66 | - [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter 67 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "exploreplaces", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "dist", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/design.jpg -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-blank", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "vue" 7 | } 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest' 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instagram", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:unit": "vue-cli-service test:unit", 9 | "test:e2e": "vue-cli-service test:e2e", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "@capacitor/android": "^2.4.2", 14 | "@capacitor/core": "2.4.2", 15 | "@capacitor/ios": "^2.4.2", 16 | "@ionic/cli": "^6.12.2", 17 | "@ionic/pwa-elements": "^3.0.1", 18 | "@ionic/vue": "^5.4.0", 19 | "@ionic/vue-router": "^5.4.0", 20 | "core-js": "^3.6.5", 21 | "global": "^4.4.0", 22 | "node-sass": "^5.0.0", 23 | "sass-loader": "^10.1.0", 24 | "vue": "^3.0.0-0", 25 | "vue-router": "^4.0.0-0", 26 | "vuex": "^4.0.0-rc.1" 27 | }, 28 | "devDependencies": { 29 | "@capacitor/cli": "2.4.2", 30 | "@vue/cli-plugin-babel": "~4.5.0", 31 | "@vue/cli-plugin-eslint": "~4.5.0", 32 | "@vue/cli-plugin-router": "~4.5.0", 33 | "@vue/cli-plugin-unit-jest": "~4.5.0", 34 | "@vue/cli-service": "~4.5.0", 35 | "@vue/compiler-sfc": "^3.0.0-0", 36 | "@vue/eslint-config-typescript": "^5.0.2", 37 | "@vue/test-utils": "^2.0.0-0", 38 | "eslint": "^6.7.2", 39 | "eslint-plugin-vue": "^7.0.0-0", 40 | "vue-jest": "^5.0.0-0" 41 | }, 42 | "description": "Ionic Vue Template 06 inspired by Instagram" 43 | } 44 | -------------------------------------------------------------------------------- /public/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/icon/favicon.png -------------------------------------------------------------------------------- /public/assets/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/icon/icon.png -------------------------------------------------------------------------------- /public/assets/images/brazil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/brazil.jpg -------------------------------------------------------------------------------- /public/assets/images/hawaii.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/hawaii.jpg -------------------------------------------------------------------------------- /public/assets/images/jamaica.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/jamaica.jpg -------------------------------------------------------------------------------- /public/assets/images/lewis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/lewis.png -------------------------------------------------------------------------------- /public/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/logo.png -------------------------------------------------------------------------------- /public/assets/images/makazoli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/makazoli.png -------------------------------------------------------------------------------- /public/assets/images/max.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/max.png -------------------------------------------------------------------------------- /public/assets/images/panama.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/panama.jpg -------------------------------------------------------------------------------- /public/assets/images/snoop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/snoop.png -------------------------------------------------------------------------------- /public/assets/shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Reactions.vue: -------------------------------------------------------------------------------- 1 | 2 | 15 | 16 | 59 | 60 | 69 | -------------------------------------------------------------------------------- /src/components/Stories.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 30 | 31 | 54 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import store from "./store"; 5 | 6 | import { IonicVue } from "@ionic/vue"; 7 | 8 | /* Core CSS required for Ionic components to work properly */ 9 | import "@ionic/vue/css/core.css"; 10 | 11 | /* Basic CSS for apps built with Ionic */ 12 | import "@ionic/vue/css/normalize.css"; 13 | import "@ionic/vue/css/structure.css"; 14 | import "@ionic/vue/css/typography.css"; 15 | 16 | /* Optional CSS utils that can be commented out */ 17 | import "@ionic/vue/css/padding.css"; 18 | import "@ionic/vue/css/float-elements.css"; 19 | import "@ionic/vue/css/text-alignment.css"; 20 | import "@ionic/vue/css/text-transformation.css"; 21 | import "@ionic/vue/css/flex-utils.css"; 22 | import "@ionic/vue/css/display.css"; 23 | 24 | /* Theme variables */ 25 | import "./theme/variables.css"; 26 | 27 | const app = createApp(App) 28 | .use(IonicVue) 29 | .use(router) 30 | .use(store); 31 | 32 | router.isReady().then(() => { 33 | app.mount("#app"); 34 | }); 35 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "@ionic/vue-router"; 2 | import Tabs from "../views/Tabs.vue"; 3 | import Timeline from "../views/Timeline.vue"; 4 | 5 | const routes = [ 6 | { 7 | path: "/", 8 | redirect: "/timeline", 9 | }, 10 | { 11 | path: "/timeline", 12 | component: Tabs, 13 | children: [ 14 | { 15 | path: "", 16 | name: "timeline", 17 | component: Timeline, 18 | } 19 | ], 20 | }, 21 | 22 | { 23 | path: "/user/", 24 | component: Tabs, 25 | children: [ 26 | { 27 | path: "", 28 | redirect: { name: "profile" }, 29 | }, 30 | { 31 | name: "profile", 32 | path: "profile", 33 | component: () => import("@/views/Profile.vue") 34 | }, 35 | ], 36 | }, 37 | ]; 38 | 39 | const router = createRouter({ 40 | history: createWebHistory(process.env.BASE_URL), 41 | routes, 42 | }); 43 | 44 | export default router; 45 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "vuex"; 2 | 3 | const store = createStore({ 4 | state: { 5 | posts: [ 6 | { 7 | name: "SnoopDogg", 8 | image: "assets/images/brazil.jpg", 9 | id: 1, 10 | likes: 22349, 11 | description: 12 | "all about Brazil, suspendisse lobortis pharetra tempor. Cras eleifend ante sed arcu interdum, in bibendum enim ultricies. Integer rutrum quis risus at tempor." 13 | }, 14 | { 15 | name: "BrookeShaden", 16 | image: "assets/images/hawaii.jpg", 17 | id: 3 18 | }, 19 | { 20 | name: "ThisIsRory", 21 | image: "assets/images/panama.jpg", 22 | id: 2, 23 | likes: 390, 24 | description: 25 | "all about panama. Nam fermentum, leo ac lobortis tincidunt, justo felis semper nisi, sed facilisis quam ante a justo. Nam pulvinar nibh nec mi vestibulum cursus quis eget orci. Aenean faucibus faucibus ex, a imperdiet nibh luctus faucibus. Mauris porttitor, velit ac eleifend mattis, sem justo accumsan odio, ut mattis nulla nulla eu nibh." 26 | }, 27 | { 28 | name: "Jamaican_tourism", 29 | slug: "jamaica", 30 | image: "assets/images/jamaica.jpg", 31 | id: 4 32 | }, 33 | ], 34 | stories: [ 35 | { 36 | name: "Makazol", 37 | image: "assets/images/makazoli.png" 38 | }, 39 | { 40 | name: "snoop", 41 | image: "assets/images/snoop.png" 42 | }, 43 | { 44 | name: "max", 45 | image: "assets/images/max.png" 46 | }, 47 | { 48 | name: "snoop", 49 | image: "assets/images/snoop.png" 50 | }, 51 | { 52 | name: "lewis", 53 | image: "assets/images/lewis.png" 54 | }, 55 | { 56 | name: "Makazol", 57 | image: "assets/images/makazoli.png" 58 | }, 59 | { 60 | name: "snoop", 61 | image: "assets/images/snoop.png" 62 | }, 63 | { 64 | name: "max", 65 | image: "assets/images/max.png" 66 | }, 67 | { 68 | name: "snoop", 69 | image: "assets/images/snoop.png" 70 | }, 71 | { 72 | name: "lewis", 73 | image: "assets/images/lewis.png" 74 | }, 75 | ] 76 | }, 77 | 78 | getters: { 79 | posts({ posts }) { 80 | return posts; 81 | }, 82 | stories({ stories }) { 83 | return stories; 84 | } 85 | }, 86 | mutations: {}, 87 | actions: {}, 88 | }); 89 | 90 | export default store; 91 | -------------------------------------------------------------------------------- /src/theme/media-queries.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ##Device = Desktops 3 | ##Screen = 1281px to higher resolution desktops 4 | */ 5 | 6 | @media (min-width: 1281px) { 7 | 8 | .not-mobile { 9 | display: block; 10 | width: 50%; 11 | text-align: center; 12 | margin: 0 auto; 13 | z-index: 9999999999; 14 | } 15 | 16 | } 17 | 18 | /* 19 | ##Device = Laptops, Desktops 20 | ##Screen = B/w 1025px to 1280px 21 | */ 22 | 23 | @media (min-width: 1025px) and (max-width: 1280px) { 24 | 25 | .not-mobile { 26 | display: block; 27 | width: 50%; 28 | text-align: center; 29 | margin: 0 auto; 30 | z-index: 9999999999; 31 | } 32 | 33 | } 34 | 35 | /* 36 | ##Device = Tablets, Ipads (portrait) 37 | ##Screen = B/w 768px to 1024px 38 | */ 39 | 40 | @media (min-width: 768px) and (max-width: 1024px) { 41 | 42 | .not-mobile { 43 | display: block; 44 | width: 50%; 45 | text-align: center; 46 | margin: 0 auto; 47 | z-index: 9999999999; 48 | } 49 | 50 | } 51 | 52 | /* 53 | ##Device = Tablets, Ipads (landscape) 54 | ##Screen = B/w 768px to 1024px 55 | */ 56 | 57 | @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 58 | 59 | .not-mobile { 60 | display: none; 61 | } 62 | 63 | } 64 | 65 | /* 66 | ##Device = Low Resolution Tablets, Mobiles (Landscape) 67 | ##Screen = B/w 481px to 767px 68 | */ 69 | 70 | @media (min-width: 481px) and (max-width: 767px) { 71 | 72 | .not-mobile { 73 | display: none; 74 | } 75 | 76 | } 77 | 78 | /* 79 | ##Device = Most of the Smartphones Mobiles (Portrait) 80 | ##Screen = B/w 320px to 479px 81 | */ 82 | 83 | @media (min-width: 320px) and (max-width: 480px) { 84 | 85 | .not-mobile { 86 | display: none; 87 | } 88 | 89 | } -------------------------------------------------------------------------------- /src/theme/variables.css: -------------------------------------------------------------------------------- 1 | /* Ionic Variables and Theming. For more info, please see: 2 | http://ionicframework.com/docs/theming/ */ 3 | @import "./media-queries.scss"; 4 | 5 | :root { 6 | --ion-color-primary: #FFFFFF; 7 | --ion-color-primary-tint: #FFFFFF; 8 | --ion-color-primary-shade: #FFFFFF; 9 | 10 | --ion-color-light: #ffffff; 11 | --ion-color-medium: #e6e5e5; 12 | --ion-color-medium-tint: #FFFFFF; 13 | --ion-color-medium-shade: #FFFFFF; 14 | --ion-color-medium-contrast:#FFFFFF; 15 | --ion-background-color: #000000; 16 | color: #FFFFFF; 17 | } 18 | 19 | h1 , h2 , h3 , h4 , p , a , ul li , strong , label { 20 | color: #777777; 21 | } 22 | -------------------------------------------------------------------------------- /src/views/Profile.vue: -------------------------------------------------------------------------------- 1 | 2 | 65 | 66 | 116 | 117 | 172 | -------------------------------------------------------------------------------- /src/views/Tabs.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 59 | 60 | -------------------------------------------------------------------------------- /src/views/Timeline.vue: -------------------------------------------------------------------------------- 1 | 2 | 55 | 56 | 152 | 153 | 207 | --------------------------------------------------------------------------------