This is an online style guide for the writers of the Travel Almanac.
Client side, the application has been built with Nextjs and TypeScript. A user must be logged in to view the application. Auth has been handled using NextAuth.
Once logged in the user will be presented with the Common Words page of the application. All styling has been done using Styled Components and has been designed to reflect the format of the Travel Almanac's online publication.
The user can navigate between letters of the alphabet to view the different associated words. The masonry layout of the cards has been done using Masonic.
Users can search the site for a specific term and results across all pages will be displayed with the matching search term highlighted.
Global state management is being managed with the React Context API and useReducer hook. When the user navigates to a new page, additional data for this page is fetched from the CMS and added to global state.
The CMS has been built with Sanity.io and has a GraphQL API. Client side data fetching is being done with Apollo Client.