Uptown Gallery Readme 📚

Link to Live Site Here

🤔 What is the Uptown Gallery Website?

Uptown Gallery is a vibrant and contemporary online platform dedicated to the world of urban modern art. This website serves as a dynamic space where art enthusiasts and collectors converge to discover, list, and bid on exquisite pieces of modern artwork.

⭐ Purpose and Goals of the Website

• Artwork Listing and Bidding: At the heart of Uptown Gallery is the ability for users to list and bid on artwork. This feature democratizes the art acquisition process, making it accessible and engaging for a broad audience of art lovers.

• Admin-Controlled Curation: Our platform ensures the quality and authenticity of art pieces through a robust backend approval process. Admins have the capability to control and curate the artwork listed on the website, maintaining high standards and a diverse collection.

🙋 Target Audience

• 🧙 Admins

  Admins are the curators and gatekeepers of the Uptown Gallery platform. Their primary role is to oversee and manage the listing of artwork, ensuring that each piece aligns with the gallery's standards and aesthetic. They possess a keen eye for quality and authenticity, and are responsible for maintaining the integrity and diversity of the art collections on the site. Admins facilitate a smooth, secure, and engaging experience for all users, handling the backend processes and making executive decisions about the content and functionality of the website.

• 👨‍🎤 Bidders/Buyers

  Bidders are art enthusiasts and collectors, ranging from seasoned connoisseurs to newcomers in the art world. They are attracted to the platform for its diverse collection of urban modern art and the exciting opportunity to acquire unique pieces through the bidding process. Bidders appreciate the accessibility and convenience of online bidding, and they contribute to the vibrant community of the gallery through their participation and engagement. They value transparency, authenticity, and the thrill of discovering new artists and artworks.

• 🧑‍🎨 Artists

  Artists are the creative force behind Uptown Gallery, offering a window into the contemporary urban art scene. They are both creators and participants in the marketplace, listing their own artworks for sale and engaging with other artists and bidders. Artists on the platform are diverse in their styles and backgrounds, ranging from emerging talents to established names in the modern art scene. They seek a platform that not only showcases their work to a wider audience but also allows them to connect with fellow artists and art enthusiasts.

  Note: The roles of Bidder and Artist are fluid on Uptown Gallery, with many users participating as both. This dual role fosters a rich, interactive community where users can experience the full spectrum of art appreciation, from creation to collection.The website is designed in such a way that Artists cannot Bid on their Artwork

🧑 User stories

👨‍🎤 Buyer Product Backlog Milestone

Buyer Browse Art

Buyer Place Bid

Buyer Profile

🧑‍🎨 Seller/Artist Product Backlog Milestone

Seller Create Art Listing

Seller Set Reserve/Starting Price

Seller Profile

🧙 Admin Product Backlog Milestone

Admin Art Listing Approval

Admin User Account Control

🖌 UX,Design and Layout

🖱 UX Concept

🌊 User Type Flowcharts

• Buyer/Bidder
• Seller/Artist

• Admin

  🌈 Design System

  Click here to view the Elements of the Design System

  *Color Palette* This color palette was selected to reflect the game theme, mood, contrast, and accessibility for an immersive and user-friendly experience.  This font was chosen for its bold and easy-to-read structure while maintaining the theme of the game. *Font*  Major Mono Display imported from [Google Fonts](https://fonts.google.com/specimen/Major+Mono+Display?query=Major+Mono+Display)  Raleway 400 imported from [Google Fonts](https://fonts.google.com/specimen/Major+Mono+Display?query=Major+Mono+Display) *Iconography* Icons are taken from [Bootstrap Icons](https://icons.getbootstrap.com/) *Additional Fonts, Buttons, Navbar, Activity Dasboard, Hover Effects and Cards* These elements are styled using [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/)

  🖼 Wireframes

  • Link to Wireframes in Figma

🖥 Technology

• Languages:

  • Python 3.11.5: the primary language used to develop the server-side of the website.
  • JS: the primary language used to develop interactive components of the website.
  • HTML: the markup language used to create the website.
  • CSS: the styling language used to style the website.
  • Bootstrap: a CSS Framework used for developing responsive and mobile-first websites.

• Frameworks and libraries:

  • Django: python framework used to create all the logic.
  • jQuery: was used to control click events and sending AJAX requests.
  • Bootstrap: was used to control click events and sending AJAX requests.

• Databases:

  • SQLite: was used as a development database.
  • PostgreSQL: the database used to store all the data.

• Other tools:

  • Git: the version control system used to manage the code.
  • Pip3: the package manager used to install the dependencies.
  • Gunicorn: the webserver used to run the website.
  • Spycopg2: the database driver used to connect to the database.
  • Django-allauth: the authentication library used to create the user accounts.
  • Django-crispy-forms: was used to control the rendering behavior of Django forms.
  • Heroku: the cloud platform used to host the website.
  • ElephantSQL: the cloud database used to store all the data.
  • GitHub: used to host the website's source code.
  • VSCode: the IDE used to develop the website.
  • Chrome DevTools: was used to debug the website.
  • Bootstrap Icons: was used to create the icons used on the website.
  • Miro was used to make a flowchart for the README file.
  • Coolors was used to make a color palette for the website.
  • W3C Validator: was used to validate HTML5 code for the website.
  • W3C CSS validator: was used to validate CSS code for the website.
  • JShint: was used to validate JS code for the website.
  • PEP8: was used to validate Python code for the website.
  • Django Q: Django Q is a native Django task queue, scheduler and worker application using Python multiprocessing. Used to update auction status after closure.
  • Django Widget Tweaks: Used to add extra classes to django html.
  • Django Debug Toolbar: Used to debug various aspects during development.
  • Cloudinary: Image/file cloud hosting service.
  • Whitenoise: tool used in Django applications for serving static files.

✍ Agile Methodology

Github's issues, issue labels, milestones and project management board was used to help me track and organise the work in this project:

💎 Milestones

The issues where orgnaised into Milestones and custom labels where create to add context and detail to each issue and it's status :

• #1 Infrastructure Setup
• #2 Buyer Product Backlog
• #3 Seller Product Backlog
• #4 Admin Product Backlog

And then displayed on my Project Management Board:

Sorted by Issue Status and Milestone, clicking into the issue allowed for viewing labels and updating them:

• Project Board Screenshot

• Added Labels Screenshot

• Project Board Link

✨ Features

Please refer to the FEATURES.md file for all features-related documentation.

🔢 Information Architecture

🗂 Database

• During develoopment the database was created using SQLite.
• The database was then migrated to PostgreSQL.

Database Schema ERD Diagram

🪄 Data Modeling

UserProfile

Artwork Model

Auction Model

Bids Model

📝 Testing

Please refer to the TESTING.md file for all test-related documentation.

🚀 Deployment

• The website was deployed to Heroku.

• The database was deployed to ElephantSQL.

• This website can be found here link.

Please refer to the DEPLOYMENT.md file for all deployment-related documentation.

🌟Credits

• Custom 404/500 pages and views were taken from my mentor Juliia's ecommerce project and modified with her permission.
• All images used on the website are taken from Vecteezy under free license.
• Django Q information and setup was taken from this youtube video by Valentino Gagliardi.
• Lots of information taken from this youtube video on Django from FreeCodeCamp.
• The entire series on advacned Python from Patrick Loeber.
• This video on AJAX Requests from Net Ninja.

🏆 Acknowledgments

• I would like to acknowledge my daughter and husband for their support and understanding during this time of intense learning.
• My mentor Juliia for her guidance and suggestions, she has gone above and beyond and I am very grateful for her support and knowledge.