Developer: Anthony Guillermo
Picturesque is a website developed for the Full Stack Frameworks with Django Milestone Project. The purpose of Picturesque is to showcase original posters made by the artistic team at Picturesque and give potential customers the ability to purchase these limited quantity exclusive posters. The site was designed to give the customers an easy and intuitive shopping experience. This site is specifically for customers who wish to purchase one of a kind original exclusive posters which give an insight into the artists mind.
-
Features - Navbar - Footer - Home Page - Poster Pages - Bag Page - Checkout Pages - FAQs - Our Story Page - Contact Us Page - Profile Page - Future Features
Picturesque target customers/users are:
- People who collect posters.
- People who want to purchase posters to display.
- People who are fans of art.
- People who want to purchase original one of a kind goods.
- People who want to purchase posters from a specific artist.
Customer/User goals are:
- Find a poster to display
- Look at unique poster designs
- Purchase a poster from a specific artist and or category.
- Browse the site easily, view posters and checkout securely.
- Purchase posters from a legitimate website.
How Picturesque meets these goals:
- The website has been specifically designed to make site navigation easy and enjoyable.
- The navigation of the site follows the convention of other online stores and is intuitive. Posters all clearly displayed and the information is easy to read and follow. Giving the site a professional feel.
- Picturesque posters can he searched by category, name, text search and artist to allow customers/users to easy find what they're looking for.
Picturesque business goals are:
- Gain more exposure for the artists at the company and the Picturesque brand as well.
- Provide customers/users with a professional site where they can browse and purchase posters securely and easily.
- Increase social media exposure by pointing customers to the company's social media accounts.
- Track and monitor sales data to help analyse and decide future decisions.
- Quick and secure payment methods to increase sales volume.
As a customer to the Picturesque website I expect/want/need:
| S.No | I want to be able to.... | So that I can... |
|---|---|---|
| 1. | View a list of posters | Choose poster/s to purchase |
| 2. | View individual poster and details | Identify the price, details and view larger image |
| 3. | View total of purchases | Avoid overspending |
| 4. | Select poster to purchase | Ensure correct poster is being purchased |
| 5. | View shopping basket | Verify and see if correct items are in the basket and see total cost |
| 6. | Sort by poster category | Find the correct poster I'm looking for as well as checking the rating Also sort poster by category name |
| 7. | Sort by more than one category at the same time | Search find posters among multiple categories if I'm unsure what to purchase |
| 8. | Search by poster name or artist | Find a certain poster for purchasing |
| 9. | See results of search and number of posters found | Check if stock is available |
| 10. | Adjust quantity in shopping basket | Can make changes before purchasing |
| 11. | Enter payment information easily | Quick and simple checkout |
| 12. | Feel that my personal information is kept private & confidential | Give personal information in order to make purchases |
| 13. | View order confirmation after a purchase | Check correct items were ordered |
| 14. | Receive an email confirmation after a purchase | Keep a copy of my purchase for my records |
As a user to the Picturesque website I expect/want/need:
| S.No | I want to be able to.... | So that I can... |
|---|---|---|
| 1. | Quickly register for an account | Have my own profile |
| 2. | Quickly log in and out | Access my account |
| 3. | Simple password recovery if I forget my password | Regain access to my profile |
| 4. | Receive email after account registration | Verify account creation was successful |
| 5. | Have a personalised profile | View my order history, payment confirmations and save payment preferences |
- The site was designed to have a professional clean look. To give users the impression that this is a well established company. Serious about their products and the processes they use to create their posters.
- Very few icons were used again to give the site a clean and polished feel. Icons were only used to highlight certain links.
- The colours were chosen to stand out yet at the time compliment each other, which is also one of the main beliefs of Picturesque.
- The dark blue was used as the footer to help contrast with the light colours and make the items in the footer stand out.
- Blue was used for the main titles and purple for the sub headings.
- Purple was used for main buttons and pink for secondary to give more importance to the main buttons. Both buttons have a pink hover colour change
- Curved buttons and pictures were mostly used to give a pleasing look to the eye.
- The navbar bar appears on every page
- There is a search by at the top where the customer can search by typing a search query and the name of the posters and the description will be searched for matching words.
- The all posters contains link where price, artist, a-z name can be searched.
- Categories contain filters for all eight categories of posters.
- About us contains links about the company such as 'About Us', 'FAQs' and 'Contact Us'
- The basket updated with an notification and the amount changes if there are items in the basket.
- Customers who have registered can access their account from the link.
- Footer has all the links for the user if they were to scroll to the bottom of the page.
- Link to categories and for more information on the company. As well as links to social media.
- The home page was designed to clear and simple, yet striking.
- Giving customers a more visual way to select categories as well as giving a sample of the best seller to encourage them to browse the site.
- The poster page loads in block of 4 on large screens, 2 on medium and 1 on mobile.
- The categories have link on the top and the sorting is on the right
- In the poster details page customers get an enhanced view of the poster and can select quantity and add to basket
- All the poster details can be viewed in the bag and the quantity can be changed and the items removed.
- Customers can fill out the information and payment details on the left and there is a summary of their order on the right.
- Buttons to go back and purchase are at the bottom of the page. As well as save thier info if they've registered.
- Once the payment is processed the customer can view a summary of their order. There is a button to shop again or new profile if user is logged in.
- Customers can fill out the for if they have query about and order or if a question is not in the faqs.
- Customers details are saved on the left if the save info box was ticked during checkout. The address can also be updated from the page.
- Order history is shown in a list but the order can be clicked to go back to the checkout summary for that order.
- Add more payment methods like Paypal.
- Have a link for the newsletter as this was unable to be completed.
- Cancel an order straight from the Profile view.
- Live chat as well for live feedback to customer queries.
- Option for customer to add frames to their order.
- Way for admin to add posters in browser
- Package tracking
- HTML
- CSS
- Javascript
- Python
- SQLite3
- JQuery
- Django
- Github
- Heroku
- AWS
- Google Fonts
- Balsamiq
- PostgreSQL
- Font Awesome
- Bootstrap
- Stripe
Picturesque testing: Testing.
- Create a new app in Heroku
- Go to resources tab add Heroku Postgres -Install the following apps using pip3 install
dj_database_url and psycopg2-binary
- Go to project level settings in Github. Import
dj_database_url
- In databases comment out default configuration then set the Postgres database as default.
# DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': BASE_DIR / 'db.sqlite3',
# }
# }
DATABASE = {
'default' = dj_database_url('<postgress config variable>')
}
- Connect to new Postgres data base and migrate the data along with any fixtures to populate the model.
- Create a super user to access the admin panel
- In settings.py set the Postgres database as default and if in development set to sqlite3
if 'DATABASE_URL' in os.environ:
DATABASES = {
'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
}
else:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
-Install pip3 install gunicorn to act as a webserver. Add a procfile to create a web dyno.
web: gunicorn boutique_ado.wsgi:application
- Disable collect static in Heroku as the app doesn't load static files
herkoku config:set DISABLE_COLLECTSTATIC=1
- All host name to allowed host in settings.py and set debug to development
DEBUG = 'DEVELOPMENT' in os.environ
ALLOWED_HOSTS = ['ckz8780-boutique-ado.herokuapp.com', 'localhost']
-Push code to Github and then in Heroku settings set to connect Github. This is to make the deploys automatic.
- Generate a random secret key and set SECRET_KEY in config vars. Then in setting.py remove the secret key and set it to look in the environment. Also set debug to be in development mode only.
SECRET_KEY = os.environ.get('SECRET_KEY', '')
DEBUG = 'DEVELOPMENT' in os.environ
- Using AWB s3 create bucket for the static files and allow public access and set the region.
- In bucket settings under properties turn on static website hosting. Fill in default values for documents.
- In permissions tab paste in a cors configuration
[
{
"AllowedHeaders": [
"Authorization"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
- Create an s3 bucker policy , allow all principles by using a * and service is get object. Copy and paste the ARN to add statement and generate a policy.
- Copy the policy and paste in the bucket policy editor. Add a /* after the bucket name to allow access to all resources in the bucket.
- Go to access control list under principals and enable public access.
- Create a user through IAM by first creating a group and creating a policy for the group, then create a user to add to the group to use the policy.
- User access and secret access key are generated and can be downloaded as a csv.
- In git hub pip3 install boto3 and django storages then freeze to requirements.txt
- Set up access to the bucket in settings.py and set USE_AWS to true in Heroku config vars.
if 'USE_AWS' in os.environ:
AWS_STORAGE_BUCKET_NAME = '<bucket name>'
AWS_S3_REGION_NAME = '<region>'
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
- Add the AWS access and secret access to the config vars in Heroku
- Create a file custom_storages to store images and static files.
from django.conf import settings
from storages.backends.s3boto3 import S3Boto3Storage
class StaticStorage(S3Boto3Storage):
location = settings.STATICFILES_LOCATION
class MediaStorage(S3Boto3Storage):
location = settings.MEDIAFILES_LOCATION
- Set the location of the storages in settings.py and override static media files
STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'
- Set the cache in settings.py to save the files
AWS_S3_OBJECT_PARAMETERS = {
'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
'CacheControl': 'max-age=94608000',
}
- In s3 bucket create a media folder alongside the static folder and upload all images for the site. Then grant public access to files.
- For Stripe to work in Heroku config vars save the STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY and paste the keys from Stripe.
- Set up web hooks by adding the Heroku <heroku app url/checkout/wh> for the app to web hooks endpoint to receive all events.
- Get web hooks signing secret and add to Heroku config vars under STRIP_WH_SECRET.
Click open app to check the app has been deployed.
- Project link: Picturesque
The code for this project was pushed to Github.
- Github link: Picturesque Github
The photos used in this project were taken from:
Ideas for this project were taken from:
Previous Code Institute Projects were also an inspiration and guidance for this project (Love Running, Resume, Whiskey Drop, Thorin & Company, Task Manager Application and Boutique Ado).