A GatsbyJS React app written in TypeScript that retrieves a sortable list of servers via token based user authentication and cookie management.
- Install dependencies:
yarn - Run the project:
yarn dev
- 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
fetchbased promises. - Accessibility with Aria attributes and semantic markup.
- State management with React
context,useState, anduseReducer. - 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.
- 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.
- 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.