Skip to content

DebbieBergstrom/realDreamsCo

BranchesTags

Repository files navigation

realDreams Co.

'realDreams Co.' Where dreams become real adventures!

Welcome to realDreams Company, the premier online destination where your quest for extraordinary dream experiences becomes a reality. Our innovative e-commerce platform offers a wide selection of dream packages, allowing users to choose adventures to relive epic historical events, explore the underwater worlds or try out the most adrenaline pumping activities they never dared to try. Choose your dream, select one of our specialized Dream Centers located in Stockholm, Berlin, or Paris, and embark on a journey unlike any other. At realDreams Co., we're more than just an e-commerce site; we're your gateway to exploring new realms of possibility. Dive into the future of dreaming with realDreams Co., where every experience opens the door to a world where dreams and reality converge.

Mockup image

Developer: Debbie Bergström
Live webpage
Project Repository

GitHub Badge Gitpod Badge Git Badge Heroku Badge PostgreSQL Badge

HTML5 Badge CSS3 Badge JSS Badge Python Badge Markdown Badge

Bootstrap Badge Django Badge

Table of Content

Table of contents generated with markdown-toc

Project Goals & Marketing / SEO Strategy

realDreams Co. is a Django web application created to revolutionize the way people experience real-life events in dreams. By offering tailor-made virtual dream experiences, realDreams Co. aims to:

  • Provide a unique and immersive platform where users can purchase various dream experiences.
  • Create an innovative space for users to explore different dream packages, ranging from historic events to futuristic scenarios.
  • Enable users to select the duration and location of their dream experiences, offering a customizable journey each time.
  • Ensure a seamless user journey from selecting a dream package to experiencing it in one of the realDream Centers in either Stockholm, Berlin or Paris.
  • Provide a safe process the whole way, from purchase, checking customer health status and set up a comfortable, safe dream environment, leaving the customer happy with new memories after the session is complete.

User Goals

  • To experience safe dreams that feel as real as life events and create unforgettable memories.
  • To have the ability to choose duration and dream experiences according to their preferences.
  • To be part of a pioneering community exploring the boundaries of virtual dream experiences.

Site Owner Goals

  • To establish the first-of-its-kind platform that allows users to purchase dream experiences online.
  • To maintain a high-quality user experience with intuitive navigation and immersive design.
  • To ensure customer satisfaction by providing diverse dream packages and excellent service at realDream Centers.

Marketing Strategy for RealDreams Co.

Please note that the marketing strategies outlined below are part of a conceptual framework for RealDreams Co., a fictional project developed as a showcase. While these strategies represent a comprehensive approach we would consider for a real-world application, all of them are currently not in execution. This plan serves to illustrate the potential marketing directions and engagement tactics that could be employed to successfully market virtual dream experiences in a real project scenario.

Introduction

RealDreams Co. specializes in offering unique virtual dream experiences, harnessing advanced neurotechnology to deliver unmatched, personalized dream adventures. As a pioneer in the digital realm, our marketing strategy is designed to engage users deeply, attract potential customers, and build a loyal community around our brand.

Who are our users?

  • Individuals seeking unique entertainment experiences.
  • Tech-savvy users interested in virtual reality and neurotechnology.
  • People looking for meaningful gifts for friends and family.

Which online platforms would you find lots of your users?

  • Social Media Platforms: Facebook, Instagram, Twitter, and LinkedIn for broader reach and targeted advertising.
  • Content Platforms: YouTube and Twitch for immersive content and live demonstrations.

Social Media Use

  • Facebook Business Page: To share updates, engage with users through comments, and run targeted ads.
  • Visit the Facebook Page
  • Images of Facebook Business Site:
See Screenshot Facebook Business Page
See Screenshot Facebook Posts
See Screenshot Facebook About Page
  • Instagram: For sharing visually captivating content from dream experiences, user testimonials, and behind-the-scenes peeks.
  • Twitter: For real-time updates, engaging with the tech community, and participating in relevant conversations using hashtags.
  • LinkedIn: To establish business credibility, share industry insights, and network with potential partners.

Content Marketing

  • Blog Posts: On our website to provide valuable content about dream science, the technology behind our experiences, and the benefits of virtual dreaming.
  • YouTube: For sharing trailers of our dream experiences, customer testimonials, and explainer videos on how it works.

Email Marketing

  • Using Mailchimp for newsletter signups directly on the site, we plan to:
    • Send regular updates about new dream experiences.
    • Share exclusive offers and discounts to our subscribers.
    • Provide valuable content that meets our users' interests in technology and virtual experiences.

Sales and Discounts

  • Announced through our social media platforms and email newsletters.
  • Special promotions for subscribers or followers to foster community loyalty.

Goals of Our Business

  • To become the leading provider of virtual dream experiences globally.
  • Build a community of users passionate about virtual reality and dream exploration.
  • Marketing strategies like targeted social media advertising, content marketing, and direct email communication will drive awareness, user engagement, and conversions.

Budget for Advertising

  • Initial focus on free or low-cost marketing options such as organic social media growth and content marketing.
  • Allocate a budget for targeted social media ads on Facebook and Instagram, focusing on audiences that match our user profile.
  • Explore collaborations with influencers in the tech and entertainment niches for broader reach.

Conclusion Our marketing strategy is tailored to engage users on platforms where they spend their time and offer content that enriches their understanding and interest in virtual dream experiences. Through strategic use of social media, email marketing, and content creation, RealDreams Co. aims to build a strong, engaged community, driving towards our goal of revolutionizing the dream experience industry.

SEO Strategy for RealDreams Co.

The SEO strategy for realDreams Company's website revolves around the selection of keywords that succinctly describe the unique offerings and the essence of the brand. This approach ensures the site ranks well on search engines and attracts the right audience. Here's an explanation of the SEO elements:

  1. Keywords: Chosen to reflect the primary services and experiences offered by realDreams Company, the keywords encompass both broad search terms like "Virtual Dreams" and "Dream Experiences" and more specific long-tail keyword phrases such as "Historical events in dreams" and "Dream experiences online". These keywords are likely queries potential customers might use, ensuring the website appears in relevant searches.
  • Short Keywords:
  1. Real Dreams
  2. Virtual Dreams
  3. Dream Experiences
  4. Custom Dreams
  5. Dream Simulation
  6. Experience Dreams
  7. Dream Adventures
  8. Virtual Reality Dreams
  • Long-Tail Keywords:
  1. Dream experiences online
  2. Virtual dream creation
  3. Dream simulation experiences
  4. Online dream platform
  5. Tailored dream adventures
  6. Historical events in dreams
  7. Adrenaline kicks in dreams
  8. Dive in dreams
  9. Futuristic dream simulations
  10. Virtual adventure dreams
  11. Dream packages online

Typically, SEO keyword selection is informed by tools like Google Trends and Wordtracker, which analyze current search data. However, for this project, the concept of selling virtual dreams is futuristic and not directly reflected in current search trends. As such, our keyword strategy is based on a speculative analysis of what potential users might search for if this fictional service were available today. It's a creative exercise in predicting future search behaviors around an emerging, yet-to-exist market.

  • Implementation:

  • Content Optimization: Seamlessly incorporating keywords into site text to maintain readability and search relevance.

  • Meta Data: Utilizing keywords in meta tags and descriptions for improved search rankings.

  • Header Hierarchy: Employing H1, H2, and H3 tags to organize content and emphasize keywords.

  • Emphasis Tags: Using <strong> and <em> tags to highlight important terms for search engines.

  • Link Text: Writing descriptive anchor texts with keywords to clarify link context.

  • Image Alt Text: Adding keyword-rich descriptions to images for better search visibility.

  1. Description: The meta description is crafted to give a concise overview of realDreams Company's services, embedding selected keywords naturally. This description doubles as a marketing text on search engine results pages, enticing users to click through with a promise of unique and immersive experiences.

  2. Open Graph (OG) Tags: OG tags are used to control how URLs are displayed when shared on social media. The title and description are designed to be engaging, providing a clear value proposition that encourages clicks and shares. The use of an image ensures a visual connection is made with the brand when the site's links are shared, potentially increasing click-through rates from social platforms.

Image when link is shared:

The selected SEO elements aim not just for visibility, but for engagement and conversion, presenting realDreams Company as an innovative leader in the virtual dream experience industry. This SEO foundation lays the groundwork for ongoing optimization and digital marketing efforts.

  1. sitemap.xml & robots.txt files: The inclusion of a sitemap.xml and robots.txt file in the project forms a crucial part of the SEO strategy. The sitemap.xml, generated at xml-sitemaps.com, aids search engines in efficiently crawling the site by outlining the structure of the website and ensuring all pages are discovered. The robots.txt file is used to instruct search engine bots on which parts of the site should not be crawled or indexed, such as user account areas and admin pages. Together, these files help enhance the website's visibility to search engines while protecting user privacy and sensitive sections of the site from being publicly indexed.

(back to top)

User Experience

Target Audience

realDreams Co. is tailored for the following target audience:

  • Individuals who desire a new form of entertainment that allows them to experience dreams consciously.
  • Adventurous users seeking to explore various scenarios and historical events in a dream-like state.
  • Those interested in the concept of controlled dreaming and looking to experience specific fantasies or adventures.

User Requirements and Expectations

Users of realDreams Co. can look forward to:

  • A visually engaging and easy-to-navigate interface that simplifies the process of exploring and selecting dream experiences.
  • A secure purchase process with confidentiality in handling user health and personal data.
  • Interactive features that allow users to customize their dream experience type and duration, share feedback, and connect with others.
  • Personalized profiles where they can manage their preferences, and see order history.
  • Assurance of quality and safety during dream experiences, with comprehensive support and guidance from realDream Centers.

User Stories

User stories and tasks were put into six 'epics' and are organized into four distinct sprints (milestones) to establish a well-defined work structure. You can access the details of these milestones by clicking here, which will take you to the milestone overview.

Screenshot of milestone overview

Epic 1: Viewing & Navigation

Focuses on providing shoppers with a seamless browsing experience, ensuring they can easily explore and view realDream products and special offers.

Epic 2: Registration & User Accounts

Enables users to register, log in, and manage their profiles efficiently, enhancing their personal experience on the site.

Epic 3: Sorting & Searching

Allows users to find their desired realDream experiences quickly by filtering and searching based on specific criteria like name, description, and ratings.

Epic 4: Purchasing & Checkout

Covers the entire buying process, from selecting product variations to securely checking out, ensuring a smooth and secure transaction.

Epic 5: UX & UI

Aims to create an aesthetically pleasing and intuitive interface that encourages user engagement and satisfaction throughout the site.

Epic 6: Admin and Store Management

Provides the site's administrators with the tools they need to manage product listings, user feedback, and enhance the site's visibility through SEO practices.

(back to top)

Database

When creating the database structure schema for this project, I utilized the dbdiagram.io website. This online tool allowed me to visually design and document the database schema, making it easier to plan and implement the database for the blog application.

Database Schema

Database Schema Summary

Users Table

  • Represents registered users within the system.
  • Primary key: user_id.
  • Fields: username, email, password, created_at.

UserProfiles Table

  • Contains extended information for user accounts.
  • Fields: id, user_id, default_phone_number, default_street_address1, default_street_address2, default_town_or_city, default_county, default_postcode, default_country, preferred_contact_method, date_of_birth, preferred_dreamcenter, created_at.
  • Linked to Users through a OneToOneField, meaning each user has exactly one user profile and vice versa.
  • Reference: UserProfile.user > users.user_id // OneToOne

Category Table

  • Holds the categorization for products/ dream services offered based on their nature.
  • Primary key: category_id.
  • Fields: name, description, friendly_name.
  • Links many-to-one with the category_id to product_id.

DreamCenter Table

  • Designed to represent various locations where products (dream packages) are available.
  • Primary key: dreamcenter_id.
  • Fields: name, location, description.
  • Establishes a many-to-many relationship with Products, facilitated through ManyToMany field setup.

ProductDreamCenter Table (Join Table)

  • This table is automatically generated to facilitate the many-to-many relationship between Products (Dreams) and DreamCenters, allowing products to be available in multiple dream centers and vice versa.
  • It acts as a join table, containing only foreign keys that reference the primary keys (product_id and dream_center_id) of the Products and DreamCenters tables, respectively.
  • References:
    • ProductDreamCenter.product > Product.product_id // ManyToOne
    • ProductDreamCenter.dream_center > DreamCenter.dreamcenter_id // ManyToOne

Product Table

  • Central to the e-commerce functionality, listing all items available for purchase. Stores information about the products available for purchase, including association to categories and dream centers.
  • Linked to Category through a ForeignKey and to DreamCenter through a ManyToManyField (using ProductDreamCenter as an intermediary table).
  • Primary key: product_id
  • Fields: category, name, slug, description, price, size, duration, dream_center, image_url, image, available, created_at.
  • Reference: Product.category > Category.category_id // ManyToOne

Order Table

  • Tracks customer purchases, including order details, customer contact information, and financial summaries.
  • Linked to user_profile through a ForeignKey, establishing a many-to-one relationship.
  • Fields: order_number, user_profile, full_name, email, phone_number, country, date, consultation_cost, order_total, original_cart, stripe_pid.

OrderLineItem Table

  • Details the specific products and quantities within each order, linking back to the products.
  • Fields: id, order, product, quantity, lineitem_total.
  • Maintains many-to-one relationships with both Orders and Products tables through a ForeignKey.
  • References:
    • OrderLineItem.order > Order.order_number // ManyToOne
    • OrderLineItem.product > Product.product_id // ManyToOne

Contacts Table

  • Stores messages from users to the administration. Submitted messages shows in the admin interface under Contacts.
  • Links to Users and DreamCenter to identify the sender and the intended dream center, respectively.
  • Fields: contact_id, subject, email, phone_number, message, created_at.
  • References:
    • Contact.user > users.user_id // ManyToOne
    • Contact.dream_center > DreamCenter.dreamcenter_id // ManyToOne

Health Status Table

  • Contains health-related information provided by users, linked to the user profile.
  • Intended for ensuring the safety and suitability of dream experiences for each individual.
  • Fields: id, user_profile, has_epilepsy, has_heart_conditions, has_mental_illness, suffers_from_ptsd, additional_information, last_updated, declaration_truthful, created_at.
  • Reference: HealthStatus.user_profile > UserProfile.id // OneToOne

Database Relationships

  • Ref: UserProfile.user > users.user_id // OneToOne
  • Ref: Product.category > Category.category_id // ManyToOne
  • Ref: Order.user_profile > UserProfile.id // ManyToOne
  • Ref: OrderLineItem.order > Order.order_number // ManyToOne
  • Ref: OrderLineItem.product > Product.product_id // ManyToOne
  • Ref: Contact.user > users.user_id // ManyToOne
  • Ref: Contact.dream_center > DreamCenter.dreamcenter_id // ManyToOne
  • Ref: ProductDreamCenter.product > Product.product_id // ManyToOne
  • Ref: ProductDreamCenter.dream_center > DreamCenter.dreamcenter_id // ManyToOne
  • Ref: HealthStatus.user_profile > UserProfile.id // OneToOne

(back to top)

Features

Page Name Main Purpose Key Features
Landing Page Clean, welcoming background image, with only logo, enter button Full background image, logo and 'Enter Site' button
Login / Logout / Sign up Standard authentication pages provided by Django allauth. Authentication process.
Home Showcases several sections of the site with smooth scroll navigation. Banner links, 'About Us', 'Dream Center locations', 'Contact Form'.
Top Header / Navbar / Deal Bar Contains the site's logo, search form, user account and shopping cart icon, and navigation. RealDreams logo, search form, navigation links, deal bar. Collapses on mobile into burger menus.
Products List Lists Dreams with cards holding key details. Sorting by All, Categories, Size, and Prize.
Product Detail Provides detailed information about each Dream. Package size, category, duration, locations, availability, description, add to cart button, Edit/Delete for admin.
FAQs Page Answers frequently asked questions and includes a contact form. FAQ list, contact form.
User Profile with Health Status Form and Order History Displays user information, health status form, and order history. User info, health status update, list of orders with link to checkout success page.
Order History Page Displays detailed information about user orders identical to checkout success page. Order details, identical layout to checkout success.
Shopping Cart Displays selected dream products, quantities, and total amounts. Cart summary, free consultation offer for orders over €500.
Checkout Page Collects user information and payment for the order. Item list, subtotal, total, Stripe payment integration. Prefills user information if logged in.
Order Confirmation / Checkout Success Page Displays the details of a completed order and booking information. Specific order and booking information details just purchased or from the Order History section.
Add Product (Admin Site Management) Allows admin to add products to the site. Intuitive editing interface, success message upon product addition.
Edit Product (Admin Site Management) Allows admin to edit existing product information. Intuitive editing interface, Edit/Delete options, success/warning messages.
Footer Provides essential navigation links and social media connections. Privacy Policy, Terms & Conditions, Newsletter subscription, social media links.

Detailed Page Descriptions

Landing Page

An enchanting full-screen image sets the stage for the realDreams adventure. At the center, the realDreams logo and the slogan 'Where dreams become real adventures!' captivate the visitor's imagination. A solitary 'Enter Site' button beckons users to embark on their journey, leading them from this minimalist yet profound introduction to the vibrant home page of the site.

See Screenshot Landing Page

Authentication Pages (Login/Logout/Sign Up)

Utilizing Django's robust allauth package, these pages provide secure and standard authentication mechanisms, including login, logout, and registration functionalities.

See Screenshot Sign Up
See Screenshot Log In
See Screenshot Sign Out

Top Header / Navbar / Deal Bar

At the very top, the realDreams Co. logo is prominently placed, affirming the brand identity. The navigation bar is sleek and accessible, offering intuitive links to key categories, an about us section, and FAQs, all designed to guide users through the site with ease. Just below, a promotion bar announces an enticing deal, promising a free consultation on orders exceeding €500, effectively drawing attention to the value offered. The navbar adapts to mobile views with burger menus.

See Screenshot Top Header / Navbar
See Screenshot Top Header / Navbar Collapsed

Home

The Home page exudes a tranquil yet compelling atmosphere, capturing the essence of a dream ready to be embarked upon. The centerpiece of the page is a majestic, ethereal background image that transitions from a star-studded night sky into the warm hues of a sunrise or sunset, seamlessly blending the boundary between day and night. This visual metaphor is crowned with the inspiring slogan 'Launch your realDream voyage', set in an elegant typeface that resonates with the dreamlike theme.

Below the slogan, three calls-to-action stand as gateways to different journeys: discovering dreams, learning about the company's vision and values, and staying informed with the latest news. Each section is represented by a visually distinct panel.

An arrow icon pointing down suggests further content below, inviting users to continue their journey through the site. The page is meticulously designed to immerse visitors in the brand's narrative, and when clicking the arrow the user can continue down the page with a smooth scroll that introduces to the next section 'About Us' that has a 'Read More' link mechanism that expands the truncated section to provide more information. Further down shows section for Dream Center locations with Google Maps links, and below a contact form.

See Screenshot Home Page- Top
See Screenshot Home Page Mobile
See Screenshot About Us
See Screenshot Dream Center Locations
See Screenshot Contact

Products List

This page showcases Dreams through visually appealing cards that include images and essential details. Users can filter and sort these Dreams by categories, sizes, and prices, enhancing the shopping experience.

See Screenshot Products List

Product Detail

Each Dream's detail page offers in-depth information, including package size, category, duration, available locations, and availability. Features like a quantity selector and an add-to-cart button are included, with additional editing options for superusers. Feedback is provided when cart is updated with new product.

See Screenshot Product Detail

FAQs Page

Dedicated to answering frequently asked questions, this page also houses a contact form, ensuring users have all the information they need and can easily reach out for more.

See Screenshot FAQs page

User Profile with Health Status Form and Order History

A comprehensive profile page that not only displays user information and allows updates but also includes a health status declaration form. The page further lists past orders, with links to detailed order success pages. Feedback is provided for successful updates.

See Screenshot User Profile
See Screenshot User Profile Orders List

Order History Page

Replicates the checkout success page for individual orders, allowing users to review their order details with adjusted headings for context.

See Screenshot Order History

Shopping Cart

Displays the user's selected dream products, quantities, and total amounts, including a special offer for a free consultation on orders exceeding €500.

See Screenshot Shopping Cart Page
See Screenshot Shopping Cart Page - Empty

Checkout Page

A crucial page where users review their cart items and total amounts before proceeding to payment. It features a user information form, pre-filled for logged-in users, and integrates Stripe for secure payments.

See Screenshot Checkout Page

Checkout Success Page

Confirms the user's order, displaying detailed information about the purchased order. Below details is an information section about the following booking process.

See Screenshot Checkout Success
See Screenshot Checkout Success

Add Product (Admin Site Management)

Empowers administrators to add new products through an intuitive interface, with instant feedback upon successful addition.

See Screenshot Add Product
See Screenshot Add Product bottom

Edit Product (Admin Site Management)

Allows for the editing of existing product information, including deletion with an additional confirmation step for safety. Feedback is provided for successful updates or deletions.

See Screenshot Edit Product
See Screenshot Edit Product bottom

Footer

An essential navigation hub containing links to the entire site, including the privacy policy, terms & conditions, a newsletter subscription section, and social media links.

See Screenshot Footer

Error Pages 403, 404, 500

Custom error pages to enhance user experience by providing clear, helpful feedback during errors like 403 (Forbidden), 404 (Not Found), and 500 (Server Error). Prevents user confusion and guide them back to active site areas with a consistent look and feel that aligns with the site's design.

See Screenshot Error 500

Future Features

Here are some exciting features that I would like to add to the realDreams Co. in the future:

Feature Description
User Account Deletion User Story
Search Queries & Results Count User Story
Testimonials & Reviews Transparency User Story
Post Purchase Email confirmation User Story
Social Account Login Integration Enable login through social media accounts for a more seamless user experience.
Design Improvements Continual enhancements in design, including better headings and text sizing for various screen sizes.
Blog / News Section Space where users can read and post about all exiting news and experiences in this field
Extended User Profile with image Part of the user's profile is made visible to other users as a part of making the site more of a community with sharable experiences.
Add items to cart if user signs in If something is added to the user's cart when they're signed out, add the items to the cart again when user is signed in
Email confirming received contact form message The user receives an email confirming that their message was sent through the contact form.

(back to top)

Methodology

The realDreams Co. project follows a methodology inspired by agile principles, fostering collaboration, flexibility, and gradual development. The outlined approach has guided the project's evolution:

Agile Project Management with GitHub Projects

To streamline project management, GitHub Projects is employed as a central hub. User stories and tasks are structured as GitHub issues, creating an organized workflow. The GitHub project board serves as a visual representation, tracking progress effectively.

User Stories as GitHub Issues

Transforming user stories into GitHub issues captures user-centric functionalities. These issues interlink with respective user stories, simplifying access to criteria, tasks, and comments.

Bug Tracking for Seamless Development

Bugs uncovered during development are documented as GitHub issues as either "Fixed Bugs" or "Known Bugs", offering insights into each bug. By hyperlinking these issues in README.md, users can stay updated on bug resolutions and contribute insights.

Iterative Development Approach

The realDreams Co. project adheres to an iterative development approach, facilitating continuous enhancements within a predefined timeline. Despite its condensed schedule, the project accommodates future iterations and expansions.

Future Backlog and Progress

The project board efficiently manages user stories, with the "User Stories" and "Tasks" columns representing upcoming iterations. This backlog previews user stories set for subsequent development phases.

Emphasizing that the project timeline is expedited, the iterative approach maintains adaptability, enabling ongoing refinements and improvements aligned with evolving user needs.

Labels and User Story Distribution (MoSCoW):

Here's the list of the user stories, sorted according to the MoSCoW method:

Must-Have:

Should-Have:

Could-Have:

Won't-Have:

For a comprehensive view of the project's trajectory, user stories, and bug tracking, explore the Kanban board.

(back to top)

Design

The design of realDreams Co. is crafted with a blend of modernity and a surreal, dreamy essence to capture the core ethos of our brand – offering escapes into fantastical experiences.

Design Choices

Design choices were made with the intention of creating an inviting and user-friendly interface that also resonates with the theme of futuristic dreamy nostalgia, echoed in the vivid and imaginative experiences offered by our services.

Color

In creating balanced interfaces that are both visually appealing and functional, we carefully selected a color palette out of the beautiful background image of the site and it aligns with the immersive nature of our dream experiences.

The image portrays a surreal and ethereal scene, likely at either sunrise or sunset, with warm hues dominating the composition. It features a serene dreamscape where the boundaries between sky and land are blurred by a sea of clouds. The central moon, tinged with shades of pink and orange, adds to the fantastical nature of the setting, suggesting a liminal space between day and night. A solitary figure stands at the edge of an apparent precipice, gazing at the vista, while a wooden boat floats nearby, suggesting an imminent journey across this otherworldly realm. The dreamlike quality of the image with its soft, glowing colors invokes a sense of tranquility and boundless possibility.

Color Palette image Background image

Contrast and Clarity:

To ensure that our site is welcoming and navigable for all users, we incorporate high-contrast areas where clarity is paramount. The use of pure white (#FFFFFF) and deep black (#000000) for text and interactive elements like buttons and form fields is a deliberate choice to facilitate legibility and ease of use.

These colors provide the highest level of contrast, meeting and exceeding accessibility standards. This ensures that our content is perceivable to users with visual impairments and contributes to a universally user-friendly environment. Additionally, the simplicity of black and white anchors the site's navigation structure, allowing users to quickly identify pathways to their desired content without visual confusion or unnecessary complexity.

Fonts

The realDreams Co. logo combines the 'Poiret One' font's modern flair for 'real' with the boldness of 'Righteous' for 'Dreams Co.,' reflecting the brand's blend of authenticity and remarkable experiences. 'Poiret One' brings a modern touch, suggesting innovation and approachability, while 'Righteous' ensures impact, symbolizing the brand's promise of impactful, dreamlike adventures. This fusion creates a striking logo that embodies both genuine experiences and the transformative nature of the company's offerings.

realDreams logo

The theme of the realDreams Co. site is consistently woven through its use of typography. 'Poiret One' is not only part of the logo but also extends to headings and links, reinforcing the brand's modern and approachable feel. For body text, 'Roboto Condensed' is employed, ensuring readability and maintaining a sleek, streamlined look throughout the site.

Wireframes

The wireframes serve as a visual blueprint for the application. Click on each page to view the wireframe.

Landing page
Home Page
FAQs
Products
Product Details
Dream Management
Cart
Checkout
Checkout Success / Order History
My Profile

(back to top)

Technologies Used

Languages

  • HTML
  • CSS
  • Python
  • JavaScript

Frameworks

  • Django: A high-level Python web framework that encourages rapid development and clean, pragmatic design. It's used as the primary web framework for the realDreams Co. application.
  • Crispy Forms: This Django package streamlines form handling by providing tools for easy form layout and styling customization.

Database

  • ElephantSQL: A PostgreSQL as a Service platform that provides a robust, scalable database solution for the application's data needs.

Media Management Platform

  • AWS S3: An Amazon Web Services platform for object storage that scales with the application. It securely stores and manages the media used in the realDreams Co. project, ensuring fast content delivery.

Tools

  • Git: The distributed version control system used for efficiently tracking changes in the project's source code.
  • GitHub: The code hosting platform for version control and collaboration, facilitating team contributions and project management for realDreams Co..
  • Gitpod: A full-featured cloud IDE environment, streamlining the development process for this project.
  • Heroku: A cloud platform service that supports the seamless deployment and scaling of the realDreams Co. web application.
  • Adobe Photoshop: Utilized for the editing and creation of bespoke images that align with the site's aesthetics.
  • DB Diagram: A visual database design tool that helps in structuring and planning the database schema.
  • Google Fonts: Provides a wide variety of open-source typefaces, contributing to the site's visual and typographic consistency.
  • Font Awesome: Offers an extensive collection of icons, enhancing the user interface and experience of the realDreams Co. website.
  • Balsamiq: The wireframing tool of choice for outlining and planning the website's user interface design.
  • Privacy Policy Generater - Termsfeed.com: A fast and free Privacy Policy generator that provides a host-free link to the generated document.
  • Termsofusegenerator.net: A fast and free Term of Use generator that provides a host-free link to the generated document.
  • Stripe: An online payment processing platform integrated into the realDreams Co. application for secure and efficient financial transactions.

Styling

  • Bootstrap v4: The popular front-end framework is utilized for its responsive grid system and pre-designed components, aiding in crafting an intuitive and adaptive user interface for realDreams Co..

Supporting Libraries and Packages /Dependencies

  • asgiref: A foundation for asynchronous programming in Django, allowing for asynchronous request handling.
  • boto3: The Amazon Web Services (AWS) SDK for Python, used for interfacing with AWS services like S3 for media storage.
  • botocore: The low-level core functionality of boto3, upon which boto3 is built.
  • dj-database-url: Allows Django to utilize database URLs for configuration, simplifying database setup and management.
  • Django: The core web framework for the project, facilitating rapid development and clean, pragmatic design.
  • django-allauth: Provides authentication, registration, and account management functionalities for Django.
  • django-countries: A Django application providing country objects and a country field for models.
  • django-crispy-forms: Enhances form rendering in Django, enabling elegant form layouts and themes.
  • django-storages: A collection of custom storage backends for Django, including storages for AWS S3.
  • gunicorn: A WSGI HTTP server for UNIX, serving Django applications in a production environment.
  • jmespath: A query language for JSON used within boto3 to interact with AWS services.
  • oauthlib: A generic, spec-compliant implementation of OAuth for Python, used for social authentication in Django.
  • pillow: The Python Imaging Library adds image processing capabilities to your Python interpreter.
  • psycopg2: A PostgreSQL database adapter for Python, allowing Django to connect to a PostgreSQL database.
  • python3-openid: A set of Python packages to support use of the OpenID decentralized identity system.
  • pytz: A Python library that allows accurate and cross-platform timezone calculations within Django.
  • requests-oauthlib: An OAuth library for requests, used alongside django-allauth for authentication services.
  • s3transfer: A Python library for managing Amazon S3 transfers.
  • sqlparse: A non-validating SQL parser for Python, giving Django the ability to dissect and analyze SQL queries.
  • stripe: The official Stripe Python library, providing a means to integrate payment processing into Django.
  • urllib3: A powerful HTTP client for Python, utilized by boto3 for making API calls to AWS services.

(back to top)

Testing

The realDreams Co. website went through a comprehensive testing process to guarantee its functionality, accessibility, and performance. This included checking the code, such as code validation, accessibility assessment, performance testing, cross-device testing, verification of browser compatibility, assessment of user stories, and the integration of user feedback to enhance the overall user experience.

All testing was carried out and documented in testing.md.

Mockup Purchase

If you wish to make a mock purchase, you can safely use the following details:

Card Number: 4242424242424242 Exp Date: Any (future) date using the format MM/YY CVN = any 3 digit number Postcode = any 5 numerals

Any payments made using an actual payment card will fail and the card will not be charged. No orders made will be fulfilled.

(back to top)

Bugs

The bug description section have been linked with the bug issues in my documentation for better visibility. The issue numbers are clickable to get a more comprehensive bug report.

Fixed bugs ✅

Bug Description Bug Issue Link
Products not rendering in deployed site More information → #54
Product details page error 500 in production More information → #55
No line breaks in product description More information → #56
Cart does not display consultation cost at amount close to threshold More information → #57
Cart Icon total shows 100 with empty cart More information → #58
'Forgot your password' link can't be removed More information → #44
Checkout form inputs does not save to profile. More information → #60
Production e-mail settings does not work - Error 500. More information → #59
The User Story - Post Purchase Email confirmation was tried to be implemented, but no post purchase emails were sent. The feature was temporarily cut out of the code for future handling. More information → #63
Error 500 displays when anonymous user makes purchase More information → #64

(back to top)

Deployment

App Deployment

For deploying Your app, Heroku is used. Follow these steps:

Create a New App:

  • Create a new app on Heroku dashboard.

Configure Settings:

  • Navigate to "Settings" in new app.

Config Vars Setup:

  • In "Config Vars," add PORT as the key and 8000 as its value.

Add PostgreSQL Database:

  • Choose PostgreSQL as database.

    Example "ElephantSQL" was used in this project

Configure DATABASE_URL:

  • In "Config Vars," add DATABASE_URL and copy the URL from PostgreSQL dashboard.

    Note: If using ElephantSQL as PostgreSQL provider, you can use the URL provided by ElephantSQL.

Environment Variable Setup:

  • Create a new file in workspace called env.py.
  • Import the os library and set the environment variable for DATABASE_URL to the Heroku address (or ElephantSQL URL)
  • Add a secret key using os.environ["SECRET_KEY"] = "your secret key here".

Heroku Config Vars:

  • Add the secret key to the Heroku app's config vars in the settings.

Prepare Procfile & requirements.txt:

  • Create a Procfile in the root directory of your project with the following content to tell Heroku how to run your application: web: gunicorn your_project_name.wsgi.
  • Generate a requirements.txt file by running pip freeze > requirements.txt in your terminal. This file should list all Python packages that your app depends on.

Django Settings:

  • In settings.py of Django app, import Path from pathlib, os, and dj_database_url.
  • Add if os.path.isfile("env.py"): import env to the file.
  • Replace the SECRET_KEY with SECRET_KEY = os.environ.get('SECRET_KEY').
  • Replace the database section with DATABASES = {'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))}.

Migrate Models:

  • In workspace terminal, migrate the models to the new database connection.

Custom Domain configuration

  1. Register Domain:

    • Register a domain with a domain registrar (e.g., GoDaddy).

  2. Add Custom Domain in Heroku:

    • Go to the "Settings" tab of your Heroku app.
    • Scroll down to "Domains" and click "Add Domain."
    • Enter your custom domain (e.g., www.easykeyboardsmaker.com).
    • Copy the provided DNS target. It will look something like shallow-atoll-32t56jvds3s5fhf8767d9a9c.herokudns.com.

  3. Configure DNS Records:

    • Log in to your domain registrar (e.g., GoDaddy).
    • Navigate to DNS settings.
    • Add a CNAME record:
      • Type: CNAME
      • Name: www
      • Value: Paste Heroku's DNS target
      • TTL: Set to default

  4. Verify Domain Configuration:

    • Check the "Domains" section in your Heroku dashboard.
    • Wait for DNS changes to propagate (up to 48 hours).

  5. HTTP and HTTPS Forwarding (Optional):

    • Optionally, configure forwarding in your domain registrar's settings.

  6. Verify Custom Domain:

    • After DNS propagation, access your app using the custom domain.

  7. Add ACCESS_HOSTNAME to your project settings:

Version Control

To manage version control and push code to the main repository on GitHub using GitPod, follow these steps:

Add Changes:

  • In the GitPod terminal, use the command git add . to stage changes.

Commit Changes:

  • Commit changes with a descriptive comment using the command: 
    git commit -m "Push comment here"

Push to GitHub:

  • Push the updates to the repository on GitHub with the command: 
    git push

Migrate Models: - In the terminal, migrate the models to the new database connection.

Forking the Repository

By forking the GitHub Repository, can create a copy of the original repository without affecting the original. Follow these steps:

GitHub Account Setup:

  • Log into GitHub account or create one if you don't have one.

Locate the Repository:

Fork the Repository:

  • At the top right of the repository page, click "Fork" to create a copy in your own GitHub repository.

Clone of the Repository:

Creating a clone allows you to have a local copy of the project. Follow these steps:

Repository URL:

Clone the Repository:

  • Select the "Clone by HTTPS" option and copy the provided URL to the clipboard.

Terminal and Git:

  • Open your code editor or terminal and navigate to the directory where you want to clone the repository.
  • Run git clone followed by the copied URL.
  • Press enter, and Git will clone the repository to your local machine.

To fork the repository, follow these steps:

  1. Go to the GitHub repository.
  2. Click on the Fork button in the upper right-hand corner.
  3. Wait for the forking process to complete. Once done, you will have a copy of the repository in your GitHub account.

To clone the repository, follow these steps:

  1. Go to the GitHub repository.
  2. Locate the Code button above the list of files and click it.
  3. Select your preferred method for cloning: HTTPS, SSH, or GitHub CLI, and click the copy button to copy the repository URL to your clipboard.
  4. Open Git Bash (or your preferred terminal).
  5. Change the current working directory to the location where you want the cloned directory to be created.
  6. Type the command git clone followed by the URL you copied in step 3. The command should look like this: git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.
  7. Press Enter to create your local clone.

(back to top)

Credits

Here's a collection of sites that were helpful in creating this website:

Django Documentation:

The official Django documentation with guidance on models, forms, templates, and various aspects of Django development.

W3 Schools:

Geeksforgeeks:

StackOverflow:

Tutorials and YouTube channels:

Other sites:

Media

Content

  • Content for the webpage and readme-file was written together with ChatGPT

(back to top)

Acknowledgments

I'd like to give recognition to the ones who have supported me in creating this project:

  • Lauren_Nicole, my Code Institute Mentor. I cannot thank her enough for her invaluable guidance and assistance.

  • Sandra B and Kim B, who are both great critics and support pillars.

  • Code Institute and their helpful staff, especially within our great Slack community.

(back to top)

About

real-dreams-co-a66bd587b968.herokuapp.com/

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages