Skip to content

dvfrancis/craftr

BranchesTags

Repository files navigation

Craftr

Overview

Craftr (pronounced as 'Crafter') is an annual online (fictional) event dedicated to digital crafting, bringing together creative minds from around the world to explore the latest innovations in crafting technology. Held over three days every April, this year's event will take place from 21 to 23 April 2025.

Digital crafting is the fusion of technology with creativity, enabling individuals to design and make unique projects with precision and innovation. This evolving field spans a variety of crafts, including:

  • Paper and Card - ranging from scrapbooking to personalised greeting cards.

  • Vinyl and Decal - stickers, signage, decals, and vinyl applications.

  • Graphic Design - custom artwork for t-shirts, drinkware, and other items.

  • Fabric - intricate embroidery, textile design, and fabric embellishments.

  • 3D Modelling - digital sculpting that brings ideas to life.

  • Laser Cutting - creating, cutting, and embellishing unique designs for anything including jewellery, signage, and other items.

To achieve professional results, many digital crafters utilise cutting machines such as those produced by Cricut and Silhouette, or even laser cutters like Glowforge, to create intricate and precise designs that can be applied to a variety of materials.

This website serves as the central hub for the Craftr event, providing information about the event, allowing participants to create accounts, browse, and register for available classes. Whether a beginner looking to experiment with digital crafting or an expert seeking new techniques, Craftr is the perfect platform for anyone to connect, learn, and create.

Site Preview

A preview of the Hi-Lo website at various screen sizes

Site Link

The live site is hosted by Heroku.

GitHub Repository

Click here to access the GitHub repository.

Index

  1. Overview
    1. Site Preview
    2. Site Link
    3. GitHub Repository
  2. User Experience Design
    1. Project Board
    2. Strategy
      1. Key Business Goals
      2. Key User Goals
      3. User Experience
      4. User Expectations
      5. User Stories
      6. User Personas
    3. Scope
      1. Existing Features
      2. Future Features
    4. Structure
      1. User Flow Diagram
      2. Database Architecture
        1. C R U D Fulfilment
    5. Skeleton
      1. Wireframes
        1. Mobile
        2. Tablet
        3. Desktop
    6. Surface
      1. Colours
      2. Typography
      3. Media
      4. Content
  3. Testing
  4. Technologies Used
  5. Deployment
    1. Database Creation
    2. Local
    3. Heroku
  6. Credits and References
  7. Acknowledgements

User Experience Design

Project Board

  • A GitHub project board was used throughout the implementation process to keep track of all project-related tasks, such as adding features, handling bugs, and fulfilling user stories.

    Click to view a screenshot of the project board

    Project board

  • Each task was categorised with the relevant milestone and labels (including MoSCoW categorisation).

  • The MoSCoW prioritisation of all 89 tasks in the project is split as follows:

Type Total % Total
Must Have 27 30%
Should Have 6 7%
Could Have 0 0%
Won't Have 4 5%
Not Categorised 52 58%
TOTALS 89 100%

These figures are well within the usual "60% Must Haves / 20% Should Haves / 20% Could Haves" percentage split.

Click to view a screenshot of a project task

Project task

Strategy

Key Business Goals

  • Attract crafters of all levels to participate, learn something new, and share their positive experiences of the event.
  • The organisers of the event will see value from increased numbers of people visiting the website, the positive word-of-mouth generated, and more sign-ups to their mailing list.
  • The home page will engage visitors' interests, while encouraging them to sign up for one or more of the classes being run across the event.

Key User Goals

  • The potential to learn a new craft, or something new about a craft with which they are familiar.
  • Enjoy a positive and useful experience without having to spend any money.
  • Link up with like-minded people through social media, to share their thoughts on the event.

User Experience

  • Target audience:
    • Anyone 13 or older who enjoys using technology and being creative.
    • Teenager, student, employed, or retired.
    • Has an interest in arts and crafts.
    • Those with an interest in the potential of taking a hobby and turning it into a source of income.
    • Someone looking for a productive but relaxing way to spend their free time.

User Expectations

  • The website:
    • is intuitive, accessible, responsive, and easy to navigate.
    • has a design that visitors will immediately understand, and be able to use; for example, HTML elements behave in the way most people would expect.
    • contains useful information that will prompt a visitor to sign up for classes.
    • is designed to appeal to those who are creative, and possibly enjoy crafting, and help them feel comfortable and welcome.
    • allows a user to register their details so that they can bookmark or register for interesting classes.

User Stories

First time visitor goals
  • "What is Craftr about?”
  • “What training is being given?”
  • "When do the classes happen?"
  • “How do I sign up?”
Returning visitor goals
  • “What other classes am I interested in attending?”
  • "When is my class due to start?"
  • "Where can I keep track of the classes I've signed up for?"
Frequent visitor goals
  • “Who running my class?”
  • "How do I cancel my class enrolment?"
  • "How can I contact the organisers of this event?"

User Personas

The website is designed to appeal to all demographics, but the following personas are meant to represent a range of potential users:

  • User 1: Female aged 20-50, enthusiast who wants to develop her crafting skills, loves creating things, unsure where to start.
  • User 2: Male aged 18-35, looking for a way to relax, enjoys new hobbies, limited knowledge about the subject.
  • User 3: Female aged 25-45, looking for free training, enjoys connecting with others, hasn't been able to find many beginner-friendly workshops.
User 1

“I really enjoy crafting but I'm not sure how to improve my abilities.”

Acceptance Criteria
  • Ensure users of all skill levels (beginner to advanced) find suitable classes (see issue #55) .
  • Provide an intuitive way to navigate the site and discover content (see issue #56).
  • Enable users to create accounts and track enrolments (see issue #59).
Tasks
  • Label each class with its appropriate skill level.
  • Design an intuitive navigation menu for easy browsing.
  • Develop a user-friendly account creation and class tracking system.
User 2

“I came across this website by accident, it looks really interesting. Where do I start?”

Acceptance Criteria
  • Make diverse craft types visible and engaging on the homepage (see issue #57).
  • Ensure information is easily accessible for first-time visitors (see issue #58).
  • Create an inviting and user-friendly interface (see issue #57).
Tasks
  • Design an engaging homepage that showcases various craft types.
  • Ensure class details are prominently displayed and easy to locate.
  • Develop a clean and welcoming website layout.
User 3

“I'm seeking accessible training courses that I can attend with confidence.”

Acceptance Criteria
  • Ensure class information is detailed and easily accessible (see issue #60).
  • Clearly outline instructor details and course descriptions (see issue #60).
  • Make sharing information simple and effective (see issue #54).
Tasks
  • Maintain a well-organized and searchable class directory.
  • Provide comprehensive course descriptions, including instructor details.
  • Implement easy-to-use social media sharing features.

Scope

Existing Features

  • Please note that all screenshots (unless otherwise stated) are taken from the desktop version of the website.

  • General

    • The site should adjust to different screen sizes responsively.

    • It should be identifiable via the favicon shown in the browser tab. When bookmarking the site, this favicon appears next to the bookmarked link making it easily recognisable among other bookmarks:

      Click to view the site favicon, in the browser tab

      Website favicon

  • Header

    Click to view the site header as it appears on a desktop device

    Desktop website header

    Click to view the site header as it appears on a mobile device

    Mobile website header

    • The header stays fixed to the top of the window, allowing visitors to see the navigation bar at all times. This lets the visitor know where they are (links remain highlighted when that page is currently displayed). The high contrast between the text and the header means it is both stylish and easy to read.
    • The website logo is also shown in the header, reinforcing the site branding in the mind of the visitor.
    • Visible navigation links:
      • Home - brings the user to the home page, which has links to register for an account, or see a list of all classes across the event. It also has a 'Featured Classes' section to whet the visitor's appetite.
      • Classes - takes the use to a list of classes that are running across the event.
      • FAQ - a page of frequently asked questions about the event.
      • Contact - allows messages to be sent to the organisers.
      • Register / Login (changes to Account when a user is logged in) - users can create an account on the site from this page, and then use that account to enrol for particular classes.
    Click to view navigation bar when a user is logged in

    Navigation bar when a user logged in

    • Hidden navigation links:
      • Base Template - contains the code for the header and the footer and is used by all pages, which helps reduce duplication of code. It is not directly accessible to a website user.
      • Details - shown when a user is on the classes page and clicks the 'Details' button. It contains information specific to a chosen class, which is generated automatically from information stored in the database.
      • Account - shown when a user has created an account, or logs in successfully. It allows them to view all of their class enrolments, edit their profile, or delete their account.
      • Update Profile - shown when a user clicks 'Edit' on their account page. They can update any of the information held about them on the site.
      • 404 Error - shown when a visitor attempts to access a non-existent page. It is not directly accessible to a website user.
      • 500 Error - shown when a the web server encounters an problem. It is not directly accessible to a website user.

  • Footer

    Click to view the site footer as it appears on a desktop device

    Desktop website footer

    Click to view the site footer as it appears on a mobile device

    Mobile website footer

    • The footer remains at the bottom of all screens, underneath any website content.
    • It contains copyright information, and also the social media buttons.

  • Home (index.html)

    Click to view the home page

    Website home page

    • The home page gives background on the Craftr event, and acts as an introduction to those who know nothing about it.
    • The hero section at the top of the page includes buttons that take visitors to register for an account or to view the classes that are scheduled during the event.
    • It teases the visitor with a selection of 'Featured Classes' to entice them into registering and enrolling in some of them.

  • Diary of Classes (diary.html)

    Click to view the diary of classes

    Website classes page

    • The diary page lists every class happening during the event, organised by date and time.
    • It encourages visitors to click on a specific class and view it in further detail.

  • Class Details (details.html)

    Click to view the class details page

    Website class details page

    • When someone clicks on the 'Details' button on the diary of classes, it brings them to a specific page that gives in-depth information about that particular class. Information includes when the class will run, an indication of difficulty level, and an overview of what will be covered. It also includes information about the instructor of the class, and their biography.
    • When not logged in, the buttons on the page are 'Login' and 'Register' to encourage sign-up. If a user clicks 'Login' it takes them to the login page to enter their username and password and, upon successful login, returns them to the class page to allow them to enrol for the class.
    • If a user clicks 'Register', it takes them to a page to create a new account, before returning them to the class page (to be able to enrol).
    • When logged in, the buttons change to 'Enrol' and 'Back to Diary'.
    Click to view buttons when user is logged in

    Buttons when user logged in

    • If a user clicks 'Enrol' their account is updated accordingly (see 'User Account' further down) and the button changes to 'Withdraw', allowing them to change their mind if so desired.
    Click to view buttons when user logged in and enrolled

    Buttons when user logged in and enrolled

  • FAQ (faq.html)

    Click to view the faq page

    Website faq page

    • The FAQ page contains commonly asked questions for the event presented in a responsive accordion.
    • If the visitor cannot find an answer, it encourages them to get in touch via the contact page.

  • Contact Form (contact.html)

    Click to view the contact page

    Website contact page

    • Incorporates a standard contact form for visitors to send messages to the organisers of the event.
    • When they send a message an email is sent to the organisers automatically with all the details.
    • This information is also stored in the database for later reference, if required.

  • User Registration (register.html)

    Click to view the registration page

    Website registration page

    • The user registration page allows a visitor to create an account that they can then use to enrol on specific classes.
    • It asks for name, email, location, and experience level, with the option to add a photograph if they want to.
    • The website does not allow them to pick a username that conflicts with an existing user.
    • The site also has standard email and password validation, so that only valid information can be entered
    • Once an account has been created, the user is logged in automatically.
    • If another user is already logged in, they are logged out beforehand.
    • If a mistake is made on the form, the user can click 'Clear' to remove any information entered.

  • User Login (login.html)

    Click to view the login page

    Website login page

    • The user login page allows visitors with user accounts to login and view their account and class enrolments.
    • It also has a link for a new user to register an account.

  • User Account (account.html)

    Click to view the account page

    Website account page

    • The user account page displays all of the user's information entered when the account was created.
    • The 'Edit' button takes the user to a screen where they can update any of the personal information stored about them.
    • The 'Delete Account' button allows the user to remove their account entirely. They are asked if they are sure they want to delete their account. If they do, then their account is deleted along with any class enrolments. This button does not appear for accounts with 'superuser' permissions, so that the organisers (who would be superusers) are not accidentally locked out at any time. After the account is deleted they are automatically redirected to the home page.
    • A user can also see a list of all the classes that they're enrolled on.
    • Users can 'Withdraw' from a class, or see 'Details' about any class they have enrolled on, by clicking the corresponding button beneath the enrolment. The list of enrolments updates dynamically if a user withdraws from a class (this can be seen at the bottom of the screenshot above).

  • Update User Profile (update_profile.html)

    Click to view the update profile page

    Website update profile page

    • The update user profile page allows the user to amend any of the information held about them.
    • If they change their mind, they can click 'Cancel' and be returned to their account page.
    • If they make a mistake on the form, they can click 'Clear' to revert to the information currently stored in the database.

  • Error 404 (404.html)

    Click to view the 404 error page

    Website 404 error page

    • This page is displayed if a visitor attempts to navigate to a non-existent page.
    • It contains buttons to go to the home page, or return to whatever page they were previously viewing.
    • The visitor is also still able to click on any of the other navigation buttons to take them somewhere else.

  • Error 500 (500.html)

    Click to view the 500 error page

    Website 500 error page

    • This page is displayed if there is an internal server error.
    • It contains buttons to go to the home page, or return to whatever page they were previously viewing.
    • The visitor is also still able to click on any of the other navigation buttons to take them somewhere else.

Future Features

  • This is a list of features that would have been nice to include in this project, but were not due to time constraints.
Issue Item Description
#85 Instructor portal Add the ability for instructors to create and edit classes
#86 Premium classes Add the ability to create premium paid classes that people could opt in to through a monetary purchase (which would require the ability to take payments)
#66 Customise the Django administration portal Update the admin portal to match the style of the site
#19 JavaScript logic flowcharts If the site were to expand with further features then it would probably require more JavaScript and, therefore, process breakdowns

Structure

User Flow Diagram

Click to view the user flow diagram

User flow diagram

User routes through the site have been plotted as a user flow diagram; pathways can be compulsory or optional, which is shown on the diagram.

Database Architecture

Click to view the entity relationship diagram (ERD)

Craftr ERD

PostgreSQL was used to store the database for the site, and the ERD was created using Figma.

Data Models

  1. User

Django's User model was used for the creation of user accounts (and is extended by UserProfile). It is not a requirement for account creation that the email be confirmed.

Description Key Type Name Field Type Validation
Username Key username CharField Django ensures username is unique and limited to 150 characters
Password Key password CharField Django provides built-in validation for password, which can be customised via settings.py
First Name Key first_name CharField Django ensures first_name is limited to 150 characters
Last Name Key last_name CharField Django ensures last_name is limited to 150 characters
Email address Key email EmailField Django provides built-in validation for email
  1. UserProfile

Custom model that extends Django's User model by adding site-specific fields.

Description Key Name Field Type Validation
Username Foreign username CharField Linked to the User model, in a 1-2-1 relationship
Location Key location CharField max_length=100. Field required through validation by def clean(self)
Experience Level Key experience ChoiceField choices=EXPERIENCE_CHOICES, default=BEGINNER, max_length=12. Field required through validation by def clean(self)
User Photograph Key photograph CloudinaryField default='placeholder', blank=True, null=True 
# Define the choices for experience levels
BEGINNER = 'Beginner'
INTERMEDIATE = 'Intermediate'
ADVANCED = 'Advanced'

EXPERIENCE_CHOICES = [
    (BEGINNER, 'Beginner'),
    (INTERMEDIATE, 'Intermediate'),
    (ADVANCED, 'Advanced'),
]
  1. EventDay

Custom model that stores the days on which the event runs. Class Meta options ensure the day title is unique regardless of case sensitivity.

Description Key Name Field Type Validation
Unique Field Primary id AutoField primary_key=true (the model had a conflict with the built-in primary key, so I added this as an alternative)
Date Foreign day_date DateField Linked to the EventClass model, in a one-to-many relationship. Field required through validation by def clean(self)
Title Key day_title CharField max_length=100, unique=True. Field required through validation by def clean(self)
Description Key day_description TextField
  1. EventClass

Custom model that lists the classes that run across the entire event. Class Meta options ensure that multiple classes cannot be scheduled at the same time.

Description Key Name Field Type Validation
Date Foreign event_day DateField Linked to the EventDay model, in a many-to-one relationship
Start Time Key start_time TimeField start_time cannot be later than end_time as validated by def clean(self)
End Time Key end_time TimeField
Title Key class_title CharField max_length=100
Description Key class_description TextField
Difficulty Key difficulty ChoiceField choices=DIFFICULTY_CHOICES, default=BEGINNER, max_length=12
Image Key class_image CloudinaryField default='class_placeholder', blank=True, null=True
Instructor Key instructor CharField max_length=100
Instructor Photo Key instructor_photo CloudinaryField default='instructor_placeholder', blank=True, null=True
Instructor Biography Key instructor_bio TextField 
# Define the choices for difficulty levels
BEGINNER = 'Beginner'
INTERMEDIATE = 'Intermediate'
ADVANCED = 'Advanced'

DIFFICULTY_CHOICES = [
    (BEGINNER, 'Beginner'),
    (INTERMEDIATE, 'Intermediate'),
    (ADVANCED, 'Advanced'),
]
  1. Enrolment

Custom model that tracks which classes different users are enrolled upon. Class Meta options ensure users cannot enrol on the same class multiple times.

Description Key Name Field Type Validation
Username Foreign username CharField Linked to the User model, in a many-to-one relationship on_delete=models.CASCADE, related_name="enrol_status"
Class Title Foreign class_title TextField Linked to the EventClass model, in a many-to-one relationship on_delete=models.CASCADE, related_name="enrolments"
  1. Contact

Custom model that stores any messages sent through the contact form, for later reference.

Description Key Name Field Type Validation
First Name Key first_name CharField max_length=100
Last Name Key last_name CharField max_length=100
Email Key email EmailField Django provides built-in validation for email
Message Key message TextField
Creation Date/Time Key created_at DateTimeField auto_now_add=True

C R U D Fulfilment

In it's current form, the classes scheduled during the event are only editable via the admin portal, by an account with superuser privileges.

However, the website still satisfies full Create (C), Read (R), Update (U), and Delete (D) functionality, in the following ways:

  • C - Create a user account / Create a class enrolment
  • R - Read the list of classes available / Read changes to a user profile / Read class enrolments on a user's account page
  • U - Update user profile details
  • D - Delete a user account (and associated user profile) / Delete a course enrolment

Skeleton

Wireframes

The wireframe designs shown below were my initial ideas for each page of the website (listed by device type). They have changed in a few ways during implementation; for example, the 'Diary' menu link is now called 'Classes'.

Mobile

Home
Click to view the mobile device home wireframe

Mobile home page wireframe

Classes
Click to view the mobile device classes wireframe

Mobile game page wireframe

Class Details
Click to view the mobile device class details wireframe

Mobile FAQ page wireframe

FAQ
Click to view the mobile device faq wireframe

Mobile FAQ page wireframe

Contact
Click to view the mobile device contact wireframe

Mobile FAQ page wireframe

User Registration
Click to view the mobile device user registration wireframe

Mobile FAQ page wireframe

User Login
Click to view the mobile device user login wireframe

Mobile FAQ page wireframe

User Account
Click to view the mobile device user account wireframe

Mobile FAQ page wireframe

Update User Profile
Click to view the mobile device update user profile wireframe

Mobile FAQ page wireframe

404 HTTP Error
Click to view the mobile device custom error wireframe

Mobile custom error page wireframe

500 HTTP Error
Click to view the mobile device server error wireframe

Mobile custom error page wireframe

Tablet

Home
Click to view the tablet device home wireframe

Tablet home page wireframe

Classes
Click to view the tablet device classes wireframe

Tablet game page wireframe

Class Details
Click to view the tablet device class details wireframe

Tablet FAQ page wireframe

FAQ
Click to view the tablet device faq wireframe

Tablet FAQ page wireframe

Contact
Click to view the tablet device contact wireframe

Tablet FAQ page wireframe

User Registration
Click to view the tablet device user registration wireframe

Tablet FAQ page wireframe

User Login
Click to view the tablet device user login wireframe

Tablet FAQ page wireframe

User Account
Click to view the tablet device user account wireframe

Tablet FAQ page wireframe

Update User Profile
Click to view the tablet device update user profile wireframe

Tablet FAQ page wireframe

404 HTTP Error
Click to view the tablet device custom error wireframe

Tablet custom error page wireframe

500 HTTP Error
Click to view the tablet device server error wireframe

Tablet custom error page wireframe

Desktop

Home
Click to view the desktop device home wireframe

Desktop home page wireframe

Classes
Click to view the desktop device classes wireframe

Desktop game page wireframe

Class Details
Click to view the desktop device class details wireframe

Desktop FAQ page wireframe

FAQ
Click to view the desktop device faq wireframe

Desktop FAQ page wireframe

Contact
Click to view the desktop device contact wireframe

Desktop FAQ page wireframe

User Registration
Click to view the desktop device user registration wireframe

Desktop FAQ page wireframe

User Login
Click to view the desktop device user login wireframe

Desktop FAQ page wireframe

User Account
Click to view the desktop device user account wireframe

Desktop FAQ page wireframe

Update User Profile
Click to view the desktop device update user profile wireframe

Desktop FAQ page wireframe

404 HTTP Error
Click to view the desktop device custom error wireframe

Desktop custom error page wireframe

500 HTTP Error
Click to view the desktop device server error wireframe

Desktop custom error page wireframe

Surface

Colours

Click to view the website colour scheme

Website colour scheme

  • Website colours were inspired by the Sarah Renae Clarke Colour Catalogue (Volume 2), card 390:

    • Apple Green (#7db657) - this was darkened to #2e6b05, later in the project, due to poor colour contrast
    • Mint (#0091ac) - this was darkened to #006274, later in the project, due to poor colour contrast
    • Royal Purple (#753da2)
    • Crimson (#b40001)
    • Orange (#ff8500) - this was darkened to #a55500, later in the project, due to poor colour contrast
    • Gold (#ffc500)

  • Other colours used:

    • Off-White (#fafafa)
    • Off-Black (#191945)

  • For buttons, colours were divided depending on intended action:

    • Apple Green for Save / Register / Submit / Enrol actions
    • Royal Purple for Edit / Details / Home / Diary / Login actions
    • Mint for Clear actions
    • Orange for Logout / Withdraw actions
    • Crimson for Reset / Delete / Cancel / Go Back actions

Typography

All fonts were sourced from Google Fonts, and were used as follows:

Media

The following images are only used when no class, instructor, or user image has been uploaded:

Content

Microsoft CoPilot was used to generate initial content, which I then reviewed and refined - making adjustments to ensure it was well-suited to the site’s specific needs and tone.

Testing

Technologies Used

Deployment

PostgreSQL Database Creation and Management

Create a database at PostgreSQL from Code Institute; you will be emailed the database URL once this is completed:

Click to view step one of database creation

PostgreSQL from Code Institute - Step 1

Click to view step two of database creation

PostgreSQL from Code Institute - Step 2

Click to view step three of database creation

PostgreSQL from Code Institute - Step 3

This database can be managed at CI Database Maker, which gives the option to view further information the databases you've created (it also gives you the option to delete them).

Click to view initial login page

CI Database Maker - Login

Click to view management informational page

CI Database Maker - Management Page

Local deployment

Copy the GitHub repository locally in one of two ways:

  1. Download a ZIP file from the GitHub repository page, and extract to a folder on your local computer, or
  2. Clone the repository using the git clone command followed by the repository clone link; for example:
    • git clone https://github.com/dvfrancis/craftr.git

  • Once this has been done, open a terminal window and install all requirements using the command:

    • pip3 install -r requirements.txt

  • In the root of the project folder, create a .gitignore file, and add env.py and __pycache__ to protect sensitive data.

  • Add the following information to env.py:

     import os

   os.environ['SECRET_KEY'] = 'Add your database secret key'
   os.environ['DATABASE_URL'] = 'Add your database URL'
   os.environ['DEBUG'] = 'Set this to True'

While developing leave DEBUG=True, but remember to change it to DEBUG=False when you deploy your final project

  • Run the following commands to push everything to the database:

        python3 manage.py makemigrations
    python3 manage.py migrate

  • Now create the superuser account (completing the necessary information when prompted):

    • python3 manage.py createsuperuser

  • Run the webserver:

    • python3 manage.py runserver

  • Ctrl + click (Cmd + Click on a Mac) the link to open the website.

  • Add /admin to the end of the URL to enter the administration panel. You will need to enter the details for the superuser you created earlier.

  • You will now be able to see the admin portal, and add, amend, or delete users.

Heroku Deployment

  • Ensure that you have pushed any changes to your GitHub repository.

  • Visit the Heroku website, and create an account (if you don't already have one).

  • Login, and create a new app.

  • In your local environment create a Procfile in the root of your project folder, and add the following to it (remember to push changes to GitHub afterwards):

         web: gunicorn <your app name>.wsgi:application

  • Inside your Heroku app, click Settings, then click Reveal Config Vars, and add the following:

Key Value
DISABLE_COLLECTSTATIC 1
DATABASE_URL Your database URL
SECRET_KEY Your database secret key
EMAIL_USER Email address from your email provider
EMAIL_PASSWORD Email password from your email provider

  • Ensure that DATABASE_URL, SECRET_KEY, EMAIL_USER, and EMAIL_PASSWORD are added to your local env.py file in the following format (substituting KEY and VALUE for the relevant information):

        os.environ.setdefault("KEY",("VALUE"))

  • You may also need to add additional key / value pairs if you are using additional services, such as Cloudinary to serve images for your website.

  • Migrate changes to your database:

        python3 manage.py makemigrations
    python3 manage.py migrate

  • In settings.py, set DEBUG=False, and push changes to GitHub.

  • In your Heroku app's Deploy settings, connect your repository, and click Deploy Branch to deploy the app (you can also set it to automatically deploy when changes are made to the repository, if desired).

  • You will see the deployment building at the bottom of your Heroku app's Deploy settings page.

  • When you are ready to finalise your project, set DEBUG=False in your local settings.py file, and delete DISABLE_COLLECTSTATIC from the Heroku app's config variables.

  • Commit any changes to GitHub, and deploy from Heroku as before.

Credits and References

Acknowledgements

  • Andrew Parton, for his ongoing support.
  • Juliia Konovalova, for pushing me to achieve my best (even when I wasn't in the mood 😁).

About

Code Institute Milestone Project 3

craftr-bfd2923e1ca4.herokuapp.com

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages