Rachel McDonald
Full-Stack
Software Engineer

A Flask-based narrative RPG web app where players navigate a branching story as an Elven Ranger, facing choices, encounters, and combat that shape the outcome. Built with Python, Jinja2, HTML, CSS, and JavaScript, featuring a session-based combat system, animated character sprites, typewriter dialogue, and particle effects. Planned features include an inventory system, XP-based character upgrades, and expanded story paths.

• View Code

• Live Demo

• CI Pipeline

Cosy Companion is a React-based productivity app that blends task management with gamified progression and an evolving avatar companion. It provides a playful interface for organising daily goals while laying the foundation for a reward-driven user experience. The project is ongoing, with planned features such as unlockable accessories, dynamic backgrounds, lo-fi music integration, and additional quest-style task systems. It is being developed as a long-term portfolio project to showcase full-stack development, UI design, and interactive feature planning.

• View Code

Collaborated in a team to design and develop a full-stack task management application that enables users to securely create, organize, and track tasks, goals, and custom categories. Built using Java, Spring Boot, React, and JavaScript, the platform supports full CRUD functionality along with collaboration features, allowing users to add contributors to shared task workflows. Implemented secure user authentication and authorization through Auth0, ensuring each user can only access and manage their own data while logged in. The project demonstrates experience building scalable, secure applications with modern full-stack architecture, RESTful services, and team-based Agile delivery. Development was supported through professional workflows including GitHub version control and branching, with planning and design carried out using Trello, Figma, Miro, and API testing via Insomnia.

• View Code

Collaborated in a small Agile team to develop an interactive geography-based trivia game, combining general knowledge questions with real-time map-based user input. Built using JavaScript, React, Node.js, Express, and MongoDB, the application challenges users to answer location-based questions by placing markers directly on a Google Maps API interface. Implemented core game logic including randomized question generation, distance-based scoring calculations, round summaries, and a persistent leaderboard system. This project demonstrates experience delivering a full-stack application with third-party API integration, responsive UI development, and collaborative software engineering workflows.

• View Code

Developed a full-stack travel bucket list web application as my first solo capstone project during CodeClan’s intensive 800+ hour Software Development programme. Built using Python, Flask, SQL, and PostgreSQL (psycopg2), the app supports complete CRUD functionality for managing countries and cities, with destinations tracked by visited status. Implemented relational data handling, dynamic template rendering with Jinja logic, and a clean, responsive UI with interactive navigation and form-driven workflows. This project demonstrates strong foundations in RESTful design, database-backed applications, and user-focused full-stack development.

• View Code

Designed and developed a responsive personal portfolio website to showcase projects and technical skills through an interactive, user-focused interface. Built using HTML, CSS, and JavaScript, with animated call-to-action components and hover-based micro-interactions to enhance usability and engagement. Implemented a dark mode toggle feature that dynamically switches between light and dark themes, improving accessibility and user preference support. The site was developed with a mobile-first, responsive layout, ensuring consistent performance and visual presentation across a wide range of devices including smartphones, tablets, and desktop screens. Enhanced accessibility and performance through semantic HTML, optimized CSS animations, and lightweight interactive components to minimize load times across devices.

• View Code

Developed an interactive pixel-based animation in JavaScript to simulate a rainfall-like visual effect over an uploaded image. The project dynamically generates and manipulates approximately 5,000 individual pixel elements, creating the illusion of motion through randomized velocity, size variation, and speed adjustments. Animation logic was implemented using nested for-loops and JavaScript’s Math.random(), demonstrating control over large-scale DOM manipulation and real-time updates. Optimized rendering for smooth performance, and structured the DOM updates to minimize reflows, ensuring consistent animation across different screen sizes.

• View Code

Designed and built a responsive product landing page featuring interactive UI elements and smooth user navigation. Developed using HTML5 and CSS, with animated call-to-action buttons and a fixed background reveal effect for added visual depth. Integrated embedded multimedia content through a playable YouTube video, and implemented a user contact form for structured data collection. Ensured responsive design and accessibility, including semantic HTML for form inputs, focusable elements for keyboard navigation, and fluid layouts for multiple device widths.

• View Code

Developed a fully responsive SVG-based bar chart visualization using JavaScript and the D3.js library to present time-series data in a clear, user-friendly format. The chart includes dynamically generated bars, along with accurately scaled X and Y axes, complete with tick marks and labels to support readable interpretation of the dataset. Implemented interactive functionality through a tooltip system, enabling users to hover over individual bars to reveal contextual data values for specific years. This demonstrates proficiency in DOM manipulation, event handling, and building engaging data-driven UI components. The project was built with HTML5, CSS3, vanilla JavaScript, and D3.js, and completed as part of FreeCodeCamp’s Data Visualization Certification, representing over 300 hours of applied coursework and serving as one of the programme’s final capstone projects.

• View Code

Developed a fully responsive SVG-based bar chart visualization using JavaScript and D3.js to present time-series data. The chart includes accurately scaled X and Y axes with tick labels and interactive tooltips to display contextual data on hover. Demonstrated proficiency in DOM manipulation, event handling, and building engaging, data-driven UI components. Enhanced usability and accessibility by adding keyboard-friendly interactions, descriptive labels for screen readers, and responsive SVG scaling for multiple screen sizes.

• View Code

Developed a single-page technical documentation website focused on presenting structured JavaScript reference content. Built using semantic HTML5 and CSS, incorporating code blocks, anchored navigation links, and structured lists. Implemented an ID-based anchor navigation system with a fixed sidebar for efficient section access. Optimized for responsive layouts and ensured keyboard navigation compatibility and semantic markup for accessibility.

• View Code

Created a responsive single-page tribute website dedicated to a chosen public figure, designed to demonstrate front-end layout structure. Built with HTML5 and CSS, using div containers, ID selectors, and embedded imagery. Implemented anchor-linked media to provide intuitive access to external content while maintaining a focused page layout. Ensured responsive image scaling, semantic markup, and keyboard accessibility for a consistent user experience across devices.

• View Code

Developed an interactive survey form interface using HTML5 and CSS, featuring dropdown menus, multiple-choice fields, and validated input elements for structured data collection. Implemented min/max input validation for numeric fields, enhancing user experience and data integrity. Focused on responsive form layouts, semantic input elements, and accessible labeling for usability across devices and assistive technologies.

• View Code

Built a fully functional, responsive calculator application implementing the four primary mathematical operations using React, HTML, and CSS. Leveraged component-based architecture for input management, display updates, and dynamic state handling. Implemented formula/expression-based calculation logic for full expression evaluation, demonstrating conditional rendering and input validation. Ensured responsive layout and interactive feedback, optimizing rendering performance and maintaining accessibility for keyboard users.

• View Code

Developed an interactive drum machine application with nine clickable pads, each mapped to a unique audio clip, using React, JavaScript, HTML, and CSS. Users can trigger sounds via clicks or corresponding keyboard keys. Implemented real-time audio playback, pad highlighting, and state management, demonstrating component-based architecture and event handling. Optimized for accessibility and responsive design, with focus states and keyboard navigation to accommodate multiple device types.

• View Code

Developed a responsive Pomodoro-style 25 & 5 timer application using React, JavaScript, HTML, and CSS, allowing users to start, pause, reset, and customize session/break lengths. Implemented precise interval management and dynamic state updates, ensuring accurate countdown behavior and seamless transitions. Designed for responsive layouts and accessibility, including screen reader-friendly labeling and adaptable UI for different screen sizes.

• View Code