Birmingham Business Magazine

Team Codey McCodeface:

Chari Cruz, Erin Smith, Gaby Mia, Josh Foston, Pete Faretra, Ravi Kataria

As part of our final project at School of Code, Codey McCodeface have been partnered with Birmingham Business Magazine to help them find a solution to optimising their online presence.

Table of Contents

1. About The Project
   • Initial Brief
   • The Problem
   • Refined Problem Statement
   • The Solution
   • MVP 1
   • Tech Stack
2. The Plan
   • User Flow
   • Wireframing
   • Component Tree
   • Architecture Diagram
3. The Build
   • How We Worked
   • Strapi Content Management System
   • API
   • API URL
   • Helper Functions
   • Requirements Table
   • EmailJS
   • Accessibility
   • Search Engine Optimisation

About The Project

Initial Brief

The Problem

Refined Problem Statement

Birmingham Business magazine’s website is outdated and not engaging, which means they are not maximising traffic to their site and stories. It is also difficult to manage from the editors’ side.

The Solution

A revamped platform that prioritises user engagement, accessibility, and content management efficiency while also optimising SEO to drive more traffic, transforming the digital experience.

MVP 1

Tech Stack

Design
Front End
Back End
Testing
Deployment

(back to top)

The Plan

User Flow

We created a user flow diagram to help visualise how a user would navigate the different sections of the website and actions they are able to take on each page, ensuring seemless flow throughout our MVP. This would help us with the bulid stages later on.

Wireframing

After initial ideation and user research stages we began work on the design of the website using the research we had gathered. We created wireframes in Figma for the three pages of our first MVP.

Component Tree

We created a component tree of all of the pages within our file structure and their components. Please note this has been split into two diagrams to fit on the page.

Architecture Diagram

We created an application architecture diagram that illustrates how the various aspects of the build connect.

(back to top)

The Build

How We Worked

We created a ticketing system in GitHub projects to assign jobs to team members. We also split off into smaller groups of either 2 or 3 in order to cover more ground. We rotated our pairs regularly so that each of us was able to work with every other member and also to get a holistic understanding of the project and broaden our skillset in all areas of the software development process.

Strapi Content Management System

To start deploying Strapi to Railway, download or fork the Railway’s starter Strapi repository on Github to Your local machine.

https://github.com/railwayapp-templates/strapi

1. Now, using Railway’s platform, you can deploy your Strapi application.

https://railway.app/new/template/strapi?referralCode=milo

Railway swiftly creates a Postgres database with a Docker image, seamlessly builds the Strapi user interface, and efficiently links it to the database via API.

After deployment, you can log into the Strapi UI to create your first user using the provided URL and add /admin endpoint to the address.

👉 Railway's filesystem is ephemeral, so changes to it are not persisted between deployments. This template uses Cloudinary for media storage. Head over to Cloudinary to make a free account and then enter the details during or after deployment. https://cloudinary.com/

1. Install the Command Line Interface

The Railway Command Line Interface (CLI) lets you interact with your Railway project from the command line to run developer mode and start creating new content types.

You can then make changes and redeploy your site from your local machine. Alternatively, you can set up a CI / CD pipeline from your GitHub repository using GitHub Actions to redeploy your application every time you commit to the main.

Follow the documentation to get started.

https://docs.railway.app/guides/cli

1. Connect to Railway from your local machine.

• Install the dependencies yarn install or npm install
• If this is the first time using the CLI login with railway login
• Run railway link to link the local repository to the Strapi service on Railway
• Start Strapi for development with railway run yarn run develop or railway run npm run develop This command runs Strapi in development mode and allows you to start building content types locally.
• Open your browser to http://127.0.0.1:1337/admin

Creating new content types

Creating content types will begin building database tables where you can store your data. You can then make the data available on the pre-made API.

For more detailed instructions, head over to the Strapi docs. https://docs.strapi.io/dev-docs/quick-start

Step 1: Create a "Article" collection type

Your article directory will eventually include many articles, so we need to create an "Article" collection type. Then, we can describe the fields to display when adding a new restaurant entry:

1. Click on the Create your first Content type button.If it's not showing up, go to  Content-type Builder in the main navigation.
2. Click on Create new collection type.
3. Type Article for the Display name, and click Continue.
4. Click the Text field.
5. Type Title in the Name field.
6. Switch to the Advanced Settings tab and check the Required field.
7. Click on Add another field.
8. Choose the Rich text (Blocks) field in the list.
9. Type Description under the Name field, then click Finish.
10. Finally, click Save and wait for Strapi to restart.

Step 2: Create an entry for the "Article" collection type

1. Go to  Content Manager > Collection types - Article in the navigation.
2. Click on Create new entry.
3. Type the title of your new article in the Title field. Let's say it's How to get ahead in advertising.
4. In the Description field, write a few words about it. If you're lacking some inspiration, you can use Welcome to Advertising! We offer a fresh new approach for passionate producers.
5. Click Save.

The Article is now listed in the Collection types.

Step 4: Set API token, Roles & Permissions

We have just added an article. Now, we need to make sure that the content is accessible through the API and protect it with an API token:

1. Click on  Settings at the bottom of the main navigation.
2. Under Global Settings, click API Tokens.
3. Click Create New API Token.
4. Fill out the Name and Description. Add Unlimited for the duration and Read-only for the Token type
5. Under Permissions, select Article and select find and findOne
6. Now Under the Users & Permissions Plugin, choose Roles.
7. Click the Authenticated role.
8. Scroll down under Permissions.
9. In the Permissions tab, find Article and click on it.
10. Click the checkboxes next to find and findOne.
11. Finally, click Save.

Deploy to your Railway application

Open a new terminal window in your local repository and run railway up to deploy the production site.

Test your API is running with Postman

https://www.postman.com/

1. In a new workspace, send a GET request using your public address for your API - you can find this in your Railway dashboard. It should look something like https://strapi-production-XXXX.up.railway.app/
2. Add the api/article endpoint to the URL
3. Under Authorizations > Auth Type, select Bearer Token
4. Paste your newly created API token into the Token area
5. Hit send, and you should see the JSON object of your article.

Congratulations! You can now use your API to connect to the front end.

(back to top)

API

API URL

The following URL is used to access the API: https://strapi-production-9d37.up.railway.app/api

Helper Functions

All API helper functions can be found in the request.js file. These contain helper functions for the following requests:

GET ARTICLES - Retrieve all articles from a specific news section.

A get request can be made to retrieve all articles from a specific section. Each article JSON object includes the following data:

• Headline (the title of the article)
• Subheading (the subheading that appears on the home page under each title)
• Image
• Description (the leading paragraph of the article)
• Copy (the rest of the written article)
• Advertisement (up to 5, each with an image file and a link)

These are the available sections and their API endpoints:

• News: /news
• Features and Analysis: /features
• Five Minutes With: /five-minutes-withs
• Insights: /insights

Using these endpoints will retrieve all articles from the specified section, however in order to include article image files and advertisement image files in the payload, the following query must be added to the endpoint:

?populate[0]=image&populate[1]=ad1&populate[2]=ad2&populate[3]=ad3&populate[4]=ad4&populate[5]=ad5

For example, to request all articles from the News section including their article images and advertisement images, the following API URL is used:

https://strapi-production-9d37.up.railway.app/api/insights/?populate[0]=image&populate[1]=ad1&populate[2]=ad2&populate[3]=ad3&populate[4]=ad4&populate[5]=ad5

These API requests are made to retrieve the most recent articles, in order to populate the website homepage.

The following components make use of the Get Articles API helper functions:

• /NewsSection.jsx - getNewsArticles
• /MostPopular.jsx - getNewsArticles
• /FeaturesAndAnalysis.jsx - getFeaturesArticles
• /FiveMinsWith.jsx - getFiveArticles
• /Insights.jsx - getInsightsArticles
• /news/[slug]/page.js - getNewsArticles
• /features/[slug]/page.js - getNewsArticles
• /five-minutes/[slug]/page.js - getNewsArticles
• /insights/[slug]/page.js - getNewsArticles

GET ARTICLE BY ID - Retrieve a specific article from a specific news section.

A get request can be made to retrieve a specific article from a specific section by using its ID number. The id immediately follows the section endpoint, for example:

https://strapi-production-9d37.up.railway.app/api/news/1

The same query must be added to the endpoint in order to include the article images and advertisement images in the payload. For example to retrieve the News article with the ID number 1, including its article images and advertisement images, the following API URL is used:

https://strapi-production-9d37.up.railway.app/api/news/1?populate[0]=image&populate[1]=ad1&populate[2]=ad2&populate[3]=ad3&populate[4]=ad4&populate[5]=ad5

These API requests are made to retrieve a specific article when a hyperlink to that article is clicked on the homepage. The article has already been fetched to display on the homepage, so the ID is retrieved from the JSON data and fed into the API request to display the story page of that particular article.

The ID is also used as the slug for the article’s URL on the website. For example, the News article with the ID number 1 will be linked to using the following URL:

https://birmingham-biz-kappa.vercel.app/news/1

The following components make use of the Get Article By ID API helper functions:

• /news/[slug]/page.js - getNewsArticleById
• /features/[slug]/page.js - getFeaturesArticleById
• /five-minutes/[slug]/page.js - getFiveArticleById
• /insights/[slug]/page.js - getInsightsArticleById

GET BBTV EPISODES - Retrieve all BBTV episodes.

A get request can be made to retrieve all BBTV episode data at the following endpoint: /bbtvs

Each episode JSON object contains the following data:

• Link (a link to the episode on YouTube/Vimeo)
• Title (the episode title)
• Date (the date that the episode was released)
• Description (a short description of the featured guests)

This API request is made to retrieve all BBTV episodes, in order to populate the website homepage with the most recent episode.

The following component makes use of the Get BBTV Episodes helper function:

• /BBTV.jsx - getBbtvEpisodes

GET MAGAZINE ARCHIVE - Retrieve all magazines.

A get request can be made to retrieve all Birmingham Business magazine data at the following endpoint: /archives

Each magazine JSON object contains the following data:

• MagazinePDF (a link to the PDF for download)
• MagazineCover (an image of the front cover)
• Issue (the months of the magazine’s issue e.g. Nov/Dec 2023)

This API request is made to retrieve all magazines, in order to populate the website homepage with the two most recent magazines for download.

The following component makes use of the Get Magazine Archive helper function:

• /Magazine.jsx - getArchive

Other API Requests

The API does not support POST, PUT, PATCH, or DELETE requests, as these actions are performed manually by the authorised user through Strapi.

Requirements Table

HTTP Method	Path	Request Body (JSON)	Response Body (JSON)	Status Code	Description
GET	/news	N/A	List of articles	200	Retrieve all News articles
GET	/features	N/A	List of articles	200	Retrieve all Features and Analysis articles
GET	//five-minutes-withs	N/A	List of articles	200	Retrieve all Five Minutes With articles
GET	/insights	N/A	List of articles	200	Retrieve all Insights articles
GET	/news/:id	N/A	A specific article	200	Retrieve a specific News article
GET	/features/:id	N/A	A specific article	200	Retrieve a specific Features and Analysis article
GET	/five-minutes-withs/:id	N/A	A specific article	200	Retrieve a specific Five Minutes With article
GET	/insights/:id	N/A	A specific article	200	Retrieve a specific Insights article
GET	/bbtvs	N/A	List of BBTV episodes	200	Retrieve all BBTV episodes
GET	/archives	N/A	List of magazines	200	Retrieve all Birmingham Business magazines

Additional Queries

Retrieve articles with image files and ad images:

?populate[0]=image&populate[1]=ad1&populate[2]=ad2&populate[3]=ad3&populate[4]=ad4&populate[5]=ad5

Retrieve magazines with images:

?populate=*

(back to top)

EmailJS

To send messages via the contact form:

Configuration

Created Birmingham Business dummy gmail account to receive messages sent from contact form.

Set up a Service ID, Template ID and API key within emailJS.

Set up the send template and automatic replies to sender.

Code set up:

(back to top)

Accessibility

Our project is committed to ensuring digital accessibility for all, and we aimed to conform to the Web Content Accessibilty Guidelines 2.1, level AA. For more information on the tools and methods we used, please refer to our Accessibility Docs.

Search Engine Optimisation

SEO was a major focus of our stakeholders. While much of the app's SEO and web performance was addressed during the build, we also produced an SEO Plan to help our stakeholders boost traffic to their site from their side.

(back to top)