├── .browserslistrc ├── babel.config.js ├── src ├── shims-vue.d.ts ├── main.ts ├── shims-tsx.d.ts ├── views │ ├── Explore.vue │ └── Home.vue ├── components │ ├── Footer.vue │ ├── Card.vue │ ├── Navbar.vue │ ├── Main.vue │ └── Modal.vue ├── router │ └── index.ts ├── App.vue ├── store │ └── index.ts └── assets │ └── web_dev.svg ├── vue.config.js ├── .editorconfig ├── .gitignore ├── README.md ├── .eslintrc.js ├── tsconfig.json ├── public └── index.html └── package.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | 4 | export default Vue; 5 | } 6 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' 3 | ? '/apiland/' 4 | : '/', 5 | }; 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import router from './router'; 4 | import store from './store'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: (h) => h(App), 12 | }).$mount('#app'); 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/views/Explore.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # API Land 2 | An interative app to explore plublic APIs which you can use to build side projects. Live demo at https://faraazahmad.github.io/apiland 3 | 4 | ## Project setup 5 | ``` 6 | yarn install 7 | ``` 8 | 9 | ### Compiles and hot-reloads for development 10 | ``` 11 | yarn serve 12 | ``` 13 | 14 | ### Compiles and minifies for production 15 | ``` 16 | yarn build 17 | ``` 18 | 19 | ### Lints and fixes files 20 | ``` 21 | yarn lint 22 | ``` 23 | 24 | ### Customize configuration 25 | See [Configuration Reference](https://cli.vuejs.org/config/). 26 | -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter, { RouteConfig } from 'vue-router'; 3 | import Home from '@/views/Home.vue'; 4 | 5 | Vue.use(VueRouter); 6 | 7 | const routes: Array = [ 8 | { 9 | path: '/explore', 10 | name: 'Explore', 11 | component: () => import('../views/Explore.vue'), 12 | }, 13 | { 14 | path: '/', 15 | name: 'Home', 16 | // route level code-splitting 17 | // this generates a separate chunk (about.[hash].js) for this route 18 | // which is lazy-loaded when the route is visited. 19 | component: Home, 20 | }, 21 | ]; 22 | 23 | const router = new VueRouter({ 24 | routes, 25 | scrollBehavior(to, from, savedPosition) { 26 | return { x: 0, y: 0 }; 27 | }, 28 | }); 29 | 30 | export default router; 31 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/airbnb', 9 | '@vue/typescript/recommended', 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 2020, 13 | }, 14 | rules: { 15 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 17 | 'class-methods-use-this': ['error', { 18 | exceptMethods: [ 19 | // vue lifecycle methods 20 | 'beforeCreate', 21 | 'created', 22 | 'beforeMount', 23 | 'mounted', 24 | 'beforeUpdate', 25 | 'updated', 26 | 'activated', 27 | 'deactivated', 28 | 'beforeDestroy', 29 | 'destroyed', 30 | 'errorCaptured', 31 | ], 32 | }], 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "sourceMap": true, 14 | "baseUrl": ".", 15 | "types": [ 16 | "webpack-env" 17 | ], 18 | "paths": { 19 | "@/*": [ 20 | "src/*" 21 | ] 22 | }, 23 | "lib": [ 24 | "esnext", 25 | "dom", 26 | "dom.iterable", 27 | "scripthost" 28 | ] 29 | }, 30 | "include": [ 31 | "src/**/*.ts", 32 | "src/**/*.tsx", 33 | "src/**/*.vue", 34 | "tests/**/*.ts", 35 | "tests/**/*.tsx" 36 | ], 37 | "exclude": [ 38 | "node_modules" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | API Land 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/Card.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 35 | 36 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "apiland", 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 | "deploy": "yarn build; push-dir --dir=dist --branch=gh-pages --cleanup" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.20.0", 13 | "core-js": "^3.6.5", 14 | "push-dir": "^0.4.1", 15 | "vue": "^2.6.11", 16 | "vue-class-component": "^7.2.3", 17 | "vue-property-decorator": "^8.4.2", 18 | "vue-router": "^3.2.0", 19 | "vuex": "^3.4.0" 20 | }, 21 | "devDependencies": { 22 | "@typescript-eslint/eslint-plugin": "^2.33.0", 23 | "@typescript-eslint/parser": "^2.33.0", 24 | "@vue/cli-plugin-babel": "~4.5.0", 25 | "@vue/cli-plugin-eslint": "~4.5.0", 26 | "@vue/cli-plugin-router": "~4.5.0", 27 | "@vue/cli-plugin-typescript": "~4.5.0", 28 | "@vue/cli-plugin-vuex": "~4.5.0", 29 | "@vue/cli-service": "~4.5.0", 30 | "@vue/eslint-config-airbnb": "^5.0.2", 31 | "@vue/eslint-config-typescript": "^5.0.2", 32 | "eslint": "^6.7.2", 33 | "eslint-plugin-import": "^2.20.2", 34 | "eslint-plugin-vue": "^6.2.2", 35 | "typescript": "~3.9.3", 36 | "vue-template-compiler": "^2.6.11" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 28 | 29 | 80 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import Axios from 'axios'; 4 | 5 | Vue.use(Vuex); 6 | 7 | export default new Vuex.Store({ 8 | state: { 9 | entries: [], 10 | categories: [], 11 | filterTags: ['Animals', 'Development'], 12 | baseUrl: 'https://api.publicapis.org', 13 | }, 14 | getters: {}, 15 | mutations: { 16 | syncEntriesFromApi(state, entries) { 17 | state.entries = entries; 18 | }, 19 | syncCategoriesFromApi(state, categories) { 20 | state.categories = categories; 21 | }, 22 | toggleCategory(state, category: string) { 23 | if (state.filterTags.includes(category)) { 24 | state.filterTags.splice(state.filterTags.indexOf(category), 1); 25 | } else { 26 | state.filterTags.push(category); 27 | } 28 | }, 29 | }, 30 | actions: { 31 | syncEntriesFromApi(context) { 32 | Axios.get(`${context.state.baseUrl}/entries`) 33 | .then((response) => { 34 | context.commit('syncEntriesFromApi', response.data.entries); 35 | }) 36 | .catch((error) => { 37 | // eslint-disable-next-line no-console 38 | console.error(error.message); 39 | }); 40 | }, 41 | syncCategoriesFromApi(context) { 42 | Axios.get(`${context.state.baseUrl}/categories`) 43 | .then((response) => { 44 | context.commit('syncCategoriesFromApi', response.data); 45 | }) 46 | .catch((error) => { 47 | // eslint-disable-next-line no-console 48 | console.error(error); 49 | }); 50 | }, 51 | toggleCategory(context, category) { 52 | context.commit('toggleCategory', category); 53 | }, 54 | }, 55 | modules: { 56 | }, 57 | }); 58 | -------------------------------------------------------------------------------- /src/components/Main.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 75 | -------------------------------------------------------------------------------- /src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 66 | 67 | 70 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 91 | -------------------------------------------------------------------------------- /src/assets/web_dev.svg: -------------------------------------------------------------------------------- 1 | web_developer --------------------------------------------------------------------------------