ScubaHub

ScubaHub website

A sample application to demonstrate the exploration of new frameworks and tools while maintaining a mobile-first and accessible-inclusive UI according to WCAG 2.0 AA. ScubaHub demonstrates in a fun & hip way building an end-to-end application with the following:

Next.JS - Application framework for React
Contentful - GraphQL Content API
GraphQL - queries
Apollo Client - query digest
Material UI - UI library
Emotion - Isolated component styling
Cypress - Integration tests
Google Maps API - Integration example (without a developer APIKey)
Netlify - website deployment

And most importantly cool information about Scuba Diving, feel free to dive in and explore.

Installation

yarn install

Installs all the dependencies.

Development

yarn dev

Runs the app in development mode.
Open http://localhost:3000 to view it on your browser.
The page will automatically reload if you make changes to the code.

Tests

yarn cypress:open

This application is supporting Cypress integration tests, this command will open the tests option click "Run all specs" and see how the application is being tested by visiting the website and ensuring the elemnets and the routing commends are all in place.

Deployment

yarn export

Builds a static HTML export of the Next.JS app, the export creates a out folder that could be used for production. The Netlify deployment above currently uses this command to create the distribution folder.

yarn build

Builds the app for production and locate the distribution files on .next folder.

Production

yarn start