Web app to build,sell & buy paintings using Style transfer

The project as part of Module4:Code Institute .

Frameworks used including Django and PosgresSQL s3 and heroku.

User Stories for building the app :

Viewing and Navigation

Registration and User Stories

Searching

Purchasing and Checkout

Admin and Store Management

UX Design

• The Skeleton Layout:

  • A HomePage : Page explaining User needs and Web app Goals
  • Gallery: Page to display Paintings along with a Title , likes & No of Images uploaded with search and sorting options
  • View Painting: Page to display a single Paintings in a User chosen Frame and option to save the shopping bag
  • Create : A form page which allows users to create new paintings and allow users to either save it to the Gallery or simply view the painting
  • Shopping bag : A page which allows users to view theur shopping products
  • Subsuquent Edit and Delete Pages from the above
  • Sign In / Create Account : Allow users to sign-up or login in to the website information
  • Order History: Allow users to view their previous Order History
  • Payment Form : Which Allows users to pay for their items in the shopping bag

Initial wireframe used for developing a prototype :

DB Design

• Postgres SQL were designed as Follows :

  • Category Table which contains various categories for the paintings:

  • Painting Table which contains uploaded images ,created paintings , user choices etc regarding painitings:

  • Order Table which contains Info regarding order , delivery info etc .

  • User Profile table which contants info about user

A full schema of the table is as follows :

Design

The Web-Pages are designed to make it users to shop and create new paintings very accessible ( albeit for limited images sizes)

• Features Added:

  • Allow Users to purchase paintings with specific frames and sizes
  • Allow Users to create their own painting
  • Allow users to see how each painting is created by tiling uploaded style and content images , offering inspiration to create new paintings
  • Allow Users to create and then view the corresponding painting
  • Allows users to create and then sell it on the website
  • Allow users to sort and select categories of various paintings
  • Allow users to search for paintings they are intrested in
  • Allow users to have their own USer profiles with their Order History

• Features Not Implemented or nice to Haves :

  • Pagination
  • A comment section
  • A Rating section

Technologies :

Languages:

• HTML
• CSS
• Javascript
• Python (Django)
• PosgresSQL

Libraries /Frameworks:

• Jquery

External API's

• deepai.org

Code (Attribution) :

• Most of UI & BAck-end adapted from Code instute tutorials

• Code for moving carousel with buttons adapted from https://stackoverflow.com/questions/46249541/change-arrow-colors-in-bootstraps-carousel to customise carousel icons

• Frames created using code adapted from https://medium.com/@saishaddai/til-css-to-draw-a-frame-from-a-picture-2b0cfcf67c9a

Testing :

• Header & Navigation bar :

  • Href links to correct elements -checked and working
  • Nav Bar correcly alligned for Desktop Version only !
  • NAv bar side display added for Mobile Version

• Body :

  • Loaded Pages in (Safari,Firefox and Chrome)
  • Works well in Desktop versions + Mobile views
  • Forms render well in all views

• Full web page checks :

  • Tested all of the above on desktop (firefox and chrome) and mobile (iphone 6+)

• API requests :

  • Tested API calls on large and small Image sizes
  • Limited to 5000 calls in total

Bug Fixes (Open & Closed) :

Deployment

The Web pages was deployed through following :

• Setting up a heroku app with login.
• adding files through git remote
• made sure all keys + access keys were deleted and any accidentally uplodaded keys were rotated to new ones .All config variables were set to enviornment variables using Heroku set CLI and using a pylib dot env to read the env variables.
• Set up Postgres Database
• Install requirements .txt
• Build process through git remote heroku and push

Acknowledgements

Thanks for Code institute and their awesome tutor support team :)