MovieGeek Booking Website is a full-stack application created using HTML, CSS, JS, Python, Django and Bootstrap. It is a movie ticket booking web application that allows users to view showtimes and book tickets for 4 featured new release movies. Customers can select a movie, showtime, number of seats, and complete booking checkout. The site provides an easy way to reserve seats and books tickets online.

View the live project here

• UX
  • Target Audience
  • Key Project Goals
  • User Stories
  • Agile Methodology
• UI
  • Initial Design
  • Colour Palette
  • Typography
• ERD (Entity-Relationship Diagram)
• Features
  • Existing Features
  • Features Left to Implement
• Technologies Used
• Deployment
  • Database (ElephangSQL)
  • Cloudinary
  • Django secret key
  • Heroku
  • Final Deployment
  • How to Fork the Github Repository
  • How to Clone the Github Repository
• Credits
  • Content
  • Media
  • Code
• Acknowledgements

The primary audience is moviegoers and cinephiles looking to conveniently book tickets online for upcoming movie releases. This includes casual movie fans, friends/family planning a night out, as well as frequent moviegoers who attend opening weekends. The focus is providing quick booking for the latest films.

• Allow users to search for and view information about movies playing, including title, showtimes, ticket prices, and seat availability.
• Provide users with a personal profile where they can view their past and current bookings.
• Integrate a ticketing system.
• Implement a seamless mobile-friendly booking flow for smartphone users.
• Build an admin portal where staff can manage movie and showtime listings.

"As a user I can access main pages and features through the header and footer so that I can easily navigate the site"

"As a new user, I can sign up with form validation so that I can create a new account to book movies."

"As a user I can login so that I can access my account."

"As a user I can reset my password by entering my email so that I can recover access if forgotten."

"As a user I can select a movie, date, time, and up to 8 seats so that I can book tickets and see them in "My bookings."

"As a user I can edit or delete my existing bookings on my profile so that I can manage my tickets."

"As a user I can view information about movies so that I can choose movie to book tickets to."

"As a user I can view my profile containing my details so that I can confirm my account information."

"As a a logged in user I can log out so that I can securely end my session."

"As a user, I can see customized and informative error pages for 404 and 500 errors so that I understand what happened and can take appropriate action."

"As a site owner/administrator I can create, read, update and delete movies so that I can manage showtime content.

For this project I used Agile methodology. Agile methodology is a project management approach that prioritizes cross-functional collaboration and continuous improvement. It divides projects into smaller phases and guides teams through cycles of planning, execution, and evaluation.

This a visual representation of my Kanban Board during the project. In addition to three essential columns, I created a column "Won't Have For This Project" later renamed into "Won't Have For This Deployment" for the user stories that I wasn't able to implement. My process was divided into 3 iterations (Milestones). Once the iteration is done, all of the user stories from that iteration were going to "Done" column. If any of the user stories from a particular iteration weren't implemented, they were going back to the Product Backlog.

The first iteration is focused on creating the look of the website (home page and profile page) and part of the CRUD functionality.

The second iteration is focused on creating site navigation, the rest of the CRUD functionality as well as profile page features.

The third iteration is focused on authorisation.

I had 15 issues:

• 3 epics:
  • Admin Site
  • Booking
  • Authorisation
• 7 must-haves
  • Admin
  • Sign Up
  • Log In
  • Log Out
  • Site Navigation
  • Create/View booking
  • Edit/Delete booking
• 4 should-haves
  • Main page
  • Home page
  • Profile Details
  • Update/Delete Profile
• 4 could-haves
  • Verify Email
  • Password Reset
  • Profile Picture Update/Upload
  • Error pages

View here

The labels were given to each user stories based on MoSCoW prioritization which is a technique used in project management, particularly in the context of Agile and Scrum methodologies, to prioritize and categorize requirements or features.

• Must Have: guaranteed to be delivered (max 60% of stories)
• Should Have: adds significant value, but not vital (the rest ~20% of stories)
• Could Have: has small impact if left out (20% of stories)
• Won't Have: not a priority for this iteration

I used Fibonacci sequence for story point estimation. Each number in the sequence is the sum of the two preceding ones. These points also meant to be relative, not absolute.

• 2 - A task with a story point of 2 is considered small, relatively simple, and straightforward.
• 3 - A task with a story point of 3 is slightly more complex than a 2 but still relatively simple.
• 5 - A task with a story point of 5 represents a moderate level of complexity. It's more involved than a 3.
• 8 - A task with a story point of 8 is considered large and complex. It's significantly more involved than a 5.

All the user stories that weren't finished were put back into the Product Backlog for the next iteration.

After discussing wireframes with my mentor, we determined that visual mockups were not necessary for this project. Since my designs thoroughly document the website's functionality and features in detail, comprehensive wireframes would be redundant.

The sizes that were used for the design:

• Mobile (360x740)
• Tablet (768x1024)
• Desktop (1440x1024)

Things I have changed: The header looks a little bit different as for the mobile size I used a Bootstrap collapsed navbar instead of using my own.

Things I have changed: I got rid of logo.

Things I have changed: I've added "Password Rules" for better UX as well as for the desktop size I got rid of the image.

Things I have changed: I also got rid of the image for the desktop size and changed "Email address" field to "Username".

Nothing was changed here.

Things I have changed: I wanted to created a real cinema experience by letting users choose the seats for the movie but because I wasn't able to implement that functionality, I sticked to the number input (users can choose the number of seats they want to book). Also, for the date and time I did a dropdown menu.

Nothing was changed here.

Things I have changed: The "My bookings" section looks the same the only thing is that the user can't edit or delete their profile.

Nothing was changed here.

Things I have changed: I wanted to make the log out modal first but then sticked to the html template for that.

Things I have changed: I wanted to create my own messages but to save some time I used Bootstrap alert messages.

Things I have changed: Although I wanted to create my own modal, I used Bootstrap modal as it (again) was less time-consuming.

For this project, I chose these colors to be presented in my colour palette as they have a positive affect on the user experience.

I also used black, white and green colours mostly for text or as a background colours. RGB colours such as rgba(0,0,0,0.65), rgba (255, 255, 255, .6), and rgba(0, 0, 0, .3) were used for an overlay.

For this project I used Montserrat font family as I thought it was a readable font and would be beneficial to user experience.

I've used Entity-Relationship Diagram(ERD). Entity-Relationship Diagram represent the relationships between entities, more specifically the relationships between my "Movie" and "Booking" models as well as Django built-in User model.

This ERD conveys that:

• Each Movie can have multiple Booking entries (one-to-many).
• Each User can have multiple Booking entries (one-to-many).

The features that are presented are for desktop size.

If the user is authenticated, they will see Home, Profile and Log Out links in the navigation menu which gives them ability to go through the available movies and book them, go to their Profile page and see the bookings they have there or make a new one. They also can log out from their account and will be redirected to the Home page.

If the user is not authenticated, they will see Home, Sign Up and Log In links in the navigation menu which gives them ability to go through the available movies and watch trailers, sign up as a new user or log in as an existing one.

The footer includes links to the social media that each opens in a new tab.

The sign up page gives user ability to enter their information(username, email address, password and confirm password) in order to authorise them as a website user and give them ability to create, view, edit and delete their bookings.

The log in page gives user ability to enter their information(username and password) in order to get access to their existing profile and give them ability to create, view, edit and delete their bookings.

The password reset page gives user ability to get back access to their account after resetting their password.

If the user is authenticated, they will see the welcome message with their username and "My bookings" button that will redirect them to their Profile page where they can manage their bookings. They have an ability to go through the available movies and book them as well as watch trailers.

If the user is not authenticated, they will see the general welcome message and information about the website. They can watch trailers but don't have an ability to book movies and if they click on "Book Now" button will redicted to Log In page.

The booking page includes a dropdown with four movies to choose from, the numbers of seats you can select, date and time, and price which populates depending on how many tickets the user will choose with "Book" button.

After the user did their booking, they will be redirected to the "Booking confirmation" page that confirm that their booking was successful. They also have an option to either see their newly created booking in their Profile page or go back to the Home page.

The Profile page with existing bookings includes information about the user (username and email address) as well as information about their bookings. Each booking has the date and time of movie being screened, movie title, an amount of seats, price as well as "Edit" and "Delete" buttons so that the user can change their booking or delete it completely.

The Profile page without bookings includes the text with "No bookings yet" and "Book a Movie" button that gives the user the ability to book a movie.

User can edit their booking and will be presented with a page identical to the Booking page but with functionality to change their booking and "Update" button to save their changes. The message about their booking being changed is displayed.

User can delete their booking and will be presented with a modal to confirm the delete process. The message about their booking being deleted is displayed.

Although, the Django admin panel is not created by me, it's still plays the most important part for the website. In my admin panel, I have two models: Booking and Movie and I also use the default User model. I customize the admin title and header.

The Log Out page gives the user the ability to log out from their account. After logging out they will be redirected to the Home page.

Each of the alert messages being displayed when the various actions such as Sign Up, Log In, Log Out, Password Changed, Create, Edit or Delete a booking is being done to give a visual feedback to the user. The user can close the message or it will dissapear in a few seconds.

The error page for when there is a problem on the server's side.

The error page for when a user tries to access a resource or page on a website that cannot be found.

Besides the features mentioned in Won't Have For This Deployment, these are some other features I would like to implement in the future.

• Search and Filter:
  • Implement a search functionality for movies.
  • Allow users to filter movies based on genre, release date, etc.
• Notifications:
  • Send email or in-app notifications for booking confirmations and updates.
• User Reviews and Ratings:
  • Allow users to leave reviews and ratings for movies.
  • Display average ratings for each movie.
• Social Features:
  • Sign Up with Social Account (Google, Facebook)

• Figma was used to create the final design of a website.
• Font Awesome was used for social media icons in the footer.
• Iconify was used for menu icon in the header.
• Favicon was used for favicon.
• LucidChart was used for creating ERD.
• Google Fonts was used to add specific font family to the stylesheet.
• Adobe Color was used to create a colour palette.
• VSCode was used to code the website.
• Bootstrap was used for styling certain elements on the page.
• W3C validation was used to check the markup validity of html file.
• Jigsaw was used to check the validity of css file.
• JSHint was used to check the validity of js files.
• CI Python Linter was used to check the validity of python files.
• Am I Responsive was used to get a screenshot of a final look of the website on various devices.
• Github was used to store the code of the website.
• Django used as the Python framework for the site.
• PostgreSQL used as the relational database management.
• ElephantSQL used as the Postgres database.
• Heroku used for hosting the deployed site.
• Cloudinary used for online static file storage.
• Pillow used for image processing
• Gunicorn used for WSGI server
• sycopg2 used as a PostgreSQL database adapter
• Chrome DevTools was used to check the responsiveness of the website as well as to debug it.
• Chrome's Developer Tool Lighthouse was used to check the performance of the website.

All the information on testing is in TESTING.md

Right after finishing the Django setup, the app was deployed to Heroku for the first time to confirm all was working as expected.

1. Navitate to ElephantSQL website, log in to your account
2. Click “Create New Instance”.
3. Enter database name, leave plan field as it is. You can leave the Tags field blank.
4. Select region, click on "Review".
5. Check that your details are correct. Then click “Create instance”
6. Return to the ElephantSQL dashboard and click on the database instance name for this project.
7. Copy your ElephantSQL database URL using the Copy.
8. Paste this URL into env.py file as DATABASE_URL value and save the file.

os.environ["DATABASE_URL"] = "postgres://yourdatabaseURL"

1. Navigate to https://cloudinary.com/ and log in to your account.
2. Navigate to dashboard/console https://console.cloudinary.com/console/ copy API Enviroment variable starting with "cloudinary://".
3. Paste copied url into env.py file as CLOUDINARY_URL value and save the file.

os.environ["CLOUDINARY_URL"] = "cloudinary://yourAPIEnviromentvariable"

You need to include you Django secret key that you can generate using any of the Django secret keys generators online. In order to protect django app secret key it was set as an enviroment variable and stored in env.py.

os.environ["SECRET_KEY"] = "yourSecretKey"

1. Log in to Heroku or create an account.
2. Navigate to your Heroku dashboard, click "New" and select "Create new app".
3. Enter a name for your app (can be a name of your project) and choose the region that suits best to your location.
4. Select "Settings" from the tabs.
5. Click "Reveal Config Vars".
6. These are: CLOUDINARY_API_KEY - Get from Cloudinary. DATABASE_URL - Get from your SQL provider. DISABLE_COLLECTSTATIC - Set to '1' (without '') SECRET_KEY - This is your Django project secret key, generated by your Django project. You can generate a new key that is different from your localhost version. You can also add any other Config Vars you need.

• Heroku needs two additional files in order to deploy properly.
  • requirements.txt
  • Procfile

7. Select "Deploy" from the tabs.
8. Select "GitHub - Connect to GitHub" from deployment methods.
9. Click "Connect to GitHub" in the created section.
10. Search for the GitHub repository by name.
11. Click to 'Connect' to the relevant repo.
12. Either click ‘Enable Automatic Deploys’ for automatic deploys or ‘Deploy Branch’ to deploy manually. Manually deployed branches will need re-deploying each time the repo is updated.
13. Click 'View' to view the deployed site.

1. Make sure to set DEBUG = False.
2. You can remove DISABLE_COLLECTSTATIC - Set to '1' (without '').

1. If you want to fork the repository log in to Github or create an account.
2. Locate to the repository for the project.
3. In the top right corner click on 'Fork' button.
4. Now you have a copy of the original repository in your Github account.

1. If you want to clone the repository log in to Github or create an account.
2. Go to the main page of the repository.
3. Click on '<> Code' and copy the URL from HTTPS.
4. Open Git Bash.
5. Change your current working directory to the location where you want your clone to be made.
6. Type 'git clone' into your terminal window, paste the URL you copied earlier and press Enter to create your local clone.

• The definition of Agile Methodology was taken from here.
• The text content for the Home section was created by me.
• Movies description was taken from IMDB website (in order):
  1. Spider-Man: Across The Spider-Verse
  2. Barbie
  3. Mission Impossible: Dead Reckoning Part One
  4. Oppenheimer

• The hero image was taken from here.
• The favicon image was taken from here.
• Movies posters (in order):
  1. Spider-Man: Across The Spider-Verse
  2. Barbie
  3. Mission Impossible: Dead Reckoning Part One
  4. Oppenheimer
• Booking images in profile page:
  1. Spider-Man: Across The Spider-Verse
  2. Barbie
  3. Mission Impossible: Dead Reckoning Part One
  4. Oppenheimer

• The initial deployment, js code for alert messages, information on how to create models and views as well as how to add authorisation to my project were taken from Code Institute's I Think Therefore I Blog
• The code for navbar, "password rules" buttton, alert messages and modal where taken from Bootstrap
• Python Django Tutorial for Beginners were used to better understand Django.
• Information on automated testing that was used: from Testing Tools and Writing and running tests.
• The rest was written by myself.

I express my sincere gratitude to my mentor, Dick Vlaanderen, for his invaluable assistance and feedback during the entire project. Additionally, I extend my thanks to our facilitator, Marko Tot, for his guidance on the material and practical advice. Special appreciation goes to my fellow groupmate, Gbemi Akadiri, for his steadfast help and support throughout the project.