[{"data":1,"prerenderedAt":366},["ShallowReactive",2],{"content-query-sYyBYpj9YR":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tags":11,"image":18,"imageAlt":19,"body":20,"_type":359,"_id":360,"_source":361,"_file":362,"_stem":363,"_extension":364,"sitemap":365},"/project/gallery-app","project",false,"","Gallery App – Vue 2 + Axios + JSON Server","A lightweight image gallery app built with Vue 2 and Axios, using JSON Server as a fake backend for uploading and managing image data.","09.21.2021",[12,13,14,15,16,17],"vue","vue2","axios","json-server","image-upload","frontend","gallery-app-screenshot.webp","Galerie App Logo",{"type":21,"children":22,"toc":352},"root",[23,32,67,72,78,121,125,131,136,183,188,191,197,202,249,254,279,292,295,300,323,328,346],{"type":24,"tag":25,"props":26,"children":28},"element","h3",{"id":27},"gallery-app",[29],{"type":30,"value":31},"text","📸 Gallery App",{"type":24,"tag":33,"props":34,"children":35},"p",{},[36,38,44,46,51,53,58,60,65],{"type":30,"value":37},"This is a personal project I built to explore and reinforce concepts around ",{"type":24,"tag":39,"props":40,"children":41},"strong",{},[42],{"type":30,"value":43},"Vue 2",{"type":30,"value":45},", ",{"type":24,"tag":39,"props":47,"children":48},{},[49],{"type":30,"value":50},"API integration with Axios",{"type":30,"value":52},", and using ",{"type":24,"tag":39,"props":54,"children":55},{},[56],{"type":30,"value":57},"JSON Server",{"type":30,"value":59}," to simulate a backend. It's a minimal but functional ",{"type":24,"tag":39,"props":61,"children":62},{},[63],{"type":30,"value":64},"image gallery application",{"type":30,"value":66},", ideal for learning how to build CRUD-based frontends without setting up a full backend stack.",{"type":24,"tag":33,"props":68,"children":69},{},[70],{"type":30,"value":71},"The core idea was to create a clean, responsive interface that lets users upload images, view them in a gallery layout, and manage them easily. It’s also a good example of working with legacy frontend tech that’s still widely used in older codebases.",{"type":24,"tag":25,"props":73,"children":75},{"id":74},"technologies-used",[76],{"type":30,"value":77},"🔧 Technologies Used",{"type":24,"tag":79,"props":80,"children":81},"ul",{},[82,92,102,111],{"type":24,"tag":83,"props":84,"children":85},"li",{},[86,90],{"type":24,"tag":39,"props":87,"children":88},{},[89],{"type":30,"value":43},{"type":30,"value":91}," – JavaScript framework for building UI",{"type":24,"tag":83,"props":93,"children":94},{},[95,100],{"type":24,"tag":39,"props":96,"children":97},{},[98],{"type":30,"value":99},"Axios",{"type":30,"value":101}," – For handling all HTTP requests to the mock API",{"type":24,"tag":83,"props":103,"children":104},{},[105,109],{"type":24,"tag":39,"props":106,"children":107},{},[108],{"type":30,"value":57},{"type":30,"value":110}," – Lightweight mock REST API server using local JSON files",{"type":24,"tag":83,"props":112,"children":113},{},[114,119],{"type":24,"tag":39,"props":115,"children":116},{},[117],{"type":30,"value":118},"SCSS/CSS",{"type":30,"value":120}," – For simple, clean styling",{"type":24,"tag":122,"props":123,"children":124},"hr",{},[],{"type":24,"tag":25,"props":126,"children":128},{"id":127},"why-i-built-it",[129],{"type":30,"value":130},"🧠 Why I Built It",{"type":24,"tag":33,"props":132,"children":133},{},[134],{"type":30,"value":135},"While modern Vue 3 and frameworks like Nuxt 3 dominate the current frontend landscape, Vue 2 is still maintained and present in many real-world projects. I wanted a simple environment to practice:",{"type":24,"tag":79,"props":137,"children":138},{},[139,151,161,173],{"type":24,"tag":83,"props":140,"children":141},{},[142,144,149],{"type":30,"value":143},"Making ",{"type":24,"tag":39,"props":145,"children":146},{},[147],{"type":30,"value":148},"API calls",{"type":30,"value":150}," with Axios",{"type":24,"tag":83,"props":152,"children":153},{},[154,156],{"type":30,"value":155},"Handling ",{"type":24,"tag":39,"props":157,"children":158},{},[159],{"type":30,"value":160},"form submissions and file uploads",{"type":24,"tag":83,"props":162,"children":163},{},[164,166,171],{"type":30,"value":165},"Simulating ",{"type":24,"tag":39,"props":167,"children":168},{},[169],{"type":30,"value":170},"data persistence",{"type":30,"value":172}," with a fake backend",{"type":24,"tag":83,"props":174,"children":175},{},[176,178],{"type":30,"value":177},"Structuring a clean, ",{"type":24,"tag":39,"props":179,"children":180},{},[181],{"type":30,"value":182},"component-based SPA",{"type":24,"tag":33,"props":184,"children":185},{},[186],{"type":30,"value":187},"The result is this Gallery App — quick to spin up, easy to extend, and great for prototyping.",{"type":24,"tag":122,"props":189,"children":190},{},[],{"type":24,"tag":25,"props":192,"children":194},{"id":193},"getting-started",[195],{"type":30,"value":196},"🚀 Getting Started",{"type":24,"tag":33,"props":198,"children":199},{},[200],{"type":30,"value":201},"To start the project locally:",{"type":24,"tag":203,"props":204,"children":208},"pre",{"className":205,"code":206,"language":207,"meta":7,"style":7},"language-bash shiki shiki-themes vitesse-dark","npm install\nnpm run serve\n","bash",[209],{"type":24,"tag":210,"props":211,"children":212},"code",{"__ignoreMap":7},[213,231],{"type":24,"tag":214,"props":215,"children":218},"span",{"class":216,"line":217},"line",1,[219,225],{"type":24,"tag":214,"props":220,"children":222},{"style":221},"--shiki-default:#80A665",[223],{"type":30,"value":224},"npm",{"type":24,"tag":214,"props":226,"children":228},{"style":227},"--shiki-default:#C98A7D",[229],{"type":30,"value":230}," install\n",{"type":24,"tag":214,"props":232,"children":234},{"class":216,"line":233},2,[235,239,244],{"type":24,"tag":214,"props":236,"children":237},{"style":221},[238],{"type":30,"value":224},{"type":24,"tag":214,"props":240,"children":241},{"style":227},[242],{"type":30,"value":243}," run",{"type":24,"tag":214,"props":245,"children":246},{"style":227},[247],{"type":30,"value":248}," serve\n",{"type":24,"tag":33,"props":250,"children":251},{},[252],{"type":30,"value":253},"In a separate terminal, run:",{"type":24,"tag":203,"props":255,"children":257},{"className":205,"code":256,"language":207,"meta":7,"style":7},"json-server --watch db.json\n",[258],{"type":24,"tag":210,"props":259,"children":260},{"__ignoreMap":7},[261],{"type":24,"tag":214,"props":262,"children":263},{"class":216,"line":217},[264,268,274],{"type":24,"tag":214,"props":265,"children":266},{"style":221},[267],{"type":30,"value":15},{"type":24,"tag":214,"props":269,"children":271},{"style":270},"--shiki-default:#C99076",[272],{"type":30,"value":273}," --watch",{"type":24,"tag":214,"props":275,"children":276},{"style":227},[277],{"type":30,"value":278}," db.json\n",{"type":24,"tag":33,"props":280,"children":281},{},[282,284,290],{"type":30,"value":283},"This will start the fake backend at ",{"type":24,"tag":210,"props":285,"children":287},{"className":286},[],[288],{"type":30,"value":289},"http://localhost:3000",{"type":30,"value":291},".",{"type":24,"tag":122,"props":293,"children":294},{},[],{"type":24,"tag":33,"props":296,"children":297},{},[298],{"type":30,"value":299},"✅ Features:",{"type":24,"tag":79,"props":301,"children":302},{},[303,308,313,318],{"type":24,"tag":83,"props":304,"children":305},{},[306],{"type":30,"value":307},"Upload and list images",{"type":24,"tag":83,"props":309,"children":310},{},[311],{"type":30,"value":312},"Basic gallery layout",{"type":24,"tag":83,"props":314,"children":315},{},[316],{"type":30,"value":317},"Uses mock data with JSON Server",{"type":24,"tag":83,"props":319,"children":320},{},[321],{"type":30,"value":322},"Built as a single-page app (SPA)",{"type":24,"tag":33,"props":324,"children":325},{},[326],{"type":30,"value":327},"This project is useful for learning how frontend apps interact with APIs and how local JSON servers can simulate a full backend for testing.",{"type":24,"tag":329,"props":330,"children":331},"blockquote",{},[332],{"type":24,"tag":33,"props":333,"children":334},{},[335,337],{"type":30,"value":336},"Want to try it or contribute? ",{"type":24,"tag":338,"props":339,"children":343},"a",{"href":340,"rel":341},"https://github.com/Abbasmoe/gallery-app",[342],"nofollow",[344],{"type":30,"value":345},"Check it out on GitHub",{"type":24,"tag":347,"props":348,"children":349},"style",{},[350],{"type":30,"value":351},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":233,"depth":233,"links":353},[354,356,357,358],{"id":27,"depth":355,"text":31},3,{"id":74,"depth":355,"text":77},{"id":127,"depth":355,"text":130},{"id":193,"depth":355,"text":196},"markdown","content:project:gallery-app.md","content","project/gallery-app.md","project/gallery-app","md",{"loc":4},1766592751858]