├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── README.md ├── babel.config.js ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── img │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── android-chrome-maskable-192x192.png │ │ ├── android-chrome-maskable-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg ├── index.html └── robots.txt ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── Avatar.vue │ ├── Container.vue │ ├── CustomText.vue │ ├── Header.vue │ └── Post.vue ├── icons │ ├── comment.svg │ ├── direct-fill.svg │ ├── direct.svg │ ├── emoji.svg │ ├── explore-fill.svg │ ├── explore.svg │ ├── home-fill.svg │ ├── home.svg │ ├── like-fill.svg │ ├── like.svg │ ├── more.svg │ ├── save-fill.svg │ └── save.svg ├── main.js ├── registerServiceWorker.js ├── router │ └── index.js ├── store │ └── index.js ├── styles │ ├── app.css │ └── variables.css └── views │ ├── direct │ └── index.vue │ ├── explore │ └── index.vue │ ├── home │ └── index.vue │ └── profile │ ├── igtv.vue │ ├── index.vue │ ├── post.vue │ ├── save.vue │ └── tag.vue ├── vue.config.js └── yarn.lock /.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: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 7 | parserOptions: { 8 | parser: "babel-eslint" 9 | }, 10 | rules: { 11 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 12 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | useTabs: false, 5 | semi: false, 6 | singleQuote: true, 7 | trailingComma: 'none', 8 | bracketSpacing: true, 9 | jsxBracketSameLine: false 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # instagram-clone-vue 2 | 3 | ## TODOS 4 | 5 | - [x] Vue ve React arasındaki fark. vue-cli ile proje kurulumu 6 | - [x] CSS alt yapısı ve tipografi. projedeki (svg) ikonların hazırlanması 7 | - [x] Sayfaları oluşturalım. Master-Page oluşturalım 8 | - [x] Header tasarımı ve Anasayfa için layout oluşturalım 9 | - [x] Proje host etmek için vercel.com deploy konfigrasyonu 10 | - [ ] Anasayfa'daki post componenti 11 | - [ ] Anasayfa için api ve infinite-scroll 12 | - [ ] Anasayfa'daki stories alanı 13 | - [ ] Yorum gönder için api ve implemente edilmesi 14 | - [ ] Options modal componenti ve animasyon kullanımı 15 | - [ ] Keşfet sayfası için api ve layout tasarımı 16 | - [ ] Post modal componenti ve keşfet sayfasına implemente edilmesi 17 | - [ ] Profil sayfası ve sekmeler için route ayarı 18 | 19 | ## Project setup, development and build 20 | 21 | ``` 22 | yarn install 23 | 24 | # development 25 | yarn serve 26 | 27 | # production 28 | yarn build 29 | ``` 30 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instagram-clone-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "register-service-worker": "^1.7.1", 13 | "vue": "^2.6.11", 14 | "vue-router": "^3.2.0", 15 | "vuex": "^3.4.0" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "~4.4.0", 19 | "@vue/cli-plugin-eslint": "~4.4.0", 20 | "@vue/cli-plugin-pwa": "~4.4.0", 21 | "@vue/cli-plugin-router": "~4.4.0", 22 | "@vue/cli-plugin-vuex": "~4.4.0", 23 | "@vue/cli-service": "~4.4.0", 24 | "@vue/eslint-config-prettier": "^6.0.0", 25 | "babel-eslint": "^10.1.0", 26 | "eslint": "^6.7.2", 27 | "eslint-plugin-prettier": "^3.1.3", 28 | "eslint-plugin-vue": "^6.2.2", 29 | "postcss-custom-media": "^7.0.8", 30 | "postcss-nested": "^4.2.3", 31 | "prettier": "^1.19.1", 32 | "vue-svg-loader": "^0.16.0", 33 | "vue-template-compiler": "^2.6.11" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-nested': {}, 4 | 'postcss-custom-media': { 5 | importFrom: [ 6 | { 7 | customMedia: { '--t': '(min-width: 980px)' } 8 | }, 9 | { 10 | customMedia: { '--d': '(min-width: 1270px)' } 11 | } 12 | ] 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/favicon.ico -------------------------------------------------------------------------------- /public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/android-chrome-maskable-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/android-chrome-maskable-512x512.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 25 | 26 | 31 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ademilter/instagram-web-vue/ced6d8ef8e0ea098fdb0deb6dad067b0972f2f50/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Avatar.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | 26 | 43 | -------------------------------------------------------------------------------- /src/components/Container.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 20 | -------------------------------------------------------------------------------- /src/components/CustomText.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | 26 | 37 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 60 | 61 | 133 | -------------------------------------------------------------------------------- /src/components/Post.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 83 | 84 | 129 | -------------------------------------------------------------------------------- /src/icons/comment.svg: -------------------------------------------------------------------------------- 1 | 3 | 7 | 8 | -------------------------------------------------------------------------------- /src/icons/direct-fill.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/icons/direct.svg: -------------------------------------------------------------------------------- 1 | 4 | 7 | 8 | -------------------------------------------------------------------------------- /src/icons/emoji.svg: -------------------------------------------------------------------------------- 1 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/icons/explore-fill.svg: -------------------------------------------------------------------------------- 1 | 3 | 7 | 8 | -------------------------------------------------------------------------------- /src/icons/explore.svg: -------------------------------------------------------------------------------- 1 | 3 | 7 | 8 | -------------------------------------------------------------------------------- /src/icons/home-fill.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/icons/home.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/icons/like-fill.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/icons/like.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/icons/more.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /src/icons/save-fill.svg: -------------------------------------------------------------------------------- 1 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/icons/save.svg: -------------------------------------------------------------------------------- 1 | 4 | 7 | 8 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import './registerServiceWorker' 4 | import router from './router' 5 | import store from './store' 6 | import './styles/app.css' 7 | 8 | Vue.config.productionTip = false 9 | 10 | new Vue({ 11 | router, 12 | store, 13 | render: h => h(App) 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker' 4 | 5 | if (process.env.NODE_ENV === 'production') { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | 'App is being served from cache by a service worker.\n' + 10 | 'For more details, visit https://goo.gl/AFskqB' 11 | ) 12 | }, 13 | registered() { 14 | console.log('Service worker has been registered.') 15 | }, 16 | cached() { 17 | console.log('Content has been cached for offline use.') 18 | }, 19 | updatefound() { 20 | console.log('New content is downloading.') 21 | }, 22 | updated() { 23 | console.log('New content is available; please refresh.') 24 | }, 25 | offline() { 26 | console.log( 27 | 'No internet connection found. App is running in offline mode.' 28 | ) 29 | }, 30 | error(error) { 31 | console.error('Error during service worker registration:', error) 32 | } 33 | }) 34 | } 35 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/home/index.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | }, 13 | { 14 | path: '/direct', 15 | name: 'Direct', 16 | component: () => import(/* webpackChunkName: "profile" */ '../views/direct') 17 | }, 18 | { 19 | path: '/explore', 20 | name: 'Explore', 21 | component: () => 22 | import(/* webpackChunkName: "profile" */ '../views/explore') 23 | }, 24 | { 25 | path: '/profile', 26 | name: 'Profile', 27 | component: () => 28 | import(/* webpackChunkName: "profile" */ '../views/profile'), 29 | children: [ 30 | { 31 | path: '', 32 | name: 'ProfilePost', 33 | component: () => 34 | import(/* webpackChunkName: "profile" */ '../views/profile/post') 35 | }, 36 | { 37 | path: 'igtv', 38 | name: 'ProfileIGTV', 39 | component: () => 40 | import(/* webpackChunkName: "profile" */ '../views/profile/igtv') 41 | }, 42 | { 43 | path: 'save', 44 | name: 'ProfileSave', 45 | component: () => 46 | import(/* webpackChunkName: "profile" */ '../views/profile/save') 47 | }, 48 | { 49 | path: 'tag', 50 | name: 'ProfileTag', 51 | component: () => 52 | import(/* webpackChunkName: "profile" */ '../views/profile/tag') 53 | } 54 | ] 55 | } 56 | ] 57 | 58 | const router = new VueRouter({ 59 | mode: 'history', 60 | base: process.env.BASE_URL, 61 | routes 62 | }) 63 | 64 | export default router 65 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: {}, 8 | mutations: {}, 9 | actions: {}, 10 | modules: {} 11 | }) 12 | -------------------------------------------------------------------------------- /src/styles/app.css: -------------------------------------------------------------------------------- 1 | @import 'variables.css'; 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | font-family: inherit; 8 | 9 | *, 10 | *:before, 11 | *:after { 12 | box-sizing: inherit; 13 | } 14 | } 15 | 16 | html { 17 | font-size: 14px; 18 | box-sizing: border-box; 19 | } 20 | 21 | body { 22 | font-size: 1rem; 23 | font-weight: normal; 24 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, 25 | Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 26 | padding-top: var(--header-height); 27 | } 28 | 29 | a { 30 | color: inherit; 31 | text-decoration: none; 32 | } 33 | 34 | button { 35 | background-color: transparent; 36 | cursor: pointer; 37 | } 38 | 39 | img { 40 | max-width: 100%; 41 | vertical-align: middle; 42 | } 43 | 44 | h1, 45 | h2, 46 | h3, 47 | h4, 48 | h5, 49 | h6, 50 | b, 51 | strong, 52 | label { 53 | font-weight: 600; 54 | } 55 | -------------------------------------------------------------------------------- /src/styles/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --header-height: 60px; 3 | 4 | --i1d: 38, 38, 38; 5 | --edc: 199, 199, 199; 6 | --f75: 38, 38, 38; 7 | --fe0: 0, 55, 107; 8 | --d87: 255, 255, 255; 9 | --b3f: 250, 250, 250; 10 | --bb2: 239, 239, 239; 11 | --f23: 255, 255, 255; 12 | --b38: 219, 219, 219; 13 | --b6a: 219, 219, 219; 14 | --ca6: 219, 219, 219; 15 | --cdd: 38, 38, 38; 16 | --e22: 199, 199, 199; 17 | --e62: 245, 251, 255; 18 | --b2f: 88, 195, 34; 19 | --c8c: 168, 168, 168; 20 | --ce3: 239, 239, 239; 21 | --jd9: 0, 0, 0; 22 | --j64: 54, 54, 54; 23 | --a97: 243, 243, 243; 24 | --d20: 38, 38, 38; 25 | 26 | --f52: 142, 142, 142; 27 | --h1d: 255, 255, 255; 28 | --de5: 255, 255, 255; 29 | --d69: 0, 149, 246; 30 | --b86: 88, 195, 34; 31 | --i30: 237, 73, 86; 32 | --d62: 255, 255, 255; 33 | --a72: 255, 255, 255; 34 | --ie3: 142, 142, 142; 35 | --c37: 237, 73, 86; 36 | --f24: 0, 149, 246; 37 | --jbb: 53, 121, 234; 38 | --eca: 255, 255, 255; 39 | --jb7: 0, 0, 0; 40 | --fa7: 224, 241, 255; 41 | --ba8: 168, 168, 168; 42 | --eac: 237, 73, 86; 43 | } 44 | -------------------------------------------------------------------------------- /src/views/direct/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/views/explore/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/views/home/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 34 | 35 | 56 | -------------------------------------------------------------------------------- /src/views/profile/igtv.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/views/profile/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/views/profile/post.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/views/profile/save.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/views/profile/tag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | chainWebpack: config => { 3 | const svgRule = config.module.rule('svg') 4 | 5 | svgRule.uses.clear() 6 | 7 | svgRule 8 | .use('babel-loader') 9 | .loader('babel-loader') 10 | .end() 11 | .use('vue-svg-loader') 12 | .loader('vue-svg-loader') 13 | } 14 | } 15 | --------------------------------------------------------------------------------