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
3. The Build
   • How We Worked
   • API
   • Requirements Table

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.

(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.

API

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)