A selection of projects written for The Odin Project curriculum
Memory Card
(React)
A Lord of the Rings themed memory game.
Features: Dynamic webapp with state variables (useState), side effects (useEffect), and external API calls via fetch.
CV Builder App
(React)
A CV builder app with simple forms and a live preview.
Features: Dynamic webapp with state variables (useState), which updates the CV preview in real-time, based on user input.
Homepage
(Advanced HTML/CSS)
A polished landing page.
Features: Responsive design, with three distinct layouts based on user viewport size: mobile, tablet and desktop.
Battleship
(JS)
A human-vs-AI Battleship game.
Features: Test-Driven Development (TDD), good separation of concerns between modules, user-modifiable game settings (board size, difficulty, player name), challenging AI gameplay strategy algorithm.
Weather App
(JS)
A weather app that fetches weather data from the Virtual Crossing Web API, processes the data and displays it.
Features: Dynamic import, fetch API, and promises. Was built in a very modular component-based way.
Todo List
(JS)
A productivity app to manage and plan projects and tasks.
Features: ES6 Modules for modular code, Webpack to build the website, localStorage to automatically save user changes, single-page website with dynamically generated content
Restaurant Page
(JS)
Typical single-page restaurant website.
Features: Dynamically generated content on a single webpage, using DOM manipulation, first time using Webpack, each page has its own JS module with the code to generate it.
Tic Tac Toe
(JS)
Tic-Tac-Toe game with a simple UI.
Features: Uses factory functions and the module pattern, separating functions for gameboard logic from functions for UI modification. A 2D array was built to hold the gameboard state.
Library
(JS)
App that displays a list of books and their details, and keeps track of read status.
Features: Uses factory functions, later refactored to use classes instead, Book objects are created and stored in a library, the books have unique IDs generated at creation time. Users can add, remove, toggle read status on books.
Admin Dashboard
(Intermediate HTML/CSS)
A webpage that precisely matches a provided screenshot in terms of layout and colors.
Features: Extensive Grid and Flexbox usage, with very precise element positioning.
Sign-up Form
(Intermediate HTML/CSS)
Input form with a nice layout, which matches a provided image file.
Features: Uses only Flexbox. Currently (27-Jun-2025) needs work to make it more responsive and zoom correctly.
Calculator
(Foundations - JS Basics)
Works like a regular calculator, with keyboard input!
Features: Event listeners for all the buttons, breaking down calculator application logic. I chose to input as string, then parse to numbers for math operations, which seems to work well. It even includes a favicon!
Etch-a-Sketch
(Foundations - JS Basics)
A fun little game.
Features: Event listeners for mouse hover actions, grid size can be modified for higher or lower resolution.
Rock-Paper-Scissors
(Foundations - JS Basics)
A game of rock-paper-scissors with minimal UI.
Features: Computer picks rock, paper or scissors at random, the victor is announced and the score is updated.
Landing Page
(Foundations - CSS Flexbox)
Welcome to my farm.
Features: Flexbox usage for layout. Matches a provided image file.
Recipes
(Foundations - HTML)
Very minimal HTML page with big clickable images linking to their recipe.
Features: Navigation between webpages for each recipe and the home page.