This repository contains the website for the IT5005 Project (Web Implementation). The author is Hugh Lilly (ID 20220344).
The site presented alongside this report took three weeks to create, from sketching designs to finalising functionality. It uses Tailwind CSS, a utility-first CSS framework, and provides a number of features that give end-users the ability to:
- View a list of currently playing films (the Now Playing page)
- Calculate the cost of a selection of tickets (the Tickets page)
- View information on the history of the cinema (About page)
- View information on the rewards programme (Rewards page)
During development, prettier and eslint were used to ensure code met formatting standards.
The source code for the site is in the /src directory. There is an HTML file for each page on the site.
There are three subdirectories:
assets-- images and other media assetsscripts-- JavaScript filesstyles-- CSS file
.
├── src
│ ├── assets
│ │ ├── carousel
│ │ ├── logos_icons
│ │ └── stills
│ ├── scripts
│ │ ├── mobile-menu.js
│ │ ├── tickets.js
│ │ └── trailers.js
│ ├── styles
│ │ └── main.css
│ ├── about.html
│ ├── index.html
│ ├── now-playing.html
│ ├── rewards.html
│ └── tickets.html
├── README.md
├── package-lock.json
├── package.json
└── tailwind.config.jspackage.json, thenpmconfiguration filepackage-lock.json, generated bynpmtailwind.config.js, the Tailwind configuration file
Hidden files:
.prettierrc, the prettier configuration file.eslintrc.json, the eslint configuration file
This is a git-initalised repository, so you can run git status and git log to view authorship information. View a summary of the commit history by running this command:
git log --pretty=format:"%cr: %s (%h)"The development dependencies are parcel.js, eslint, prettier, and Tailwind. There are no production dependencies.
First, run:
npm installTo open the development server, run:
npm startThis runs the parcel bundler, which minifies all HTML and JavaScript, delivering a faster site than simply opening /src/index.html in a browser (though this will also work).
To build the site, run:
npm run buildThis creates a minifed build of the site along with all assets, which makes for a faster load time.
To serve the built site locally, run:
npm run serveNB: The site was built before distribution, so this command should be able to be run without running a new build beforehand.
The existing site could be enhanced in a number of ways:
Infomation could be added to the carousel, such as details on upcoming sessions. This space could also be used to promote other aspects of the cinema and business, such as the museum.
This page would be greatly enhanced by the addition of information on specific sessions, as well as perhaps some advertising for other aspects of the business.
More information could be added here on the history of the cinema, and in particular on the museum and café.
This page has great end-user functionality, but would be significantly improved if it were connected to a live ticketing system.
This page could be enhanced with the addition of a newsletter signup form.
The site could be upgraded to the component-based JavaScript framwork React. This would greatly enhance both user-facing and administrative functionalities.
Moving development to React could provide:
- The ability to load the whole site as one application, navigating between "routes" instead of individual HTML pages
- The ability to create single components that return multiple iterations of a particular HTML element, for example by mapping over data on films, or other repeated page elements such as the Home page blurbs that lead to other parts of the site.
- The administrative panel for content could be contained in several JSON objects, and stored securely in individual
.jsfiles alongside the application itself. - The need for multiple HTML pages each with a copy of the header and footer would be removed, greatly improving maintainability.
Contact the author, Hugh Lilly (ID 20220344), by email (20220344@mywhitecliffe.com) if you have any questions.
(Last updated September 23, 2022.)