teresabowe / booking-system

0 stars 1 forks source link

Office Space Booking - Smithfield Square

This booking site allows registered users to create bookings to secure office space. The user can also view, update and delete their bookings. The user can choose from available office space only. Both desks and meeting rooms are available for booking. The administrator can view, create, update and delete available office space resources.

Responsive Mockup

The live site is available for use on Heroku.

UX

Strategy

Agile

This project uses the Agile methodology presented on the GitHub platform. There are seven epics shown as milestones and 14 user stories shown as issues in GitHub. These user stories are split into three project iterations. The aim is to deliver a usable product at the end of each iteration.

Project Goal

The goal of the project is to create a website to allow users to book their desks or meeting rooms in a shared office space. It was inspired as a result of the increasing use of flexible workspaces by companies.

A typical user is someone:

Key features identified are:

Scope

The initial scope for this project is documented below in the epics and stories. Each user story has a flag indicating prioritisation and implementation status. There is also a link to each user story in GitHub. The scope at the project planning stage was quite broad and incorporated a user front end for the office manager and additional user profile features. These features are not currently present but will be implemented in future iterations of the project.

Epics and User Stories

Epic: Initial Project Setup

User Stories:

Epic: Setup Site Administration to Manage Desks and Bookings

User Stories:

Epic: User Authentication

User Stories:

Epic: Create Landing Page

User Story: As a site visitor, I can access the landing page so that I can understand the purpose of the site and take appropriate actions (must-have/complete) #5

Epic: User Bookings Management

User Story:

Epic: Office Manager Desk Administration and Reporting

User Stories:

Epic: User Account Management

User Stories:

Structure

The website has five user pages currently. There is a home page that is open to all users both registered and non-registered. The bookings page can only be accessed by registered users. Here it is possible to add, update and delete bookings. There are also registration, login, and logout pages.

The main flow for the bookings page is shown below.

Responsive Mockup

Skeleton

Wireframes

The Bootstrap carousel example was considered for use and chosen for use early in the project. The wireframes were drawn up with some adjustments which include square images underneath the carousel. The final deployment of the website has centered links on the navigation bar and a user status for login on the right side. A custom logo was also created for the home page link on the left side of the navigation bar.

Desktop Home Page

Entity Relationship Diagram

Bookings List Page

Entity Relationship Diagram

Mobile Pages

Entity Relationship Diagram

Database Schema

There are two custom models in the database schema, a desk model and a bookings model. The desk model records all of the available desks and meeting rooms. The bookings model handles the user bookings for the office spaces. The django-allauth application manages the account registration and authentication so a custom model is not required in this instance.

Entity Relationship Diagram

Surface Design

The overall design aims to present a simple, clean website which demonstrates that the overall purpose is to book office space. A carousel example template from Bootstrap 4.1 was used as the starting point for developing the templates for the project.

Colours

Once the landing page carousel image was chosen, it was uploaded to the Coolers colour palette generator to develop the colour scheme. This colour scheme was then applied to elements of the landing and booking pages.

Coolors Palette

Typography

The Bootstrap landing page html links directly to the core CSS files. The font family holds several font names so it can act as a fall back system depending on the browser used. The default font family applied for this website includes the following:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

Images

The office-related images chosen for the website aim to show that there is a wide variety of modern office space types available. Workers can collaborate in open workspaces, meet in more private settings, and work alone in shared office spaces. The location-based images show how these office spaces are located close to public transport links and restaurants.

Features

Existing Features

Navigation Bar

The navigation bar is present on all pages. It remains at the top of the page at all times to allow the user to navigate easily around the site.

Along with being a marketing tool, the company logo serves as a home page link.

Navigation Bar

All visitors both registered and unregistered are initially presented with an opportunity to register and login. The Login button is highlighted in green so there is a clear call to action for registered users to login. The user status on the right side shows a logged-out status.

Navigation Bar

The registered logged-in user is presented with an opportunity to visit the bookings page and logout. The user status on the right side shows a logged-in status.

Navigation Bar

The mobile view for the navigation bar shows a hamburger menu.

Mobile Navigation Bar

The dropdown changes depending on whether the user is logged in or logged out.

Mobile Navigation Bar Logged Out

Mobile Navigation Bar Logged In

Footer

The footer is present on all pages. There is an opportunity presented here to call, email, or contact the company on social media platforms.

Footer

Carousel

There are three slides in the carousel and all have a clear call to action for the user depending on the user's status.

On slide one, the unregistered or logged-out visitor is presented with an opportunity to login. The call to action button for login is green. The user must enter their username and password to login.

Carousel Slide One

If the user is unregistered the login page shows a link for the user to register.

On slide two, all users regardless of their registration status are presented with an opportunity to have a look at the office spaces available. The options call to action button is green in colour.

Carousel Slide Two

If the user is unregistered or logged out the call to action button here will prompt the user to login.

Logged Out Office Space Options

If the user is registered and logged in the call to action button here will prompt the user to visit the bookings page.

Logged In Office Space Options

On slide three, all users regardless of their registration status are presented with an opportunity to have a look at the location details of the offices and the various transport and dining services close by. The call to action button for location link is green.

Carousel Slide Three

User Authentication

To make a booking on the site all users must register on the site. The user must enter an email address, username, and password to register.

User Registration

Once the user has registered, a message will confirm registration and logged-in status.

User Registration Confirmation

The navigation bar will also show the logged-in status of the user.

Logged In User Status

To login at any time, the user will be prompted to enter a username and password.

User Login

Once the user has logged in, a message will confirm the logged-in status.

User Login Confirmation

To logout, the user will be asked to confirm that they wish to logout.

User Logout

Once the user has logged out, a message will confirm the logged-out status.

User Logout

The navigation bar will also show the logged-out status of the user.

Logged Out User Status

Bookings

The user must be logged in to access the bookings page. The page can be opened from the navigation bar. It is also available on the green call to action button on slide one of the carousel and again if the logged-in user is viewing the office space options on the home page.

The bookings are presented in ascending date order. There are options to add a booking, edit a booking and delete a booking on this page. To add a booking the user clicks on the green plus sign beside the add a booking heading. A booking can be edited by clicking on the pencil-square blue button beside the booking. A booking can be deleted by clicking on the x-circle button beside the booking.

Bookings Page

On the add booking screen, the user must select the booking date and then choose the desk or meeting room they wish to book. Only available desks and rooms will be shown on the dropdown list. Multiple bookings are allowed for the same day as a user may wish to book both a desk and a meeting room on the same day.

Add Booking Page

Once the booking is saved, a message will confirm the booking is added.

Add Booking Confirmation

When the user selects to edit a booking, they can select the new desk or office from the dropdown menu. It is also possible to change the date on the booking along with the desk or office. Once the date is selected, the database is checked for available desks and offices on the date. The dropdown menu is only presented after this database check is completed.

Edit Booking

Once the booking is saved, a message will confirm the booking is updated.

Edit Booking Confirmation

To delete a booking on the delete booking screen, the user must click on the confirm button.

Delete Booking

Once the booking is confirmed for deletion, a message will show that the booking is deleted.

Delete Booking Confirmation

Future Features

The following features will be delivered in future iterations of the project.

Technologies Used

Languages

Frameworks

Database

Other

Testing

Automated Testing

Details of automated testing with coverage of 91%. To setup the local environment for testing, the following adjustment was made to the settings.py file ![Change settings.py](/documentation/screenshots/settings-py-for-testing.png) Also, the following was added to the env.py file: ![Change env.py](/documentation/screenshots/env-py-for-testing.png) When not testing, os.environ["DEVELOPMENT"] can be changed back to "False". The coverage report for automated testing is as follows: ![Coverage Report](/documentation/screenshots/coverage-report.png)

Manual Testing

User Story Testing Epic: Setup Site Administration to Manage Desks and Bookings To start testing, complete the following steps: 1. Go to the application web page on ** link 2. Select Login from the navigation bar 3. Login in as admin 4. Go to the application web page for the admin ** link User Story: As a site administrator, I can CRUD desks so that I can manage site content #3 **Add a desk** Testing procedure: 1. Click on the Add button beside Desks 2. Enter the Desk, Floor, and Description 3. Click on the SAVE button ![Add Booking](/documentation/screenshots/site-administration-desk-add.png) Expected Result: A new desk is created and is visible on the site administration desk list Actual Result: A new desk is created and is visible on the site administration desk list ![Add Booking](/documentation/screenshots/site-administration-desk-add-list.png) Pass/Fail: Pass **Update a desk** Testing procedure: 1. Click on the Desk D3001 from the site administration desk list 2. Change the description from 'Window Desk on 3rd Floor' to 'Window Desk' 3. Click on the SAVE button ![Add Booking](/documentation/screenshots/site-administration-desk-update.png) Expected Result: The desk is updated and is visible with the new description on the site administration desk list Actual Result: The desk is updated and is visible with the new description on the site administration desk list ![Add Booking List](/documentation/screenshots/site-administration-desk-update-list.png) Pass/Fail: Pass **Delete a desk** Testing procedure: 1. Click on the Desk D3001 from the site administration desk list 2. Click on Delete 3. Confirm deletion ![Delete Booking](/documentation/screenshots/site-administration-desk-delete.png) ![Delete Booking Confirmation](/documentation/screenshots/site-administration-desk-delete-confirmation.png) Actual Result: The desk is no longer visible on the site administration desk list Expected Result: The desk is no longer visible on the site administration desk list ![Delete Booking List](/documentation/screenshots/site-administration-desk-delete-list.png) Pass/Fail: Pass ** User Story: As a site administrator, I can CRUD bookings so that manage my customer's needs #4 **Add a booking** Testing procedure: 1. Click on the Add button beside bookings 2. Enter the Desk booking date, Desk, and Desk user 3. Click on the SAVE button ![Delete Booking List](/documentation/screenshots/site-administration-booking-add.png) Expected Result: A new booking is created and is visible on the site administration desk list Actual Result: A new booking is created and is visible on the site administration desk list ![Delete Booking List](/documentation/screenshots/site-administration-booking-add-list.png) Pass/Fail: Pass **Update a booking** Testing procedure: 1. Click on the Desk D2004 for 22/12/2022 from the site administration bookings list 2. Change the Desk booking date from 22/12/2022 to 23/12/2022 3. Click on the SAVE button ![Update Booking](/documentation/screenshots/site-administration-booking-update.png) Expected Result: The updated booking is updated and is visible on the site administration desk list Actual Result: The updated booking is updated and is visible on the site administration desk list ![Update Booking List](/documentation/screenshots/site-administration-booking-update-list.png) Pass/Fail: Pass **Delete a booking** Testing procedure: 1. Click on the Booking for Desk 2004 from the site administration bookings list 2. Click on Delete 3. Confirm deletion ![Delete Booking](/documentation/screenshots/site-administration-booking-delete.png) ![Delete Booking Confirm](/documentation/screenshots/site-administration-booking-delete-confirm.png) Expected Result: The booking is no longer visible on the site administration bookings list Actual Result: The booking is no longer visible on the site administration bookings list ![Delete Booking List](/documentation/screenshots/site-administration-booking-delete-list.png) Pass/Fail: Pass Epic: User Authentication User Story: As a site visitor, I can register on the site so that I can access the site services #6 **Register** Testing procedure: 1. Click on the Register button on the navigation bar 2. Enter the Email address, username, and password twice 3. Click on the Confirm button Expected Result: 1. A message is shown to indicate that a confirmation email is sent to the user 2. A second message is shown to indicate that the newly registered user is also logged in to the site 3. The navigation bar shows the username of the logged-in user 4. The navigation bar Register link on the navigation bar has changed to Bookings 5. The navigation bar Login link on the navigation bar has changed to Logout Actual Result: 1. A message is shown to indicate that a confirmation email is sent to the user 2. A second message is shown to indicate that the newly registered user is also logged in to the site 3. The navigation bar shows the username of the logged-in user 4. The navigation bar Register link on the navigation bar has changed to Bookings 5. The navigation bar Login link on the navigation bar has changed to Logout Pass/Fail: Pass User Story: As a registered user, I can login so that I have access to my content #7 **Login** Testing procedure: 1. Click on the Login button on the navigation bar 2. Enter the username and password 3. Click on the Login button Expected Result: 1. A message is shown to indicate that the user has successfully signed in 2. The navigation bar shows the username of the logged-in user 3. The navigation bar Register link on the navigation bar has changed to Bookings 4. The navigation bar Login link on the navigation bar has changed to Logout Actual Result: 1. A message is shown to indicate that the user has successfully signed in 2. The navigation bar shows the username of the logged-in user 3. The navigation bar Register link on the navigation bar has changed to Bookings 4. The navigation bar Login link on the navigation bar has changed to Logout Pass/Fail: Pass User Story: As a registered user, I can logout of my account so that my content is kept secure #8 **Logout** Testing procedure: 1. Click on the Logout button on the navigation bar 2. Confirm logging out by clicking on the Logout button Expected Result: 1. A message is shown to indicate that the user has successfully logged out 2. The navigation bar shows that the user is logged out 3. The navigation bar bookings link on the navigation bar has changed to Register 4. The navigation bar Logout link has changed to Login Actual Result: 1. A message is shown to indicate that the user has successfully logged out 2. The navigation bar shows that the user is logged out 3. The navigation bar bookings link on the navigation bar has changed to Register 4. The navigation bar Logout link has changed to Login Pass/Fail: Pass Epic: Create Landing Page User Story: As a site visitor, I can access the landing page so that I can understand the purpose of the site and take appropriate actions #5 Testing procedure: 1. Enter the URL for the booking application as https://deskbooking.herokuapp.com/ Expected Result: 1. The landing page carousel slide 1 hero image text indicates that a workspace can be booked. 2. A call to action on slide 1 invites the user to Login. If the user is not registered then there is a link to register from the login page. 3. The landing page carousel slide 2 hero image text indicates that there are private offices and workspaces. 4. A call to action on slide 2 invites the user to have a further look at the options available. 5. The landing page carousel slide 3 hero image text and call to action invites the user to learn more about the location. Actual Result: 1. The landing page carousel slide 1 hero image text indicates that a workspace can be booked. 2. A call to action on slide 1 invites the user to Login. If the user is not registered then there is a link to register from the login page. 3. The landing page carousel slide 2 hero image text indicates that there are private offices and workspaces. 4. A call to action on slide 2 invites the user to have a further look at the options available. 5. The landing page carousel slide 3 hero image text and call to action invites the user to learn more about the location. Pass/Fail: Pass Epic: User Bookings Management User Story: As a registered user I can create, read, update and delete my bookings so that I can maintain an accurate record of my use of the desk space (must-have/complete) #9 **Add Booking** Testing procedure: 1. Select the Login link from the navigation bar 2. Select the Bookings link from the navigation bar 3. Click on the green plus icon beside "Add a Booking" 4. Select a desk booking date and desk 5. Click Save Expected Result: 1. A message indicating that the booking is added is shown 2. The booking detail is now shown on the list of bookings Actual Result: 1. A message indicating that the booking is added is shown 2. The booking detail is now shown on the list of bookings ![Registered User Booking Add](/documentation/screenshots/registered-user-booking-add.png) Pass/Fail: Pass **Add Booking** Testing procedure: 1. Select the Login link from the navigation bar 2. Select the Bookings link from the navigation bar 3. Click on the Edit button which is a pencil-square blue button beside the booking 4. Update the desk booking date or the desk or both 5. Click Save Expected Result: 1. A message indicating that the booking is updated is shown 2. The new booking detail is now shown on the list of bookings Actual Result: 1. A message indicating that the booking is updated is shown 2. The new booking detail is now shown on the list of bookings Pass/Fail: Pass **Delete Booking** Testing procedure: 1. Select the Login link from the navigation bar 2. Select the Bookings link from the navigation bar 3. Click on the Delete button which is a red x-circle button beside the booking 4. Click Confirm Expected Result: 1. A message indicating that the booking is deleted is shown 2. The booking has now been removed from the list of bookings Actual Result: 1. A message indicating that the booking is deleted is shown 2. The booking has now been removed from the list of bookings Pass/Fail: Pass
Features Testing **Home Page Company Logo** - When clicked the company logo returns the user to the home page Testing procedure: 1. From the Bookings page click on the company logo "SmithfieldSquare" on the navigation bar Expected Result: 1. The user is returned to the home page Actual Result: 1. The user is returned to the home page Pass/Fail: Pass **Footer Social Media Links** - When clicked the social media links take the user to the correct sites Testing procedure: 1. From the footer click on all of the social media links Expected Result: 1. The user is sent to the correct social media page Actual Result: 1. The user is sent to the correct social media page Pass/Fail: Pass **Footer Email Link** - When clicked the email link opens a mailto link Testing procedure: 1. From the footer click on the email address Expected Result: 1. The user is directed to the default mailto email provider or receives an "Add an Account" message if no default exists Actual Result: 1. The user is directed to the default mailto email provider or receives an "Add an Account" message if no default exists Pass/Fail: Pass **Footer Phone Link on Mobile** - When clicked on a mobile phone the link suggests calling the number listed Testing procedure: 1. From the footer click on the phone number Expected Result: 1. When clicked on a mobile phone the link suggests calling the number listed Actual Result: 1. When clicked on a mobile phone the link suggests calling the number listed Pass/Fail: Pass Note: This phone link is also available on a desktop. While it is possible to disable it there may be some users who wish to call by using a phone app such as Meta WhatsApp or Microsoft Phone Link. This has not been tested to date. **Add Booking Shows Available Desks Only** - On Add Booking the dropdown menu for desks only shows available desks Testing procedure: 1. Have a look at the bookings listed on the Bookings page 2. Take note of a date and desk already booked 3. Click on the green plus icon beside "Add a Booking" 4. Choose the date observed above 5. Click on the Desk dropdown list Expected Result: 1. The dropdown list does not show the desk observed above as it is already booked on that date Actual Result: 1. The dropdown list does not show the desk observed above as it is already booked on that date ![Registered User Booking Add](/documentation/screenshots/registered-user-booking-list-check-dropdown.png) ![Registered User Booking Add](/documentation/screenshots/registered-user-booking-add-booking-check-dropdown.png) Pass/Fail: Pass **Update Booking Shows Available Desks Only** - On Update Booking the dropdown menu for desks only shows available desks Testing procedure: 1. Have a look at the bookings listed on the Bookings page 2. Take note of a date and desk already booked 3. Click on the update button, the pencil-square blue button beside the booking 4. Choose the date observed above 5. Click on the Desk dropdown list Expected Result: 1. The dropdown list does not show the desk observed above as it is already booked on that date Actual Result: 1. The dropdown list does not show the desk observed above as it is already booked on that date Pass/Fail: Pass **Unregistered User Opens Bookings URL** - An unregistered user is redirected to the Login URL when attempting to browse to the view_bookings URL Testing procedure: 1. Enter the https://deskbooking.herokuapp.com/view_bookings URL Expected Result: 1. The user is redirected to the Login page Actual Result: 1. The user is redirected to the Login page Pass/Fail: Pass **Unregistered User Opens an Invalid URL** - An unregistered user is redirected to the custom error page having entered an invalid URL Testing procedure: 1. Enter the https://deskbooking.herokuapp.com/badaddress URL Expected Result: 1. The user is redirected to the custom error page 404 Actual Result: 1. The user is redirected to the custom error page 500 Pass/Fail: Fail Note: This error message is also recorded in the bugs section of this readme file. ![Bad URL Address](/documentation/screenshots/error-bad-address.png) **Bad Email Address on Registration** - When a bad Email address is entered the user is prompted to correct it Testing procedure: 1. Select Register from the navigation bar 2. Enter an incorrect Email address i.e. exclude the @ or . or both 3. Enter the username 4. Enter the password twice. It must contain at least 8 characters. It must not be too common. 5. Click Register Expected Result: 1. The user is prompted to correct the email address 2. Registration is not completed until the correct format for the email address is entered Actual Result: 1. The user is prompted to correct the email address 2. Registration is not completed until the correct format for the email address is entered Pass/Fail: Pass **Bad Password on Registration** - When a bad Email address is entered the user is prompted to correct it Testing procedure: 1. Select Register from the navigation bar 2. Enter a correct email address 3. Enter the username 4. Enter an incorrect password i.e. enter less than 8 characters 5. Click Register Expected Result: 1. The user is prompted to enter a password with at least 8 characters. 2. Registration is not completed until the correct format for the password is entered Actual Result: 1. The user is prompted to enter a password with at least 8 characters. 2. Registration is not completed until the correct format for the password is entered Pass/Fail: Pass
Browser Compatibility The site was developed using Google Chrome Version 108.0.5359.99 (Official Build) (64-bit). It was also tested on Microsoft Edge Version 108.0.1462.46 (Official build) (64-bit) and Firefox Browser 107.0.1 (64-bit). No issues were identified during this testing.
Responsiveness The Chrome Developer Tool was used to check responsiveness as the application was being developed. The following devices were also used to check responsiveness. - iPhone 13, iOS Version 16.1.1 - Redmi Note 9, Android Version SP1A.210812.016 - HP Pavillion Laptop Windows 11 Home 21H2 with 15" screen and Acer KG271 27" monitor As the development progressed, the main responsiveness issues were found with the bookings listings where the information presented forced a slide bar to be inserted on mobile devices. While the slide bar allowed the user to move the view to the right, it wasn't delivering a professional product. The solution was to merge two columns of data into one and rename the table titles.

Validator Testing

HTML Testing The URLs below were copied to the Nu Html Checker and the results show no errors or warnings. - https://deskbooking.herokuapp.com/ - https://deskbooking.herokuapp.com/view_bookings/ - https://deskbooking.herokuapp.com/accounts/signup/ - https://deskbooking.herokuapp.com/accounts/login/ - https://deskbooking.herokuapp.com/accounts/logout/ - https://deskbooking.herokuapp.com/add_booking/ Booking id 167 was chosen from the bookings list and the URLs below were copied to the Nu Html Checker. The results shows no errors or warnings. - https://deskbooking.herokuapp.com/167/update_booking/ - https://deskbooking.herokuapp.com/167/delete_booking/ A bad URL was entered in the address bar and the URL below was copied to the Nu Html Checker. The result shows no errors or warnings. This is because a custom error template was loaded. - https://deskbooking.herokuapp.com/badurl/
CSS Testing The W3C CSS Validator result for carousel.css shows no error.

Python Testing The PEP8 standards for Python were checked using CI Python Linter. - admin.py - apps.py - forms.py - models.py - test_models.py - test_views.py - urls.py - views.py - asgi.py - settings.py - urls.py - wsgi.py - env.py All of the above tests showed no errors with the exception of settings.py and env.py. The settings.py showed results as follows: - 132: E501 line too long (91 > 79 characters) - 135: E501 line too long (81 > 79 characters) - 138: E501 line too long (82 > 79 characters) - 141: E501 line too long (83 > 79 characters) - 162: E501 line too long (80 > 79 characters) These errors were related to the password validators and static files storage: ![Line too long - password validators](/documentation/screenshots/settings-py-password-validators.png) ![Line too long - static files](/documentation/screenshots/settings-py-static.png) To ensure that this code continued to run smoothly the line length was not corrected in the settings.py file. The env.py showed results as follows: - 3: E501 line too long (117 > 79 characters) - 7: E501 line too long (99 > 79 characters) ![Registered User Booking Add](/documentation/screenshots/env-py-postgres.png) ![Registered User Booking Add](/documentation/screenshots/env-py-cloudinary.png) To ensure that this code continued to run smoothly the line length was not corrected in the env.py file.
Lighthouse Testing - Desktop Home Page ![Desktop Home Page Lighthouse](/documentation/screenshots/lighthouse-home-page-desktop.png) - Desktop Bookings Page ![Desktop Bookings Page Lighthouse](/documentation/screenshots/lighthouse-bookings-page-desktop.png) - Mobile Home Page ![Mobile Home Page Lighthouse](/documentation/screenshots/lighthouse-home-page-mobile.png) - Mobile Bookings Page ![Mobile Bookings Page Lighthouse](/documentation/screenshots/lighthouse-bookings-page-mobile.png)

Bugs and Fixes

User Registration

Once a user has registered on the site, a message will confirm registration and logged-in status.

User Registration Confirmation

The second message for logged-in status does not disappear after two and a half seconds. This bug has not been resolved at the time of writing this readme.

Custom Error Pages

When a bad URL address is entered on the address bar (https://deskbooking.herokuapp.com/badaddress), the custom 500 error page is loaded. It is the understanding that the custom 404 error message should be loaded instead. This bug has not been resolved at the time of writing this readme.

Bad URL Address

Deployment

Heroku Deployment Sign up or Login to [Heroku](https://www.heroku.com/) From the dashboard select 'New' and 'Create New App' Enter the app-name and the region, then select create app. Signup or Login to [ElephantSQL(https://www.elephantsql.com/) Click Create New Instance Set up the plan Enter a name Select the Tiny Turtle (Free) plan Choose Select Region Choose a data center close by Click Review Click Create instance Return to the ElephantSQL dashboard and click on the database instance name Click the copy icon to copy the database URL Back in Django in the env.py file add: import os os.environ["DATABASE_URL"]="" Replace with the copied string from ElephantSQL. Enter a unique secret key: os.environ["SECRET_KEY"]="my_super^secret@key" Save the file Open up the settings.py file and add the following code below Path import: import os import dj_database_url if os.path.isfile('env.py'): import env Also reference the variable in the env.py file, so change the SECRET_KEY to the following: SECRET_KEY = os.environ.get('SECRET_KEY') Comment out the original DATABASES variable and add the code below: # DATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': BASE_DIR / 'db.sqlite3', # } # } DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL")) } Run python manage.py migrate from the command line Add, commit and push to GitHub Open the Settings tab in the Heroku dashboard Add the following config vars: DATABASE_URL, copy the database URL from ElephantSQL SECRET_KEY containing the secret key. Signup or login to the [Cloudinary website](https://cloudinary.com/) Click on the Sign Up For Free button Provide your name, email address and choose a password For Primary interest, you can choose Programmable Media for image and video API Click Create Account Verify your email and you will be brought to the dashboard Copy the API environment variable Add the API environment variable to the os.environ["CLOUDINARY_URL"] = "" in env.py Add CLOUDINARY_URL to the config vars in Heroku If there are no static files as yet add DISABLE_COLLECTSTATIC = 1 to the config vars in Heroku

Credits

Content

Media

Images

Icons