This repository contains code submitted as part of my A-Level Computer Science coursework. Please be aware that this project was developed under time constraints and is not intended for production use. The codebase may not reflect best practices or my current development standards. This repository is being archived for documentation purposes only. And yes, I had some help from ChatGPT.
This is not 100% of the contents of the coursework, only a brief snippet. I got a Grade D in Computer Science so there are likely better courseworks to take inspiration from. Some of the contents is modified from what was submitted (i.e names redacted) as well.
Many services I use on the Internet are funded by a mixture of online advertising and/or paid subscriptions to keep their services running. Advertising agencies like Google and Facebook (Ads) have often come under scrutiny for their invasive and privacy-violating practises such as personal data collection that many people are uncomfortable with. This has led to laws like GDPR coming into place however many consumers are still upset with these companies and do not trust them which is why I believe there is an opportunity to build a new platform that enables privacy-focused advertising so that companies can still run advertisements without the backlash or ethical issues that major advertising agencies currently use today. This problem can be solved by a computational by using databases to store information about advertisements and an API to highlight images that can be clicked on by the consumer to be redirected to the ad website.
To make the service global I would have to ensure I are compliant with all regulations which can differ in every country, for example the UK has GDPR which requires parental consent in order to advertise to children under 13, the issue with this is not only is it difficult for a service that doesn’t track its users to get said consent, it’s also an ethical and moral issue. Originally, I did want to propose advertising to children under 13 however it will be too difficult to scale and appropriately do at this stage
Meta Adveritsing
A page screenshot of adsmanager.facebook.com
Meta has made it increasingly easier then ever for anybody anywhere to advertise to their almost 3 billion users. They allow for sophisticated targeting based on demographics (which is the controversial issue I am trying to remove)
Digital Cinema Media
A screenshot of the front page of DCM’s website https://www.dcm.co.uk/
While they do not serve advertisements online, I wanted to highlight Digital Cinema Media because they show advertisements based on what people are watching, rather than who the people are. Digital Cinema Media is a company owned by Cineworld and Odeon that is responsible for the advertisements you see before the movie plays in a cinema; because it knows details about the movie (for example: Age Rating, type of movie) they can play advertisements they can see as relevant. It is not an example of online advertising, but I wanted to highlight it because it shows that advertising can be effective by knowing what content is being commoner rather than who. However, this is limited to just cinemas which is okay for their purpose, but I want to bring this sort of idea to any online service.
Dotdash Meridith Advertising
An image showing how their advertising works, found on their website at https://www.dotdashmeredith.com/advertising
Dotdash Meridith is a massive media campaign that run many websites such as People.com and Investopodia.com; their advertising approach is simple and very similar with the slogan ‘Reach the right person, at the right time – without cookies’; this is very similar to my approach which is why I am featuring it here because it too also doesn’t use cookies to track users but uses the content the user is consuming to advertise to them at the right ‘intention’. This shows to me that my idea has potential because it is remarkably similar in terms of the idea. The issue with Dotdash Meridith is it more just for their own websites and magazines like People.com and The Balance whereas I want anyone to be able to advertise anywhere.
My plan is to be able to make a minimum viable product (MVP) that allows advertisers to be able to create an account and login as well as add, update, and remove new ad campaigns.
The stakeholders will be businesses running an online website that want to display advertisements to help fund their operations.
| Type of business or organisation | Reason they would use it |
|---|---|
| Organisations and public information services like Wikipedia or an online library. | These services must be extra focused on privacy as people would not trust google trackers being used on websites like Wikipedia as the content you are viewing is extremely related to your interests. This has made an issue for organisations such as Wikipedia as they are not allowed to display advertisements due to this; however, using a trustworthy ad solution would be extra revenue and useful |
| Public government services such as the NHS | The government must focus on peoples trust which may prevent them from using services like Google to show ads, the government services like the NHS could generate some extra income that could be used on public spending and benefit by using ads. |
| Local and/or smaller businesses | Local and/or small businesses cannot risk ruining their reputation by running ads by services like Google which users do not trust. Many local and small businesses must trade between extra revenue and users' reputation |
| Online services whose user base is more privacy focused | Services like gaming forums, and technology-based services may have users which are more conscious about privacy may have extra concerns when they come across advertisements from companies like Google |
| Here are some specific use cases to illustrate how my proposed solution will work: |
Example 1: A local business, such as a restaurant, wants to advertise to people in their area. They can tag their ad with the location "London" and the interest "food." You would then display this ad to users who are visiting websites about food or who have previously shown an interest in food. Example 2: A public information service, such as Wikipedia, wants to generate extra revenue from advertising. They can tag their website with the interest's "education" and "science." You would then display ads on Wikipedia that are relevant to these interests, such as ads for educational resources or ads for scientific products and services.
My ideal stakeholder and target audience is anybody interested in serving advertisements to people where the people or the stakeholder is concerned about privacy
I created a new TypeForm to ask questions to potential stakeholders, questions include:
What is your name? Please provide your phone number? What is your occupation? Why are you interested in a service like this? Have you used any services to advertise to new potential clients before? What were some things that went well with the previous services? What were some things that did not go well with the previous services? Would you argue you are privacy-conscious?
The name of my Stakeholder is Mark ******* whose business number can be found at ******* Phone Number, they run an advertising agency for local businesses' online websites around *******, focusing on delivering highly quality advertisements to and from locals around this area for small newsletters and ******* local independent businesses such as small Jewlery stores. They previously used Google Advertisements which is great because it is easy to use and get started for both the advertisers and websites however revenue was lost due to many people using Adblockers and refusing to turn them off due to Google’s privacy policies which many people disagree with. Mark also mentioned smaller businesses are less willing to put advertisements as it is causing complaints and backlash consumers, despite many of them having paid subscriptions and donations it is not covering enough of the site’s Maintenace fees, and more people want to help but cannot be due to the current prohibitive cost of living. This is something Mark is interested in fixing and is willing to switch to a new service.
To create this Structure Diagram, I am going to use a website called draw.io which is a free website that helps you create diagrams. Before I made mine I looked at an example on Google Images and found this example:
This structure diagram helps with problem decomposition as it breaks it down from one big problem into many smaller problems which will make it easier to code in the future
Below are diagrams of my Login Page, Register Page, Campaign Manager Page and Edit Campaign Page:
| Hardware Type | Justification |
|---|---|
| Servers | The API, Database and Frontend need servers that will use Linux as it is free, open source and widely used by programmers and many big companies. I need a dynamic load of servers to meet demand at various times because demand is not constant |
| Storage | I need a lot of storage (cloud storage) to be able to host the database which stores all the data from users and campaigns. I will use MySQL as it is widely used, open source and scalable. |
| Networking | I need a high-speed networking solution to handle the bandwidth and volume of traffic, I will rely on whatever server hosting platform (OVH for example) for this as it is more of a physical hardware issue. |
| Load Balancers | I need load balancers to handle demand |
| Criteria | Justification |
|---|---|
| Can businesses create an account | Businesses need a central way to manage all their advertisement campaigns through an account |
| The business account is secure and cannot be hacked | Businesses need insurance that their account details cannot be hacked and campaigns not modified as this may damage their brand image if malicious ads go out |
| The business can create, update, and delete media campaigns | Businesses need to be able to create an ad campaign as well as edit and delete it |
| The API needs to be able to manage logins, registers, and new campaigns | By using an API, I can have a frontend (website) and backend (database) and use the API to connect the two |
| The database can store accounts and campaigns | I need a permanent and secure backend that can store data |
| The businesses have an interface (website) that can be interacted with | The business needs an effortless way to interact with the service I are providing |
| Registration is secure and bots cannot use it (CAPTCHA) | I do not want bot accounts spamming the website for malicious reasons. I.e. creating bad campaigns |
The project I have proposed can really be broken down into 3 main categories
Frontend
For the frontend I plan to use React.JS using JavaScript to run the main website. React.JS is a part of Meta’s open-source projects which is designed for allowing developers to create a scalable website (and native) user interface. React breaks down each element of an interface into components; this approach makes it easier as it allows developers to break down large interface challenges into smaller, more manageable chunks.
Database
MySQL is a popular open-source relational database management system (RDBMS) known for its ease of use, scalability, and performance. Its user-friendly interface and straightforward commands make it accessible to users of varying technical expertise. MySQL can handle a wide range of data volumes, from small personal databases to large enterprise systems. It is known for its ability to handle a high volume of transactions efficiently. MySQL's open-source nature makes it freely available for download and use, eliminating licensing costs and encouraging community participation in its development. To access MySQL, I am using the program that they provide which allows command line access to the database
Backend
For the backend I am writing it in JavaScript which is a good language, and it is easy to use and interpret, multifunctional and I have experience in it to where I am confident in my writing ability. I am going to use the express library to run the website
Libraries are pieces of code other people or companies write with the main purpose for them to be repeated and reused
| Library Name | Frontend or Backend | Use Case |
|---|---|---|
| Express | Backend | Express is a library that is used to run backend applications; it is coded for JavaScript and allows programmers to create routes in their code |
| Express-Session | Backend | Express-Session is a library for express that uses cookies and attaches to a database to create unique sessions for users so that the express web application can identify a user |
| MySQL | Backend | MySQL is a library that allows the programmer to easily interact with a MySQL database. |
| Body Parser | Backend | Body Parser is a library for express for the middleware so it can parse the client's request’s body’s so that it can be converted to JSON and the express application |
| Cors | Backend | CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options. Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be accessed from another domain outside the domain from which the first resource was served |
| Cookie Parser | Backend | Cookie Parser is a middleware for express that allows the programmer to parse the cookies coming from a request so that the program can use cookies. Cookies are important as it allows the program to save information such as the session ID across multiple different browsing sessions. |
| Redis | Backend | Redis is a library that allows the programmer to easily interact with a Redis cache database. Redis is used as key value storage for storing temporary data as a cache; it’s developed by Microsoft and known for it’s very fast speeds. |
| Redis-Store | Backend | Redis-Store is an express library that allows the express session library to store session data inside of Redis |
| Crypto | Backend | Crypto is a library I use to create a random session ID in hex |
| bCrypt | Backend | BCrypt is a secure library I use for hashing the password and also authenticating the user by comparing the hashed password to the password the express got from the JSON body of the request. |
| express-hcaptcha | Backend | Express-hcaptcha is used to use HCaptcha’s services and it is used to verify that the user has done the captcha successfully on the client side |
| React-hcaptchsa | Frontend | React-HCaptcha is the frontend library for utilising HCaptcha’s services with React Js allowing the browser to add a captcha |
| reduxjs | Frontend | Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. |
| axios | Frontend | axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). |
| Js-cookie | Frontend | A simple, lightweight JavaScript API for handling cookies |
| react | Frontend | React allows me to build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations. |
| React-dom | Frontend | react-dom is the entry point to the DOM and server renderers for React |
| React-redux | Frontend | Redux is a predictable state container for JavaScript apps. |
| React-router-dom | Frontend | React Router is a library for routing in React applications. |
The database for the users and campaigns are using the following commands into MySQL:
| Name of Database | List of Commands to run |
|---|---|
| Database for the users; The session token is a unique ID that is stored on the clients cookies/session that identifies the current user and session. The ‘id’ is just a unqiue id anytime I insert anything into the database the number automatically increases by 1 | CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, email VARCHAR(255) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, username VARCHAR(100) NOT NULL, session_token VARCHAR(1000) NOT NULL UNIQUE, balance DECIMAL(10,2) DEFAULT 0.00); |
| Database for the campaigns; Relationship; One-to-Many (Campaign to Category): A campaign can belong to multiple categories (up to 3), but each category can be associated with multiple campaigns. This relationship is represented by the category_ids field in the ad_campaigns table. | CREATE TABLE ad_campaigns (id INT, campaign_id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(32), image_link VARCHAR(255) NOT NULL, impressions INT (8) DEFAULT 0, clicks INT (8) DEFAULT 0, start_date DATE NOT NULL, end_date DATE DEFAULT NULL, has_end_date BOOLEAN NOT NULL, budget_per_day DECIMAL(10,2) NOT NULL, category_ids VARCHAR(100) NOT NULL, paused BOOLEAN DEFAULT FALSE, archived BOOLEAN DEFAULT FALSE); |
| Database for categories | CREATE TABLE categories (id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255) NOT NULL UNIQUE); |
For my IDE I will use Microsoft Visual Studio. Software requirements from Microsoft's website state: 4 vCPU and 16 GB of RAM recommended. Hard disk space: Minimum of 850 MB up to 210 GB of available space
| Milestone | Reasoning |
|---|---|
| Creating the core code for express, including the express store, session, database connection etc | I need this as the underlying framework for the express API so that I can create the routes for creating the account etc, this is crucial in order to completing the success criteria |
| Creating a verifySessionId utility to return the account information from the session cookie as well as creating the /protected route | The utilities are required for almost all of the routes on the express application because almost all of them need to retrieve information from the request cookie to see what account the user is using. I need the protected route to check the session ID in the browser cookie matches with a current account and returns details about it |
| Backend API for listing all campaigns, creating, editing and deleting campaigns | I need this so when a user interacts with the website it calls the API as a middleware for the listing, creating and editing as well as deleting campaigns management. |
| Backend API for creating and registering account | This is needed so when the users want to create an account they can, I also need to be able to verify the HCaptcha was valid which the API can do whilst if I didn’t have the API and just called the database for registering then I would not be able to verify whether the HCaptcha was successfully solved. |
| Backend API for logging in and logging out | This is needed so the user can verify the password is correct with the hashed password using the bCrypt library which could not be done if there was no API, and I just called the backend database from the frontend website instead. |
| Initialising React JS, getting React Store, Axios, Browser Routes | I need to initialise ReactJS and all of the libraries to start working on the different pages. |
| Creating the Login and Register page | I need to create the Login page that uses Axios to call the API to verify the account is correct and I need the register page to use HCaptcha and call the API with the users input returning back whatever result the API gives. |
| Creating the CampaignManager and Edit Campaign Page | I need to create the Campaign Manager as it lists all the campaigns (and stores them in React Store) and functionality to edit the campaign by creating a new page. |
On my actual coursework I went through the code in detail, explaining everything as well as stakeholder feedback.
| Criteria | Success | Evaluation |
|---|---|---|
| Can businesses create an account | Met | The business can click on the register button which redirects them to a register section, the data is persistent as it is stored in MySQL therefore, they can use an account |
| The business account is secure and cannot be hacked | Partially Met | The business’s password is hashed; however, it could be more secure as the MySQL database isn’t fully encrypted and the session tokens could be exposed as they are stored in plain text, a better way of doing this is to hash and compare the session tokens as well as the password |
| The business can create, update, and delete media campaigns | Met | The business has access to a campaign manager page which allows them to see all their campaigns as well as create, edit and delete them |
| The API needs to be able to manage logins, registers, and new campaigns | Met | The API is fully capable of handling signups, logging in and managing campaigns as a successful middleware between the frontend website and backend database. |
| The database can store accounts and campaigns | Met | The MySQL database is persistent and can store both accounts and campaigns |
| The businesses have an interface (website) that can be interacted with | Met | The React website is successful and shows all relevant information and gives businesses access to creating an account, logging in and managing campaigns. |
| The database can store accounts and campaigns | Met | The MySQL database is persistent and can store both accounts and campaigns |
| The businesses have an interface (website) that can be interacted with | Met | The React website is successful and shows all relevant information and gives businesses access to creating an account, logging in and managing campaigns. |
| Registration is secure and bots cannot use it (CAPTCHA) | Partially Met | HCaptcha is used to effectively detect and remove bots from signing up on the website. |