├── .gitignore
├── .gitpod.yml
├── README.md
├── _config.yml
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── overview.jpg
    ├── components
    │   └── Pictures.vue
    ├── main.js
    └── router
    │   └── index.js
├── static
    └── .gitkeep
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | .cache/
63 | dist/


--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
 1 | # This configuration file was automatically generated by Gitpod.
 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
 3 | # and commit this file to your remote git repository to share the goodness with others.
 4 | 
 5 | tasks:
 6 |   - init: yarn install && yarn run build
 7 |     command: yarn run start
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
 2 | # vue-unsplash
 3 | 
 4 | Vue Unsplash is photo search webapp made using Vue.js which uses Unsplash JSON APIs for photo search. Unsplash [https://unsplash.com](https://unsplash.com/) the most powerful photo engine in the world. Trying to make the unplash like UI  and add functionality as much as possible
 5 | 
 6 | <div align="center">
 7 |   <image src="src/assets/overview.jpg">
 8 | </div>
 9 | 
10 | 
11 | ## Prerequisites
12 | 
13 | You are required to have [Node.js](https://nodejs.org/) installed to run the app locally.
14 | 
15 | ## Getting Started
16 | 
17 | 
18 | ## Creating a developer account
19 | 
20 | To access the Unsplash API, first [register](https://unsplash.com/developers) as a developer.
21 | 
22 | 
23 | ## Registering your application
24 | 
25 | Once your account has been registered for the API, log in -> go to the Developers page -> Go to "Your Applications"->  "New Application" and fill in the required details.
26 | 
27 | 
28 | 
29 | SignUp or Login in [Unsplash](https://unsplash.com). Go to API/devlopers ->  Documentation. Then Register your app to get the API key and secret.
30 | 
31 | ## API Usage
32 | 
33 | Update your API_KEY and API_SECRET in the [main.js](https://github.com/junipdewan/vue-unsplash/blob/master/src/main.js)
34 | 
35 | ```
36 |  const unsplash = new Unsplash({
37 |         applicationId: "API_KEY",
38 |         secret: "API_SECRET",
39 |         callbackUrl: "{CALLBACK_URL}"
40 |     });
41 | ```
42 | 
43 | 
44 | 
45 | ## Usage
46 | 
47 | ```sh
48 | # install all dependency
49 | ~/ npm install
50 | 
51 | # run
52 | ~/ npm run dev 
53 | ```
54 | 
55 | ## Contribution
56 | 
57 | The development of the App is still in progress. Only some part is implemented. You can help with 
58 | code contribution to add more functionality in the App.
59 | 
60 | ## 
61 | 
62 | Checkout another repo [React-Unsplash](https://github.com/junipdewan/react-unsplash). A clone app made using React and Unsplash JSON API
63 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-tactile


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-unplush</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script src="./src/main.js"></script>
11 |     <!-- built files will be auto injected -->
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-unplush",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Junip",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "parcel index.html",
 9 |     "start": "npm run dev",
10 |     "lint": "eslint --ext .js,.vue src",
11 |     "build": "node build/build.js"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.21.1",
15 |     "babel-preset-vue": "^2.0.2",
16 |     "bootstrap-vue": "^2.17.3",
17 |     "lodash": "^4.17.21",
18 |     "unsplash-js": "^5.0.0",
19 |     "vue": "^2.6.12",
20 |     "vue-hot-reload-api": "^2.3.4",
21 |     "vue-router": "^3.4.5"
22 |   },
23 |   "devDependencies": {
24 |     "@babel/core": "^7.11.6",
25 |     "@vue/component-compiler-utils": "^3.2.0",
26 |     "parcel-bundler": "^1.12.4",
27 |     "vue-template-compiler": "^2.6.12"
28 |   },
29 |   "engines": {
30 |     "node": ">= 6.0.0",
31 |     "npm": ">= 3.0.0"
32 |   },
33 |   "alias": {
34 |     "vue": "./node_modules/vue/dist/vue.common.js"
35 |   },
36 |   "browserslist": [
37 |     "> 1%",
38 |     "last 2 versions",
39 |     "not ie <= 8"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 
13 | <style>
14 | #app {
15 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   margin-top: 60px;
20 |   background-color: #21D4FD;
21 |   background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
22 | 
23 | }
24 | </style>
25 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junip/vue-unsplash/90d2c24d83a49108e49c08f3fc43838ca6f48059/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/overview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junip/vue-unsplash/90d2c24d83a49108e49c08f3fc43838ca6f48059/src/assets/overview.jpg


--------------------------------------------------------------------------------
/src/components/Pictures.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="row position-relative" :style="backgroundStyle">
  3 |         <div class="col-md-6 search-input">
  4 |           <div class="row mt-5">
  5 |             <div class="col-md-10 pl-5">
  6 |             <b-input
  7 |             placeholder="Search for photos here"
  8 |             v-model="search"
  9 |             @input="waitSearch">
 10 |             </b-input>
 11 |             </div>
 12 |             <div class="col-md-2">
 13 |               <a :href="download_url" class="image-download">
 14 |                 <b-button variant="success" size="md" class="float-right">Download </b-button>
 15 |               </a>
 16 |             </div>
 17 |           </div>
 18 |         </div>
 19 |         <div class="col-md-6">
 20 |           <ul class="list-unstyled">
 21 |             <li v-for="photo in photos" :key="photo.id">
 22 |               <img class="image-list" height="200" width="200" :src="photo.urls.thumb" alt="img" @click="applyPhoto(photo)" />
 23 |             </li>
 24 |           </ul>
 25 |         </div>
 26 |     </div>
 27 | 
 28 | </template>
 29 | 
 30 | <script>
 31 | 
 32 | import axios from 'axios';
 33 | import _ from 'lodash'
 34 | export default {
 35 | 
 36 |   name: 'HelloWorld',
 37 |   data () {
 38 |     return {
 39 |       searchKeywords: ['apple', 'love', 'nature', 'waterfall', 'macbook'],
 40 |       photos: [],
 41 |       search: null,
 42 |       photo_url: null,
 43 |       download_url: null,
 44 |       msg: 'Welcome to Your Vue.js App'
 45 |     }
 46 |   },
 47 | 
 48 |   created() {
 49 |     this.getPhoto()
 50 | 
 51 |   },
 52 | 
 53 | 
 54 |   computed: {
 55 |       backgroundStyle(){
 56 | 
 57 |         let style = {}
 58 | 
 59 |         if(this.photo_url){
 60 |           style.background = `no-repeat center/100% 100% url(${this.photo_url})`;
 61 |         } else {
 62 |          // style.background = `#cee2b5`;
 63 |         }
 64 | 
 65 | 
 66 |         return style
 67 |       }
 68 |   },
 69 | 
 70 |   methods: {
 71 | 
 72 |     getPhoto() {
 73 |       // get the app id using the global variable of unsplash
 74 |       let appid = this.$unsplash._applicationId;
 75 |       let keywords = this.searchKeywords;
 76 | 
 77 |       //to get random keyboard during search whne user opens the page
 78 |       let query = keywords[Math.floor(Math.random()*keywords.length)];
 79 | 
 80 |       //this.$axios.get(`https://api.unsplash.com/photos?client_id=${appid}`)
 81 |        this.$axios.get(`https://api.unsplash.com/search/photos?page=1&per_page=10&query=${query}&client_id=${appid}`)
 82 |       .then(response => {
 83 |         // JSON responses are automatically parsed.
 84 |         this.photos = response.data.results
 85 | 
 86 |       })
 87 |       .catch(e => {
 88 |         console.log(e)
 89 |       })
 90 | 
 91 | 
 92 |     },
 93 | 
 94 |     searchPhoto(){
 95 |       let appid = this.$unsplash._applicationId;
 96 |       let query  = this.search
 97 |       this.$axios.get(`https://api.unsplash.com/search/photos?page=1&per_page=10&query=${query}&client_id=${appid}`)
 98 |       .then(response => {
 99 |         // JSON responses are automatically parsed.
100 |         this.photos = response.data.results
101 |       })
102 |       .catch(e => {
103 |         console.log(e)
104 |       })
105 |     },
106 | 
107 |     getRandom(){
108 |       this.$axios.get('https://source.unsplash.com/random')
109 |       .then(response =>{
110 | 
111 |       })
112 |     },
113 | 
114 | 
115 |     applyPhoto(photo){
116 |       this.photo_url = photo.urls.regular
117 |       this.download_url = photo.links.download + '?force=true'
118 |     },
119 | 
120 |     waitSearch: _.debounce(
121 |                 function () {
122 |                      this.searchPhoto();
123 |                 },1000)
124 |   }
125 |   }
126 | </script>
127 | 
128 | <!-- Add "scoped" attribute to limit CSS to this component only -->
129 | <style scoped>
130 | h1, h2 {
131 |   font-weight: normal;
132 | }
133 | ul {
134 |   list-style-type: none;
135 |   padding: 0;
136 | }
137 | li {
138 |   display: inline;
139 |   margin: 0 10px;
140 | }
141 | a {
142 |   color: #42b983;
143 | }
144 | .image-list{
145 |   margin-top: 12px
146 | }
147 | /* .search-input{
148 |   display: inline;
149 | } */
150 | </style>
151 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | 
 5 | import BootstrapVue from 'bootstrap-vue'
 6 | import Unsplash from 'unsplash-js';
 7 | import axios from 'axios';
 8 | 
 9 | 
10 | 
11 | Vue.config.productionTip = false
12 | Vue.use(BootstrapVue)
13 | 
14 | import 'bootstrap/dist/css/bootstrap.css'
15 | import 'bootstrap-vue/dist/bootstrap-vue.css'
16 | 
17 | 
18 | 
19 | const unsplash = new Unsplash({
20 |   applicationId: "",
21 |   secret: "",
22 |   callbackUrl: "{CALLBACK_URL}"
23 | });
24 | 
25 | Vue.prototype.$unsplash = unsplash;
26 | Vue.prototype.$axios = axios;
27 | 
28 | 
29 | 
30 | /* eslint-disable no-new */
31 | new Vue({
32 |   el: '#app',
33 |   router,
34 |   render: h => h(App)
35 | })
36 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import HelloWorld from '../components/Pictures'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'HelloWorld',
12 |       component: HelloWorld
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junip/vue-unsplash/90d2c24d83a49108e49c08f3fc43838ca6f48059/static/.gitkeep


--------------------------------------------------------------------------------