ad-preview-tool v0.1.0

About the application

The following application named, DeltaX - Ad Preview Tool , is a tool that can be used for generating mock advertisemets so as to mimic the look and feel of an ad on multiple advertisement channels. The currently supported channels are Facebook and Instagram.

Component Structure

├── public
├   ├── index.html
├── src
├   ├── api
├   ├   ├──── index.js
├   ├── assets
├   ├── modules
├   ├   ├──── channels
├   ├   ├   ├──── sidebar.vue
├   ├   ├──── templateEditor
├   ├   ├   ├──── components
├   ├   ├   ├   ├──── Facebook_CarouselForm.vue 
├   ├   ├   ├   ├──── Facebook_SingleForm.vue 
├   ├   ├   ├   ├──── Instagram_FeedCarouselForm.vue 
├   ├   ├   ├   ├──── Instagram_FeedSinglelForm.vue 
├   ├   ├   ├   ├──── Instagram_StoryCarouselForm.vue
├   ├   ├   ├   ├──── Instagram_StorySingleForm.vue  
├   ├   ├   ├──── constants
├   ├   ├   ├   ├──── FacebookAdForm.vue
├   ├   ├   ├   ├──── InstagramAdForm.vue
├   ├   ├──── adPreview
├   ├   ├   ├──── components
├   ├   ├   ├   ├──── Facebook_DesktopCarousel.vue
├   ├   ├   ├   ├──── Facebook_DesktopSingle.vue
├   ├   ├   ├   ├──── Facebook_MobileCarousel.vue
├   ├   ├   ├   ├──── Facebook_MobileSingle.vue
├   ├   ├   ├   ├──── Instagram_FeedCarousel.vue
├   ├   ├   ├   ├──── Instagram_FeedSigle.vue
├   ├   ├   ├   ├──── Instagram_StoryCarousel.vue
├   ├   ├   ├   ├──── Instagram_StorySingle.vue
├   ├   ├   ├──── contants
├   ├   ├   ├   ├──── createSimilar.vue
├   ├   ├   ├   ├──── exportAssets.vue
├   ├   ├   ├   ├──── FacebookAdPreview.vue
├   ├   ├   ├   ├──── InstagramAdPreview.vue
├   ├   ├   ├──── SUPPORT
├   ├   ├   ├   ├──── Facebook_carouselCardSupport.vue
├   ├── helpers
├   ├   ├──── base64toBlob.js
├   ├   ├──── mediaUpload.js
├   ├── services
├   ├   ├──── previewData.js
├   ├── store
├   ├   ├──── index.js
├   ├   ├──── modules
├   ├   ├   ├──── AdRendering.js
├   ├   ├   ├──── FacebookStore.js
├   ├   ├   ├──── Gallery.js
├   ├   ├   ├──── InstagramStore.js
├   ├── main.js
├   ├── App.vue 
├── .eslintrc..js
├── vue.config.js
├── README.md 
├── babel.config.js
├── package-lock.json
├── package.json
├── .gitignore

Project setup

npm install

Run development mode

npm run serve

Run backend database

cd backend

json-server --watch db.json

Compiles and minifies for production

npm run build

IMPORTANT BUG FIXES

1. Generate preview failed without any custom image, due to failure to search for the base64 of the stock image. Fixed by added a try catch block in previewData.js service