Server Explorer

A GatsbyJS React app written in TypeScript that retrieves a sortable list of servers via token based user authentication and cookie management.

Installation

• Install dependencies: yarn
• Run the project: yarn dev

Features

• Token based user authentication with fetch.
• Token stored as a cookie so that users don't have to re-authenticate when they re-visit the site. This expires after 1 day.
• Form authentication error handling.
• API requests handled with fetch based promises.
• Accessibility with Aria attributes and semantic markup.
• State management with React context, useState, and useReducer.
• Login modal built with React Portal.
• Built with React, TypeScript, and SASS.
• Cross browser/device tested including IE11.
• Styling based off GitHub's dark theme.
• Deployed to Vercel.
• Minimal packages.

Features that Could be Added

• Unit Testing: I haven't written tests, but this is a priotiy for me to learn.
• Add animations with GSAP: This would give the site more life, and given the sites limitation of needing to support IE 11, GSAP would work perfectly.
• Improve tab indexing: This currently works as expected because the correct HTML was used, but there needs to be a nicer focus outline, and when the login is open, the user can still navigate the site with tab index while the portal is open.
• Custom Select element: Currently the sort function works with an HTML5 <select> element, which works fine. Building something custom would bring it in line with the rest of the sites look. I could also add other sort features to this.
• Add SEO with Helmet: Build a component to make the generation of SEO features, such as, structured data, OG tags, and relative meta data easier and almost effortless for content editors. I have done this here here.

Work Projects

• HP OMEN
• HP Possibility City
• Universal Studios Sherlock Gnomes

Personal Project Examples

• Gatsby Markdown Blog: Gatsby JS, Helmet SEO, Markdown generated content, and advanced tooling to create a great developer experience.
• Upsplash Search: A Create React App that queries the Upsplash API and displays the results as a grid for viewing.
• Price App: An app built with Fauna DB, graphQL, TypeScript, and React/Gatsby JS.