Live website | GitHub Repository
- Introduction
- UX
- Marketing
- Features
- Technologies Used
- Security and Authentication
- Validation and Testing
- Bugs
- Future Enhancements
- Deployment
- Credits
MacArt Fine Art Photo Prints is the Minimum Viable Product (MVP) for a B2C e-commerce website. It represents the fifth and final project of the Code Institute diploma in Full Stack Software Development.
**Live website | GitHub Repository**
MacArt Fine Art Photo Prints is a fictional e-commerce project crafted with Django, Python, JavaScript, and Bootstrap 4. The website is hosted on Heroku, utilises Amazon S3 for cloud storage, and incorporates Stripe for payment gateways. It acts as an online marketplace for a fine art photography gallery, primarily vending prints alongside publications that showcase their artists' work.
The website incorporates role-based permissions, allowing varied user interactions with a core dataset. It also boasts user authentication, email validation, and comprehensive CRUD (Create, Read, Update, Delete) functionalities.
Caution: The payment system relies on Stripe. Bear in mind that this site is designed solely for educational objectives. Avoid inputting real credit/debit card details.
For testing, consider using a Stripe test card number like
4242 4242 4242 4242, a future expiry date, e.g.,04/24, and any three-digit CVC.
The primary objective is to give users a simple, seamless shopping experience while putting artists and their masterpieces in the limelight.
At its core, the application predominantly is focused on business-to-consumer demands.
The ideal user for MacArt Fine Art Photo Prints spans all age brackets but shares a common interest: a penchant for top-notch photographic prints. Whether it's to adorn their living space, spruce up their workspace, or as a thoughtful gift, our prints cater to their artistic inclinations.
For more details of user stories pertinent to this project, please refer to this link.
Users will:
- Browse, get details, and effectuate purchases swiftly and easily.
- Encounter a responsive design, ensuring a seamless experience across all gadgets.
- Register an account, update profile details, and retrieve their password should they forget it.
Users anticipate:
- A user-friendly e-commerce portal with a hassle-free purchasing process.
- A visually pleasing website regardless of the device.
- A website with good performance and minimal glitches.
User stories were categorised into 'Must Have', 'Should Have', 'Could Have', and 'Won't Have' to ensure a strategic implementation approach. The project was orchestrated using GitHub Projects and adhered to an Agile methodology. You can view the project's Kanban Board here.
Given that the primary offerings are fine art photographs, the website's design aims to be unobtrusive, ensuring the art remains the focal point. The colour palette predominantly revolves around white, black, and varying shades of grey. However, occasional bright orange details are interspersed, both to maintain brand consistency and to inject a touch of creativity.
-
Aboreto-Regular was selected for the logo, price tags, and most headings. This font combines the contemporary appeal of a sans-serif with the graceful curves reminiscent of an elegant serif typeface.
-
Barlow is the designated font for body text, menus, and other miscellaneous sections, providing readability while complementing the design aesthetics.
MacArt Fine Art Photo Prints hinges its marketing strategy on three pivotal pillars:
- Social Media Presence: In a realm underpinned by photography, a robust social media presence is non-negotiable. Presented below is a mock-up of our envisioned Facebook page.
Facebook Mockup
-
Email Marketing: Enthusiasts can subscribe to our newsletter, orchestrated via MailChimp, by completing the form situated in the website's footer section.
-
SEO: Comprehensive keyword research, spearheaded using platforms such as Wordtracker.com, yielded a robust set of search terms to augment our SEO footprint:
- fine art photos, street photography, architectural photography, landscape photography, prints, wall art, home decor, interior decoration, photographers, and artists. Dedicated efforts have been made to weave these key terms seamlessly into the website's metadata, headers, and product narratives, thereby bolstering search engine prominence.
Supplementing our SEO efforts, AnswerThePublic.com serves as an invaluable tool. It offers insights into commonly posed queries on the web, pivoting around specific keywords. For instance, a prevalent question, "What is fine art photography?" finds its comprehensive response right on our site's landing page.
Answer the public
The primary point of entry for visitors, the homepage sets the tone for MacArt's brand followed by a brief introduction and an invitation to browse the gallery.
At the bottom of the page, there are logos of associations to which the artists could be contributors.
This section is accessible from the menu About Us.
Home Page
- Logo
- Free Delivery Banner
- Search bar
- My Account
- Product and site navigation
- Shopping Bag
Header
Accessible to all users, with exclusive content for logged-in members. Features include:
- Registration/Login/Logout options
- Profile link for logged-in users
- Product Management and Artist Management for admin users
My Account
- Answers to common questions to assist users and boost SEO.
- Admin capability to add, edit, or delete entries.
- Display the date of the last update.
FAQ Page
When an admin user is logged in, there's a button at the top of the page to add new entries and, under each entry, there are links to edit or delete the entries.
FAQ Add a New Entry
FAQ Management
-
Contact page with contact information, map with localisation and a contact form.
-
Contact form where the user can send an message to the site and see a confirmation on the screen after the message was sent.
Contact Page and Form
Users can create an account, sign in, and sign out.
Registration triggers a confirmation email.
Password recovery is available for registered users.
Logged-in users can update shipping info and view past purchases.
- Displays MacArt product listings with sorting and filtering.
- Products can be added to the cart or viewed in detail.
- Admin users have edit and delete options.
Products and Product Management
Highlights include:
- Product information, including name, description, rating, and price.
- Size options and a size guide link to a collapsable panel with a size table.
- Artist attribution and link to their profile.
- Admin-specific edit and delete options.
Product Details
- Users can add products for purchase.
- Notifications show product addition and cart total.
- Allows quantity adjustments and item removal.
- Directs users to secure checkout.
Shopping Bag
Finalises purchases by:
- Collecting shipping and payment details securely via Stripe.
- Offering profile updates with shipping details for returning users.
- The user will receive an email confirming the order.
Check Out Page
- A page containing a list of artists, the user is directed to a page displaying the artist's profile, links to their social media and external website, and all their artworks existing on the site.
Artists Page
- Contains a biography of the artist and links to their social media and external site.
- Lists the artist's works existing at MacArt's site
- Product pages link back to the artist's profile.
- A site admin can add a new artist in the Artist Management page.
- To edit or remove an artist, the site admin needs to access the Django Project admin section.
Artists Profile Page
Interactive messages provide feedback on user actions and can be closed by users.
Exemple of feedback message
New registrations receive a verification email.
Purchases trigger a detailed order confirmation email.
Located in the navigation bar, this feature scans product titles, descriptions, categories, and for user queries.
Exemple of a search
Links to key site sections, a newsletter subscription form, and contact details.
Footer
The site is equipped with handlers for 403, 404, and 500 errors
Error Handler
Admins can manage products and FAQs directly from the site.
This project includes an administration area used by website administrators or staff members who can manage the products, categories, formsts artists, and FAQ entries.
Django Administration
- Django - A Python web framework.
- Bootstrap - Open-source framework used for front-end development.
- HTML5 - A markup language that describes the structure of the web page.
- CSS3 - Provides the styling for the website.
- JavaScript - Provides interactive elements of the website
- Python - An interpreted, object-oriented language with dynamic semantics.
- Gitpod - Used to create and edit the website.
- GitHub - Used to host the repository.
- Google Chrome DevTools - Used to test the responsiveness of web pages and debug.
- Google Fonts - For the fonts used in this project.
- Heroku - Used to deploy the website.
- PEP8 Validation - Used to validate Python code.
- HTML Validation - Used to validate HTML code.
- CSS Validation - Used to validate CSS code.
- JSHint Validation - Used to validate JavaScript code.
- Mailchimp - A mail service email marketing and automation service.
# Security and Authentication
A series of measures have been implemented to safeguard user data and maintain the integrity of the website. These measures include:
- The utilisation of an
env.pyfile for the secure storage of crucial variables required to access protected services, such as the PostgreSQL Database. - Incorporation of a
.gitignorefile to exclude theenv.pyfile from being committed to the production codebase, thus maintaining the confidentiality of sensitive information. - Storage of these essential variables in the Configuration Variables of Heroku, facilitating secure synchronization between GitPod and Heroku.
- Enforcement of Cross-Site Request Forgery (CSRF) tokens across all HTML forms, bolstering the website's defences against unauthorised commands that could be transmitted from a user's browser while they are authenticated.
- Integration of Django’s built-in user authentication system for critical areas of the site, ensuring that only verified users can post reviews. Additionally, administrative privileges are required to manage product listings (Create, Update, Delete) on the front end, further securing these operations to users with 'Admin' status.
# **Validation and Testing**
I have chosen to include a series of manual tests, with the possibility of adding unit tests if time permits.
- Each user story will be tested.
- Browser Testing - Pages were manually tested on Google Chrome for both desktop and mobile. The site was also tested on Firefox and Safari for desktop.
- Code Validation - Validation tools were utilized to check the HTML, CSS, and Python.
For more details about testing, please refer to the Testing.md.
Most of the bugs that caused problems or errors were the result of typos and code lines copied and pasted from one part of the site to another without proper updates. These were eventually fixed.
Other bugs emerged when trying to implement ideas that seemed straightforward but proved more complex than anticipated. For instance, while adding a feature to select "paper finishing", which was supposed to resemble the "select size" feature, I had to abandon that route. Additionally, the feature to edit artists using the site's AI was not functioning as intended.
For some other problems, the solutions were found by researching online and checking similar projects for other students.
The email confirming a purchase wasn't being sent to users. After researching Slack, I pinpointed the likely source of the error in the webhook_handler code. I compared my code with others from different projects. The primary changes were in these two lines:
pythonCopy code
billing_details = intent.charges.data[0].billing_details
grand_total = round(intent.charges.data[0].amount / 100, 2)The revised version is:
pythonCopy code
billing_details = stripe_charge.billing_details
grand_total = round(stripe_charge.amount / 100, 2)But as the saying goes, "haste makes waste." With the approaching deadline to deliver the project, I ended up speeding up the deployment of this project, which wasn't as seamless as my previous ones. Even though they were very similar, I encountered errors during the AWS account setup and database migration. Thankfully, with the assistance of the Code Institute Tutors, and after revisiting many of the steps, I successfully deployed the site.
Regrettably, not all issues were addressed due to time constraints and concerns about potentially introducing larger issues.
- Artist Profile: Initially, I established artist profiles using two separate models—one for the artist's personal profile and another for their social media links. Upon reflection, this separation was unwarranted; ideally, both components should have been consolidated into a single model. Within the site's admin section, the functionality performs correctly, permitting an admin to add, edit, and delete artists. However, issues arise when utilizing the "Artist Management" user interface. While adding a new artist is seamless, attempts to edit an artist profile trigger an error, preventing any changes from being saved. Although this feature is not critical for the current project iteration, its full functionality would be advantageous. Due to time constraints and the complexities of revising the app's view and model codes, the editing and deleting were removed from the user interface.
- Font Display on Safari 16.1: The font "Barlow" wasn't rendering and was replaced by a serif font. Meanwhile, the logo font, "Aboreto", displayed correctly.
- Newsletter Subscription Redirect: Post-subscription to the newsletter via the MailChimp form, users are navigated to a "Subscription Confirmed" page with two buttons: "Continue to our website" and "Manage your preferences". Clicking on "Continue to our website" should ideally redirect users back to the MacArt page. Instead, they encounter an empty MailChimp form soliciting further details (email, name, and date of birth), accompanied by a notification of underlying errors.
- PEP 8 Linter: Some Python files “contained line too long” errors that I chose not to rectify presently, especially considering their critical nature and the fact that these errors don't compromise the site's performance.
- mac_art (project): settings
- Artis app: views
- Checkout App: views, webhooks
- Products App: widgets
- Profile: forms
There's always room for improvement. However, due to time constraints, some enhancements were left for future iterations. Here are a few of them:
- Confirmation before deleting: For the admin users when using the sections to manage Artists, Products and FAQ Entries, when the click delete the item is deleted straight away. There might be a good idea to first show a confirmation page or modal to the user before the actual deletion.
- Product Ratings: Presently, the rating feature is merely a placeholder. The ratings showcased are arbitrary values assigned by the site administrator. A genuine rating system, based on customer feedback, would be better.
- Dynamic Pricing: Currently, while users can select print sizes, this choice doesn’t impact the product's price. Realistically, different sizes should correspond to different price points to reflect the tangible costs associated with production.
- Paper Finish Options: Enabling users to choose the type of paper finish—be it glossy or matte—can greatly enhance the personalised shopping experience.
- Filter by Format: After reviewing the user experience, a dual-layered product filtering system, where users could first choose photos by theme and subsequently filter their choices by format, would be a nice feature.
- Image Lightbox: Rather than redirecting to a new browser tab when users click on a product image, a more elegant solution would be the integration of a Lightbox. This feature would present an enlarged image overlay within the same browser window, elevating the overall user experience.
The project has been deployed to Heroku. A detailed step-by-step guide to deploy the project can be found in the link below:
This project was heavily based on the Code Institute Walkthrough Project Boutique Ado
Other sources:
- Django Field tag label class
- Django Contact Form
- save(commit=False): StackOverFlow, itecnote
- Footer based on Art of Tea project
- Error handlers from the Black and White Beauty project
- Embedding Google Maps
- Bootstrap Collapse Panel
- Favicon
- Webhook Handler - code compared with the projects Retro-Football-Kits and Bookworks
- The showcased photographs are sourced from the project author's personal collection.
- Product mock-ups, particularly for books and calendars, have been obtained from mockups-design.com.
- Mockups with screenshots of the site in different devices: https://techsini.com/multi-mockup/index.php with https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe
- Artist profile images have been licensed from Adobe Stock.
- Logos pertaining to Alamy, GettyImages, and FineArtAmerica have been sourced directly from their respective official websites. It's imperative to note that this project is purely educational and does not signify any official association or endorsement from the aforementioned entities. They've been incorporated as exemplary representations of reputable platforms an art gallery might associate within a real-world context.
- Deployment instructions from Andrew Kennedy's project 5.
- The text for the product descriptions, intro to the website and artist profiles were partially generated with AI tools such as Google Bard and ChatGTP.
- PEP 8 - Style Guide for Python Code
- Sitemap: https://www.xml-sitemaps.com/
- Temporary email: https://temp-mail.org/en/
This project is part of the Full Stack Development course from Code Institute. I would like to thank the Code Institute team, including my mentor, the toutor and the student supports that always helped when I needed. Also the Code Institute slack community.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent