Welcome to New World Disorder, an innovative fashion project where exclusivity meets creativity. In a world overwhelmed by mass-produced fashion, our brand stands out by offering something truly unique—limited edition t-shirts, with only 33 pieces of each design ever made. This concept is not just about wearing a piece of clothing; it's about adorning a rare piece of art.
Find the project repository here. .
At New World Disorder, our vision is to redefine the norms of the fashion industry by introducing the concept of extreme exclusivity. Each t-shirt design is a limited run, making each piece a coveted collectible. This exclusivity not only enhances the value of each piece but also fosters a deeper connection between the product and its wearer.
Our mission is to redefine the true essence of limited edition by crafting only a very select number of t-shirts. We strive to deliver unmatched quality and one-of-a-kind designs to the fashion-conscious individual who values true exclusivity and sustainability. Our goal is to cultivate a global community of customers who appreciate the uniqueness of fashion and are passionate about expressing themselves with our rare and exceptional pieces.
I want to quickly understand the purpose and benefits of New World Disorder (NWD) so that I can decide whether it's the right place for me to shop. I should be able to navigate the site easily and intuitively to explore the products that NWD offers. I expect to find compelling reasons to register, such as unique designs, high-quality materials, and sustainable practices. I need to be able to contact the site administrators easily through a contact form for any inquiries or feedback.
I want a simple and secure sign-in process to access my personal account. I need to be able to browse and purchase t-shirts with minimal steps and organize my shopping with a cart or wishlist. I should be able to edit or delete items in my cart, reflecting changes in real-time. I want the ability to search through the product catalog using keywords or categories to find what I need quickly. I need a profile area where I can view my order history and update my account details or password as needed.
I want features that support advanced shopping experiences, such as personalized recommendations and exclusive offers. I would appreciate having access to my order history and tracking information for my purchases.
The user interface (UI) of New World Disorder (NWD) combines simplicity and user-friendliness with a distinct brutalist design aesthetic, ensuring that customers can easily navigate the site while enjoying a unique visual experience. The UI features a playful yet clean aesthetic with a dinosaur theme, adding a memorable touch to the shopping experience.
Key design elements include:
Minimalistic Layout: The clean interface avoids clutter, allowing customers to focus on browsing and purchasing t-shirts.
Intuitive Controls: Common actions, such as adding items to the cart, checking out, and navigating to different pages, are prominently placed and easily accessible, promoting a smooth user experience.
Consistent Visual Elements: Familiar icons and consistent color schemes help users quickly understand and utilize different functions on the site.
Brutalist Design: The site employs a brutalist design approach, characterized by bold typography, stark contrasts, and a raw, unpolished look. This design choice sets NWD apart from more conventional e-commerce sites, appealing to customers who appreciate a more edgy and unconventional aesthetic.
Responsive Design: The UI adjusts seamlessly across various devices, ensuring that the functionality and aesthetics are maintained on screens of all sizes.
The design choices, including the use of playful dinosaur graphics and a pastel color palette, combined with the brutalist design elements, create a fun and engaging shopping environment. This thoughtful design approach aims to make the shopping process as enjoyable and efficient as possible for customers while providing a visually striking experience.
Scope for Django E-Commerce Web Application "New World Disorder Brand"
The primary goal of this project is to develop an advanced e-commerce web application using Django, offering a seamless shopping experience for customers purchasing t-shirts. The website will leverage the Printful API for product fulfillment and Stripe for payment processing. Additionally, the site will feature a blog for customer engagement and a newsletter signup form for marketing purposes.
Color Scheme and Background Design
For the New World Disorder (NWD) website, i've chosen a carefully curated color scheme that aligns with the site's brutalist aesthetic while ensuring it doesn't interfere with the display of our t-shirts. The color palette features a gradient background that adds a dynamic and engaging element to the site. Here’s a detailed look at the selected colors and their purpose:
Color Palette: E1DFF4: A soft, muted lavender that serves as the primary background color. E4E2F3: A slightly darker shade of lavender to create a subtle gradient effect. 111111: A deep, rich black used for text and important accents to maintain high contrast and readability. E5E2F1: Another variant of light lavender to blend seamlessly in the gradient. 3C3D43: A dark grey that complements the black, adding depth and neutrality. Gradient Background: The gradient background transitions smoothly from E1DFF4 to E5E2F1, providing a soft and subtle movement that adds a sense of dynamism and depth to the website. This gradient is designed to give the site a sense of movement without being overwhelming, ensuring that the focus remains on the t-shirt designs.
Compatibility with T-Shirt Colors: The selected color scheme is neutral and non-intrusive, making sure that it does not clash with or overshadow the diverse colors and designs of the t-shirts. The soft lavender tones create a calming and unobtrusive backdrop, allowing the vibrant t-shirt designs to stand out prominently.
Brutalist Style: The brutalist style of the NWD website is characterized by its stark, functional design, and the use of the 111111 black and 3C3D43 grey enhances this aesthetic. These colors are employed for text, borders, and other elements, maintaining the clean, bold, and utilitarian look that is a hallmark of brutalist design.
By using this thoughtful color scheme and gradient background, we ensure that the NWD website remains visually appealing, dynamic, and true to its brutalist roots, while also providing an excellent showcase for our t-shirt collections.
In the design of "newworlddisorder.shop," the choice of font plays a crucial role in reinforcing the overall aesthetic and user experience. The selected font, 'Courier New', Courier, monospace, aligns perfectly with the brutalist design style adopted for the project. Here’s why this choice is effective:
Brutalism in web design is characterized by its raw, unadorned approach that focuses on functionality over form. This style often utilizes bold typography, minimalist layouts, and a stark, utilitarian appearance. 'Courier New', with its monospaced, typewriter-like appearance, embodies these principles by providing a straightforward, no-nonsense visual impact.
- Monospaced Structure: Each character in 'Courier New' occupies the same amount of horizontal space. This creates a grid-like uniformity which complements the rigid, grid-based layouts typical of brutalist design.
- Legibility: The clean, unembellished design of 'Courier New' ensures high legibility, making it easier for users to read text content without distractions. This is particularly important in brutalist designs, where clarity and function are paramount.
- Retro Aesthetic: 'Courier New' evokes a sense of nostalgia, reminiscent of old typewriters and early computer interfaces. This retro feel can enhance the brutalist design by adding an element of timelessness and authenticity.
- Visual Contrast: Brutalist designs often employ high contrast and stark visual elements. 'Courier New' provides a strong contrast against backgrounds, especially when used in conjunction with bold color schemes and minimalistic elements.
- Simplicity and Directness: The straightforward appearance of 'Courier New' aligns with the brutalist ethos of prioritizing content and user interaction over decorative elements. It communicates information clearly and directly, which is the core intention of brutalist design.
- Cohesive Aesthetic: By using 'Courier New', the website maintains a cohesive aesthetic that resonates with the brutalist philosophy. The font's mechanical and functional look integrates seamlessly with the overall design, enhancing the user experience by maintaining a consistent visual language.
The decision to use 'Courier New', Courier, monospace in "newworlddisorder.shop" underscores a commitment to the principles of brutalist design. Its monospaced, legible, and retro characteristics contribute to a clear, functional, and visually striking website. This choice not only enhances readability and user experience but also firmly establishes the site’s aesthetic identity within the brutalist design paradigm.
Images used on the site reflect the unique nature of each product, detailed to show the quality and design of the t-shirts. Post content is curated to resonate with our target audience, providing them with engaging stories behind each collection.
Wireframes for the site were developed to ensure a user-friendly experience, allowing easy navigation and emphasizing the uniqueness of our products.
Click to view the wireframe
The flowchart illustrates the process flow for the New World Disorder (NWD) e-commerce application. It provides a visual representation of the steps involved in various operations within the application. Here is the flowchart from my planning:
Click here to view the planning Flowchart
The Entity Relationship Diagram (ERD) was created using Draw.io. The ERD is a visual representation of the database structure. It shows the tables, the columns in each table, and the relationships between the tables. Here is the ERD from my planning:
Click here to view the Entity-Relationship Diagram
The Sequence Diagram below represents the web store checkout process for the New World Disorder (NWD) e-commerce application. It outlines the interactions between different components during the checkout process.
Click here to view the Sequence Diagram
- Account Creation: Users can create new accounts using email and password.
- Login/Logout: Users can securely log in and log out of their accounts.
- Account Deletion: Users can delete their accounts if they wish to discontinue using the service.
- Profile Update: Users can update their profile information, including personal details and shipping address.
- Product Listing: T-shirts are displayed on the homepage with images, descriptions, and prices.
- Product Detail Page: Clicking on a t-shirt redirects to a detailed product page where users can select variants (size, color) and view additional information.
- Add to Cart: Users can add selected t-shirts to their shopping cart.
- Purchase Now: Users can proceed to purchase a t-shirt directly from the product page.
- View Cart: Users can view items in their cart, update quantities, or remove items.
- Shipping Details: Users enter and confirm shipping details during checkout.
- Stripe Payment Integration: Users can make payments securely using Stripe.
- Order Confirmation: Upon successful payment, users receive an order confirmation and are redirected to their profile page.
- Order History: Users can view a summary of their past orders in their profile.
- Order Status: Users can track the status of their current orders.
- Review Creation: Users can leave reviews for purchased products.
- Review Update/Delete: Users can edit or delete their reviews.
- Email Collection: Users can sign up for newsletters to receive updates and promotional content.
- Marketing Integration: Collected emails will be used for marketing campaigns.
- Facebook Business Page: The site will include links to the Facebook business page for additional customer engagement.
- Social Sharing: Users can share products and blog posts on social media platforms.
- Unique Designs: creating new inspiring t-shirt designs.
- User Experience: Focus on creating a visually appealing and user-friendly interface.
- Printful API: Integration with Printful to ensure high-quality product fulfillment and timely delivery.
- Eco-Friendly Options: Commitment to offering sustainably produced t-shirts where possible.
- International Reach: Strategic marketing efforts to attract a global customer base.
- Personalized Experience: Tailored recommendations and content based on user preferences.
- Interactive Features: Enhanced engagement through reviews, comments, and social media interactions.
| User Story ID | As a / An | I wish to... | So that I can... |
|---|---|---|---|
| 1 | Shopper | Browse through a catalog of products | Choose products to buy |
| 2 | Shopper | Access a specific type of products | Efficiently locate my interested products without browsing the entire catalog |
| 3 | Shopper | Examine the details of individual products | Learn about the price, descriptions, ratings, and view product images |
| 4 | Shopper | Instantly spot promotions and discounts | Gain benefits from discounts and special offers on my intended purchases |
| 5 | Shopper | Monitor my total shopping expenses anytime | Control my expenditure |
| User Story ID | As a / An | I wish to... | So that I can... |
|---|---|---|---|
| 6 | Site User | Register for an account with ease | Set up and view my personal profile |
| 7 | Site User | Log into or out of my account effortlessly | Access and manage my personal account information |
| 8 | Site User | Reset my forgotten password | Regain access to my profile |
| 9 | Site User | Get an email confirmation after registration | Confirm my registration was successful |
| 10 | Site User | Customize my user profile | Access my order history, save payment information, and view order confirmations |
| User Story ID | As a / An | I wish to... | So that I can... |
|---|---|---|---|
| 16 | Shopper | Specify the quantity of a product before purchasing | Ensure the accuracy of my order details |
| 17 | Shopper | Review items in my cart or wishlist | Confirm the total cost and review items before purchase |
| 18 | Shopper | Modify the quantity of items in my cart | Adjust my purchase details before finalizing the checkout |
| 19 | Shopper | Input my payment details easily | Complete my purchase without difficulties |
| 20 | Shopper | Trust the security of my personal and payment information | Shop with confidence knowing my data is secure |
| 21 | Shopper | See an order summary after checkout | Ensure there are no errors in my order |
| User Story ID | As a / An | I wish to... | So that I can... |
|---|---|---|---|
| 23 | Store Owner | Add new products to my store | Expand my store's inventory |
| 24 | Store Owner | Modify existing product details thru printful | Update prices, descriptions, and other details as needed |
| 25 | Store Owner | Remove products from the store | Discontinue sales of certain items |
Printful.com is an on-demand order fulfillment and warehousing service that supports businesses in printing and shipping products such as t-shirts directly to customers. Here's how Printful can be integrated into the Django project for "New World Disorder":
- Automatic Synchronization: Automatically sync new t-shirt designs from the Django application to the Printful product catalog.
- Automated Processing: When a customer purchases a t-shirt, the order details are automatically sent from Django to Printful, which then handles the printing, packing, and shipping.
- Inventory Updates: Use the Printful API to track and update inventory levels to ensure that no more than 33 pieces of each design are sold.
- Logistics Integration: Retrieve shipping options, calculate costs, and provide tracking information through the API.
Stripe is a robust platform for handling online payments, which can be integrated into Django to facilitate secure and efficient transactions:
- Multiple Payment Methods: Handle payments through various methods, accommodating a wide range of customers.
- Data Protection: Stripe manages credit card data storage and processing, significantly reducing compliance burdens with PCI DSS.
- Recurring Billing: If subscriptions or priority ordering for repeat customers are offered, Stripe can manage these processes.
Here's a general approach to implementing these APIs within a Django framework:
- Obtain API keys by registering with Printful and Stripe.
- Use pip to install necessary libraries like
printful,dj-stripe, orstripe.
- Add configurations such as API keys in
settings.pyand set up webhook endpoints.
- Define models to store product, order, and transaction information. Extend pre-built models from
dj-stripeas necessary.
- Implement views to handle API interactions like order creation, payment processing, or stock updates.
- Ensure all transactions are secure and comply with web security standards.
For more detailed testing information on "New World Disorder", please refer to the testing documentation.
This document lists and describes the dependencies used in the "www.newworlddisorder.shop" project. These dependencies are defined in the requirements.txt file and are essential for the project's functionality, including the integration with Printful API for order fulfillment and Stripe for payment processing.
Asynchronous Programming
- anyio==4.3.0: Asynchronous networking and concurrency library that provides an API for structured concurrency.
- async-lru==2.0.4: Simple LRU cache for asyncio-based applications.
- asgiref==3.8.1: ASGI (Asynchronous Server Gateway Interface) reference library that provides utilities for developing ASGI applications.
Authentication and Security
- argon2-cffi==23.1.0: Secure password hashing library using the Argon2 algorithm.
- argon2-cffi-bindings==21.2.0: Low-level bindings for the Argon2 password hashing algorithm.
- cryptography==42.0.5: Cryptographic recipes and primitives to ensure the secure transmission of data.
- cffi==1.16.0: Foreign Function Interface for Python calling C code.
Web Development
- Django==5.0.3: High-level Python web framework that encourages rapid development and clean, pragmatic design.
- djangorestframework==3.15.1: Powerful and flexible toolkit for building Web APIs in Django.
API Clients
- google-api-core==2.18.0: Core library for Google API clients.
- google-api-python-client==2.123.0: Client library for accessing Google APIs.
- google-auth==2.29.0: Authentication library for Google APIs.
- stripe==8.9.0: Python library for integrating Stripe payment processing services.
Data Handling and Validation
- attrs==23.2.0: Attributes package for Python for creating classes without boilerplate code.
- jsonschema==4.21.1: JSON schema validation library.
- jsonschema-specifications==2023.12.1: Specifications for the JSON schema.
- fastjsonschema==2.19.1: Fast JSON schema validator for Python.
Database and ORM
- sqlparse==0.4.4: Non-validating SQL parser for Python.
Testing and Debugging
- debugpy==1.8.1: Debugging library for Python that integrates with Visual Studio Code.
- pytest==7.1.2: Testing framework for Python.
- pytest-django==4.5.2: Plugin for pytest that provides a set of useful tools for testing Django applications.
Networking
- requests==2.31.0: Simple, yet elegant HTTP library for Python.
- urllib3==1.26.18: Powerful, user-friendly HTTP client for Python.
Caching
- CacheControl==0.14.0: HTTP caching library for requests.
- cachetools==5.3.3: Extensible memoizing collections and decorators.
HTML and CSS
- beautifulsoup4==4.12.3: Library for parsing HTML and XML documents.
- bleach==6.1.0: HTML sanitizing library.
- tinycss2==1.2.1: Low-level CSS parser library for Python.
Date and Time
- arrow==1.3.0: Better dates and times for Python.
- python-dateutil==2.9.0.post0: Extensions to the standard Python datetime module.
- pytz==2024.1: World timezone definitions, modern and historical.
Logging and Monitoring
- prometheus_client==0.20.0: Prometheus instrumentation library for Python applications.
- python-json-logger==2.0.7: JSON log formatter for Python's logging library.
- httplib2==0.22.0: Comprehensive HTTP client library.
- smtp: Library for sending emails using Simple Mail Transfer Protocol.
Widgets and UI
- ipywidgets==8.1.2: Interactive HTML widgets for Jupyter notebooks and the IPython kernel.
- qtconsole==5.5.1: Jupyter Qt console.
- widgetsnbextension==4.0.10: Jupyter notebook extension for ipywidgets.
Miscellaneous
- Jinja2==3.1.3: Template engine for Python.
- MarkupSafe==2.1.5: Implements a XML/HTML/XHTML Markup safe string for Python.
Additional Libraries
- six==1.16.0: Python 2 and 3 compatibility utilities.
- soupsieve==2.5: CSS selector library designed to be used with BeautifulSoup.
To install the dependencies listed above, you can use the requirements.txt file. Run the following command:
pip install -r requirements.txtYou can clone the repository by following these steps:
- Go to the GitHub repository.
- Locate the Code button above the list of files and click it.
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard.
- Open Git Bash or Terminal.
- Change the current working directory to the one where you want the cloned directory.
- In your IDE Terminal, type the following command to clone the repository:
git clone https://github.com/Moodyw03/new-world-disorder
- Press Enter to create your local clone.
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository.
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
- Python: The main programming language used for back-end development.
- JavaScript: Used for client-side interactivity and functionality.
- HTML: Used for structuring the web pages.
- CSS: Used for styling the web pages.
- Django: A high-level Python web framework used to build the back-end of the application.
- Django REST Framework: Used to build APIs (though not explicitly mentioned, used with Django).
- Bootstrap: front-end framework used for responsive design and pre-built UI components (evident from the CSS files like
checkout.css,login.css, etc.).
- Static Files: Includes various CSS files (
cart.css,checkout.css,navbar.css,login.css,order.css,product.css,register.css,style.css) and JavaScript file (checkout.js). - Images: Contains images used in the project (e.g.,
logo.png,nwd color.png,nwdt.png).
- PythonAnywhere: platform used for hosting the back-end of the application.
- SQLite: as
db.sqlite3, used for local development database.
- Stripe: For online secure payments.
- Git: Version control system for tracking changes in the codebase.
- GitHub: Used for code repository hosting.
- Gitpod: A cloud-based IDE for development.
- Figma: Used for creating wireframes.
- Eraser: Used to design the database diagram.
- firebase_config.json: use of Firebase for some functionality (e.g., authentication, real-time database).
- settings.py: Configuration file for Django settings.
- PEP8: Used for Python code validation to ensure adherence to coding standards.
- W3C HTML Validator: Used for HTML code validation.
- W3C CSS Validator: Used for CSS code validation.
- Jshint: Used for javascript code validation.
These components together provide a comprehensive stack for developing and deploying the "New World Disorder" web application, ensuring robust functionality, maintainability, and scalability.
For more detailed testing information on "New World Disorder", please refer to the testing documentation.
The scope of this project covers the development of a comprehensive e-commerce platform with robust features for user account management, product handling, order processing, customer engagement, and marketing integration. By leveraging advanced technologies and strategic practices, www.newworlddisorder.shop aims to provide an exceptional shopping experience for its customers while promoting sustainable and innovative fashion. By the end of this documentation, you will have a detailed understanding of every aspect of New World Disorder, from inception to delivery, and how we maintain our commitment to exclusivity and quality in every piece we create. By integrating Django with Printful and Stripe APIs, "New World Disorder" can automate significant parts of its sales and fulfillment processes, allowing the business to focus on design and marketing.
Credits All Designs, T-shirts included were created by the developer.
Acknowledgements Gratitude to fellow Code Institute students and alumni for their assistance. I'd like to extend my sincere gratitude to Manu Perez and Pasquale for their invaluable support and mentorship at Bristol College.
Many thanks to the tutors and staff at the Code Institute for their unwavering support. A special thanks to the Code Institute London Community for their continuous encouragement and technical insights.
Much gratitude to my family for their patience and understanding with me.
Gabriel Pereira, 2024.
Content All content was written by the developer.