default-h / rewritten-rewritten

A rebuild of Toontown Rewritten's landing page

Rewriting Toontown Rewritten's Landing Page 👀

Live Site: https://rewritten-rewritten.vercel.app/
Video Demo: https://www.youtube.com/watch?v=02g3_AjNB30

Overview

The "Rewriting Toontown Rewritten" project rebuilds the landing page of one of my favorite online games, Toontown Rewritten (TTR), using Next.js, React, JavaScript, and SCSS. This project was built from scratch using my code to rebuild and restructure TTR's website while fixing the actual website's bugs and adding new features (see "Improvements / Changes"). The reasoning behind this project is for my benefit in learning web development and my love for the game! I built this to practice how to reproduce a design, properly structure a website (and make it accessible!), use React Hooks, and fetch data from an API.

To current players, this website has no affiliation with TTR, nor do the assets shown on the website belong to me. All links on the website will take you to the official website and social media belonging to TTR.

Built With

• React.JS
• Next.JS
• SASS
• Toontown Rewritten API
• React Slick

Highlights

• Incorporates mobile-first design
• Follows web accessibility standards (WCAG + aria)
• Responsive across different devices
• Consumes data from a third-party Web API
  • Data is displayed as blogpost previews. Each preview contains it's unique title and image. Clicking on the preview will open its associated blogpost in a new tab.
• Features a mock-up of a registration/login modal w/ form validation
• Reinforces HTML semantics
• Other:
  • Custom 404 + 500 page
  • Responsive across different devices
  • Interactive
  • Fixes current issues from original website (see below!)

Improvements / Changes

• Fixed webpage for iPad users + improved responsiveness
  • Inititally, iPads and tablet devices had visual issues with the banner not stretching completely across the screen (leaving empty space between the banner and right side of the page) and the mobile navigation bar being ever so slightly cut off
• "Latest News" now fetches the five most recent blog posts (originally three) with subtle styling differences
• Color scheme has changed to improve color contrast ratio for WCAG (Level AAA)
• Mobile banner features up-to-date branding
• Registration form now validates in real time rather than validating after a submission attempt
  • Additionally, users can now see requirements when focused on an input

Outcomes

After completing the project, I walked away with confidence. In addition, the skills I learned along the way can be applied to newer and bigger projects:

• Structuring project files and remaining organized
• Optimizing page load with the power of lazy loading
• Structuring a website with semantic elements and accessibility
• Fetching API and displaying data
• Making a website look good and perform well on both mobile and desktop devices

To-Do List

• Finalize navigation bar
• Implement form validation

rewritten-rewritten's Issues

Adjust welcome modal responsiveness

On desktop screen sizes, text content may overflow that can inhibit reading. Suggest reducing font size on smaller widths.

Navbar links overlap on iPad

The navbar has a bug where the "Help" link and the "Returning Toon" text overlap each other. This can cause issues when interacting with either of the two.

Solution would be to lessen the gap between the links to prevent the two sections from touching on smaller screens.