Goodbye paper dive logs, hello diverr!
Paper dive logs are difficult to keep track of. Which dives have all my shark photos? Where are all my Australia dives? What equipment did I wear when the water was 48º?
That's where diverr comes in, a multi-functional storage and library application with a social component. At the core, it provides an intuitive form to submit logs into an electronic, searchable, & filterable dive log book that is an extension of traditional paper records.
Upload your photos to your dive log and instantly share them with a worldwide community of divers who understand the thrill of swimming with manta rays, setting a new personal depth record, and passing the 24-hours-underwater mark.
Built by a six-person dev team with Next.js, React, Material-UI, NextAuth, Formik, and Postgres, diverr boasts a simple and intuitive UI while providing a highly performant back end constructed with complex queries that abstract away the front end workload.
Contributors »
Cameron Crow
•
Amanda Davitt
•
Sunil Gadgil
•
Jeff Jiang
•
Eren Serpin
•
Kenny Tran
Table of Contents
| Front End Languages |
|
| Frameworks & Libraries |
|
| Database & Back End |
|
| Design |
|
| Utilities |
|
| Testing |
 |
| Workflow |
|
| Deployment |
|
The site theme was inspired by a photo of a manta ray where sunlight hit the top of the water, and loses permeation of that sunlight as you descend deeper underwater. So, our palette consisted of a range of blues, from an almost white, light blue, to pure black with a touch of blue.
Features:
- Animated electric page to wow new visitors
- Sticky info box with a Join Today button to allow sign up no matter where users are in the feed
- Dynamic Header based on session auth status
- Authentication: OAuth sign in with Google built using NextAuth
- Login: A custom login page with video background
- Redirects: Authentication checks to dynamically render secured pages
- Never Lost: Descriptive and Assertive page routing to lead users to accessible areas
Features:
- Display Public Dive Log Photos: renders feed of photos from public dive logs uploaded by users across the planet
- Filter By Search Bar: Can enter search terms in a search bar to filter posts visible in the feed
- Filter By Image Tag: Can click on a tag on an image to filter posts visible in the feed
Features:
- Log List: Displays a list of logs, and allows the user to click a log to be displayed in the section to the right.
- Tag List: Displays a list of all tags associated with a user's logs, and allows the user to click and select a tag to filter the log list by the currently selected tags.
- Log Display: Displays the currently selected log data(defaults to the most recent.) The data is split into categories, and all media attached to the log is displayed in an image slider at the bottom.
- User Information: Displays a greeting to the user, the amount of dives a user has logged, and the total cumulative time that a user has spent under water.
- No Logs Feature: If a user has not created any logs, the view logs dashboard will consist solely of the user information box, and a button that allows the user to start logging.
Features:
- Data Collection Fields: combination of 31 different text fields, radio buttons, and checkboxes
- Add Tags: ability to include tags to make logs and photos searchable
- Add Media: ability to add photos with each dive log and share on the feed
Back End Features:
- Database: Designed schema in Postgres to store log users and log information, including dive photos and user-created tags, along with relevant meta data
- Integrity: Used relational tables, foreign keys, and unique constraints to maintain data integrity
- API: Created a serverless NextJS API to interact with database
- Docs: Supplied the front-end team with documents explaining the data they can expect to receive and what url to request from for that data
Our team used Agile workflow for this sprint.
A Trello board was used to create and track tickets. We held daily scrum meetings to discuss accomplishments, challenges, and upcoming tickets. To effectively collaborate remotely while allowing for quick communication if needed, we utilized Discord, Slack, and Zoom.
We implemented Git Feature Branch Workflow. All pull requests in Github were reviewed by another team member before being merged into the main branch.
Continuous Integration / Continuous Deployment
CI: Husky (Linting), GitHub Actions (Build and Testing)
CD: Vercel (Connected GitHub Branch)
This project was built with the above CI/CD pipeline. The pipeline and deployment were implemented prior to any building.
- To standardize styling we used a Husky pre-commit hook that ran Prettier and ESLint (AirBnB) through the project.
- GitHub Actions provided another layer of protection on Pull Requests to the Master Branch by running builds on Node 12.x and 14.x, as well as running all available Jest tests.
- Vercel was connected to the Master Branch and deployed all code pushed to it
- The team decided to learn a new technology, NextJS, in order to implement server-side rendering and dynamic API routing.
- Due to the amount of data necessary to maintain an accurate dive log book, the back end team was faced with creating complex database queries while balancing ease of accessing data against maintaining a high degree of data integrity.
- After encountering issues with proper access to data, our back end team switched SQL databases midway through the project and still was able to deliver reliable, high-quality APIs to the front end team.
- The team used Figma to aid in designing a website that implements a pseudo-social media aspect without overshadowing the core functionality of storing dive log information per our client's request.
- In order to present a dive log input form that includes all the numerous fields without sacrificing readability, Formik was implemented to capture the necessary data.