Headless WordPress with React Frontend

ISYS3004 Business Web and Mobile Technologies

Overview

In this assignment, you will create a decoupled web application consisting of a headless Word-
Press site serving as a content management system (CMS) and a separate React frontend to
display that content. Communication between the backend (WordPress) and frontend (React)
will occur via the WordPress REST API. This architecture reflects modern web development
practices.

Learning Objectives

Upon successful completion of this assignment, you will be able to:

• Understand and articulate the principles of headless CMS architecture.

• Set up and configure WordPress as a headless CMS.
• Utilize the WordPress REST API to fetch and manage content.
• Develop a functional React frontend application that consumes API data.
• Diagnose and resolve Cross-Origin Resource Sharing (CORS) issues.
• Deploy both backend and frontend components to suitable hosting platforms.
• Apply responsive design principles to create adaptable user interfaces.
• Employ AI development tools ethically and effectively, demonstrating understanding of
the generated code and overall system.
• Manage project code using Git and GitHub, including private repositories and collabo-
ration settings.

Repository Setup and Access

• Private GitHub Repository: You must create a private GitHub repository to host
your React frontend code.

1
 • Instructor Access: You are required to invite your instructor (and any specified
TAs/markers) as a collaborator to your private repository. Use the GitHub username(s)
provided separately by the teaching staff. Ensure access is granted before the submission
deadline. Failure to provide access will hinder the marking process.
• Commit History: Use Git for version control throughout your development process.
Commit frequently with clear, meaningful messages. Your commit history should reflect
the progression of your work.

AI Usage Guidelines

You are encouraged to leverage AI tools (e.g., ChatGPT, Claude, GitHub Copilot) as develop-
ment assistants. However, you are ultimately responsible for the code you submit and must
be able to explain its functionality and design choices.
Helpful AI Uses:

• Conceptual understanding (WordPress REST API, CORS, React Hooks).

• Generating boilerplate code (React components, CSS structures, fetch requests).
• Debugging assistance (identifying errors, suggesting solutions).
• Guidance on deployment and configuration steps.

You Must Understand and Be Able to Explain:

• The specific WordPress REST API endpoints used in your project and the data they
provide.
• The complete data flow within your React application (API fetch -> state management
-> component rendering).
• The details of your chosen CORS configuration and why it works.
• The deployment process for both the WordPress backend and the React frontend.
• Any code significantly generated or influenced by AI tools.

Document AI Usage:
In your README.md file, include a dedicated section detailing:

• Which AI tools you used.

• Specific tasks or challenges where AI provided assistance.
• How AI helped (e.g., generated code snippets, explained concepts, debugged issues).
• Any limitations you encountered with AI suggestions.
• Crucially, reflect on what you learned through the process, including how you verified or
adapted AI-generated code.

2
Academic Integrity

• Original Work: All submitted work must be substantially your own, reflecting your
understanding of the concepts and implementation details.
• External Sources & Collaboration: While you may consult online resources, tutori-
als, or AI tools, directly copying large portions of code from external repositories (e.g.,
other students’ work, public GitHub projects, tutorials) without significant modification,
proper attribution (where appropriate), and demonstrated understanding is considered
plagiarism and will be dealt with according to university policy.
• AI as a Tool, Not a Replacement: Using AI to generate the entire project without
understanding or significant input is not acceptable. Focus on using AI to assist your
learning and development process, not to bypass it.
• Plagiarism Detection: Submissions may be checked using plagiarism detection soft-
ware, which compares against internet sources, academic papers, and previous student
submissions, including code repositories where accessible.

Project Requirements

1. WordPress Backend Setup

• Hosting: Use a suitable hosting provider (e.g., 000WebHost for a free option, or other
providers).
• Content: Create and publish at least:
– 3 Blog Posts (with featured images, categories/tags). (Reduced from 5)
– 3 Pages (e.g., Home, About, Contact).
– 1 Custom Post Type (CPT) relevant to your site’s theme (e.g., Projects, Portfolio,
Products, Events) with at least 2 entries. Use appropriate custom fields if needed.
(Reduced from 3)
• Plugins:
– Required: A plugin to create the Custom Post Type (e.g., Custom Post Type UI)
OR implement it via functions.php.
– Required: A plugin or method to configure CORS (e.g., WP CORS, or code in
functions.php).
– Optional but Recommended: Advanced Custom Fields (ACF) if your CPT
requires structured custom data.
– Optional: JWT Auth for REST API (if you wish to explore authenticated requests,
though public endpoints are sufficient for base requirements).
• REST API: Ensure the necessary REST API endpoints for posts, pages, your CPT,
and media are publicly accessible and return data in JSON format. (Search endpoint is
now optional/bonus)

3
2. React Frontend

• Setup: Create your React application using a standard toolchain (e.g., Create React
App or Vite).
• API Connection: Fetch data dynamically from your live WordPress REST API end-
points.
• Routing: Implement client-side routing using React Router to create a single-page
application experience.
• Pages/Views:
– Home Page (e.g., display latest posts, featured content, or a welcome message).
– Blog List Page (displaying multiple post titles, excerpts, featured images, dates).
Pagination is NOT required for base marks. (Pagination removed as require-
ment)
– Single Post View (displaying the full content of a selected blog post).
– Custom Post Type List Page (displaying all entries of your CPT).
– Custom Post Type Detail View (displaying the full details of a selected CPT entry).
– Standard Pages (displaying content for your ‘About’ and ‘Contact’ WordPress
pages).
• Features:
– Navigation Menu: Implement a main navigation menu (linking to Pages, Blog,
CPT list). This can be hardcoded in React or dynamically generated (see
Bonus Features). (Dynamic generation removed as requirement)
– Responsiveness: Ensure the layout adapts gracefully to different screen sizes
(mobile, tablet, desktop) using CSS (e.g., Tailwind CSS, Bootstrap, CSS Modules,
Styled Components).
• React Best Practices:
– Use functional components and Hooks (useState, useEffect, etc.).
– Manage component state effectively.
– Handle asynchronous operations (API calls) correctly, including loading and error
states.
– Structure your code logically (e.g., separate components, services/utils for API
calls).

3. CORS Configuration

• Configure WordPress to allow cross-origin requests specifically from your deployed React
application’s domain (and localhost for development).
• Implement this using one valid method:
– WordPress CORS plugin (configure allowed origins).
– Code snippet in your theme’s functions.php file (setting appropriate
Access-Control-Allow-Origin headers).

4
 – Server-level configuration (e.g., .htaccess for Apache, if your hosting allows) -
generally more complex.
• Test thoroughly to ensure your React app can fetch data from the WordPress API without
CORS errors. Document your chosen method and configuration in the README.

4. Deployment

• WordPress Backend: Deploy your configured WordPress site to your chosen hosting
provider (e.g., 000WebHost). Ensure it is publicly accessible.
• React Frontend: Deploy your React application to a static hosting platform (e.g.,
Netlify, Vercel, GitHub Pages).
• Connectivity: Ensure the deployed frontend successfully communicates with the de-
ployed backend API. Update CORS settings on WordPress to allow requests from your
final deployed frontend URL.

Bonus Features (Optional Extensions)

Implementing the following features is optional but provides an opportunity to demonstrate

advanced skills and potentially earn bonus marks that may contribute towards a final grade
above 100% for this assignment (subject to overall course grading policies). Clearly document
any implemented bonus features in your README.

• Search Functionality: Implement a search bar that queries the WordPress REST
API search endpoint (/wp/v2/search?search={term}) and displays formatted results.
(Approx. +5% bonus)
• Blog Post Pagination: Implement pagination on the Blog List page to handle larger
numbers of posts gracefully. (Approx. +3% bonus)
• Dynamic Navigation Menu: Fetch menu structure data from WordPress (e.g., using
a dedicated API endpoint if available, or fetching pages/categories) and dynamically
generate the main navigation in React instead of hardcoding it. (Approx. +2% bonus)

(Note: The bonus percentages are indicative; final allocation may vary based on implementation
quality.)

Understanding the Architecture

• WordPress (Backend): Acts solely as the content repository and API provider. It
does not render the user-facing website.
• REST API (Bridge): The communication layer serving content as JSON data (e.g.,
/wp-json/wp/v2/posts).
• React (Frontend): Fetches data from the API and handles all aspects of presentation,
layout, and user interaction in the browser.

5
 • CORS (Security): Essential mechanism that must be configured on the backend
(WordPress) to permit requests from the different domain where the frontend (React) is
hosted.

� What About WordPress Themes? In this headless setup, the traditional WordPress
theme system is not used for the frontend. Your React application completely replaces the
theme’s role in displaying content. You are building the entire user interface from scratch in
React.

Frontend UI/UX Expectations

Your React frontend should provide a professional and usable experience:

• � Clear Navigation: Easy access to all main sections (Home, Blog, CPT, Pages).
• � Content Display: Legible presentation of posts, pages, and CPT data (titles, content,
images, metadata).
• � Blog Functionality: List view with key info and a readable single post view. (Pagi-
nation is a bonus)
• � CPT Display: List and detail views appropriate for your chosen custom post type.
• � Responsiveness: Layout works well and is usable across common device sizes (mobile-
first approach recommended).
• � Loading/Error States: Provide user feedback during API calls (e.g., loading indica-
tors) and handle potential errors gracefully.
• (Search is a bonus feature)

You have creative freedom in design, but prioritize usability, clarity, and responsiveness for
the core requirements.

Example API Endpoints (Check Your Specific Setup)

• GET /wp-json/wp/v2/posts
• GET /wp-json/wp/v2/posts/{id}
• GET /wp-json/wp/v2/pages
• GET /wp-json/wp/v2/pages/{id}
• GET /wp-json/wp/v2/{your-custom-post-type-slug}
• GET /wp-json/wp/v2/{your-custom-post-type-slug}/{id}
• GET /wp-json/wp/v2/media/{id} (for image details)
• GET /wp-json/wp/v2/search?search={term} (Required for Bonus Search Feature)

Use browser developer tools or tools like Postman/Insomnia to explore and test the API
endpoints available on your WordPress site.

6
Documentation Requirements (README.md)

Create a comprehensive README.md file in the root of your private GitHub repository. It
must include:

• Project Title and Overview: Brief description of the project.

• Student Details: Your Name and Student ID.
• Live URLs:
– Link to the live WordPress backend site.
– Link to the live deployed React frontend (Netlify/Vercel/etc.).
• GitHub Repository URL: (For completeness, though the marker will access via col-
laborator invite).
• Screenshots: Include illustrative screenshots of:
– Key WordPress admin areas (e.g., CPT setup, sample content).
– Key pages of your React frontend application.
• API Endpoints Used: List the specific WordPress REST API endpoints your React
app consumes (including bonus endpoints if used).
• CORS Solution: Explain the method you used to configure CORS and any relevant
settings.
• AI Usage Summary: Detailed description as outlined in the “AI Usage Guidelines”
section.
• Implemented Bonus Features: Clearly list which bonus features (if any) you imple-
mented.
• Local Setup Instructions: Clear steps on how someone else could clone your reposi-
tory, install dependencies (npm install), and run the React application locally (includ-
ing any necessary environment variables, e.g., for the WordPress API URL).
• Key Challenges & Solutions: Briefly describe any significant hurdles encountered
during development and how you overcame them.
• Possible Future Improvements: Suggest potential enhancements or features you
might add if you had more time.

Submission Method

Submit the following via the official course LMS assignment link by the deadline:

1. Single PDF Document: Upload one PDF file containing:

• Your Name and Student ID.
• Assignment Title.
• The URL to your live WordPress backend.
• The URL to your live Netlify (or equivalent) frontend.

7
 • The URL to your private GitHub repository. (Ensure instructor access has
been granted).
• The full, formatted content of your README.md file pasted directly into the doc-
ument.
This PDF serves as the official timestamped record of your submission.
2. Private GitHub Repository Access: Ensure your instructor/markers have been
successfully invited as collaborators to your private repository before the deadline.
3. Live Deployments: Ensure your WordPress and React sites are live, accessible via the
provided URLs, and functioning correctly from the time of submission until marking is
complete.

Assessment Criteria

Criteria Weight
Description
Functionality 30% All required features work correctly; API integration is successful;
(Core) content displays accurately; navigation functions as expected.
Code 20% React code is clean, well-organized, follows best practices; uses
Quality & components effectively; state management is logical; Git history is
Structure meaningful.
UI/UX 15% Frontend is visually presentable, user-friendly, and adapts well to
Design & different screen sizes. Loading/error states are handled.
Responsive-
ness
Documentation15% README is comprehensive, clear, includes all required sections
(README) (including bonus features if applicable). Local setup instructions are
accurate.
CORS Con- 5% CORS is correctly configured allowing the deployed frontend to access
figuration the backend API; the solution is documented.
Deployment 5% Both WordPress backend and React frontend are successfully deployed
Success and publicly accessible via the provided URLs.
Repository 5% Private repository correctly set up with instructor access granted
Setup before the deadline.
AI Usage & 5% AI usage documented thoughtfully in README, demonstrating
Understand- reflection, understanding of generated/influenced code, and ethical use.
ing
Total (Core) 100%
Bonus Up Additional marks awarded for successful implementation of optional
Features to bonus features (Search, Pagination, Dynamic Nav), potentially
+10% exceeding 100%.

8
Tips for Success

• Recommended Workflow:
1. Develop Locally: Set up WordPress locally (e.g., using LocalWP) and develop
your React app locally (npm start).
2. Connect Locally: Configure React to fetch from your local WP API URL and
set up local CORS on WordPress to allow requests from localhost:3000 (or your
React dev server port).
3. Test Locally: Build and test all core features thoroughly in your local environment.
4. Deploy Backend: Deploy your WordPress site to your chosen hosting provider.
Migrate content if necessary.
5. Deploy Frontend: Build your React app (npm run build) and deploy it to
Netlify/Vercel.
6. Configure Live: Update React (e.g., via environment variables) to use the live
WP API URL. Update CORS on the live WordPress site to allow requests from
your live React app’s URL. Re-deploy React if needed.
7. Test Live: Verify everything works correctly on the deployed sites.
• Start early, especially with the WordPress setup and content creation.
• Focus on meeting the core requirements first before attempting bonus features.
• Test your WordPress REST API endpoints independently using browser tools or Postman
before integrating with React.
• Break down the React development into smaller features (e.g., fetch posts, then pages,
then CPT).
• Implement basic loading and error handling for API requests from the start.
• Configure CORS early in the process, testing with localhost first, then updating for
your deployed frontend URL.
• Use a CSS framework (like Tailwind) or strategy (like CSS Modules) to manage styling
efficiently.
• Commit your code to Git frequently.
• When using AI, ask follow-up questions to ensure you understand the code or concepts
it provides. Don’t just copy-paste.

Good luck! This assignment provides valuable experience with a powerful and increasingly
common web architecture.