Newport Board Club (PWA)

An application designed to allow members of the board club to view current surf/weather conditions, club events, log surf sessions, view surf tips, rental information, and general information about the club.

Table-of-Contents

• Deployment
• Goal
• Features
• Installation
• Wireframe
• Technology
• Demo

Goals

The goal of this application to make members want to go surf by providing them with the all the infomation they need to have a great surf session. The app easily shows the current surf and weather conditons. Events are displayed to make it easy for memebers to get information they need to attend upcoming events. The Surf Log allow memebers to keep a log of all their surf sessions to track their progression and review previous sessions when selecting a surf spot or board for their next session. Surf hacks are listed to help new members with common surf problems. The Newport Surf map helps members easily pick the best spot to go surfing while visiting the club house based on a variety of factors and conditions. The comminity forum helps memebers find other memebrs to surf with and also to interact memebers to build a sense of community.

Features

• Surf Diary 📖
  • Log Each Surf Session
  • Review previous surf Sessions
  • Track surf progression

• Events Page 🎊
  • Upcoming Events
  • Previous Events
  • Calender View

• Live WX ⛅
  • Water Temp
  • Tempeture
  • Wind
  • Sky Conditions
  • Popup/Overlay Widget

• Rental Infromation 🧾
  • Equipment
  • Prices / Hours

• About ❓
  • General Club Info
  • Club Staff

• Surf Resources 📖
  • Surf Hacks

Installation

• Server/API

    1) npm run buildServer
    2) npm run startServer

• Client

  1) npm run buildClient
  2) npm run startClientServe
  

Wireframe

Home Page

Club Events

Surf Log

Rental Page

Surf Knowledge

About Page

Technology

• Software Stack

• Databases

  • MongoDB (non-relational)
    • User
    • Events
    • Surf Sessions
    • Surf Hacks
    • Surfboard Shapers

• Server (Node 18.6.0)
  • NPM Packages
    • @apollo/server (4.7.4)
    • @aws-sdk/credential-providers (3.369.0)
    • @aws-sdk/hash-node (3.369.0)
    • @aws-sdk/protocol-http (3.369.0)
    • @aws-sdk/s3-request-presigner (3.369.0)
    • @aws-sdk/url-parser (3.369.0)
    • @aws-sdk/util-format-url(3.369.0)
    • aws-sdk (2.1414.0)
    • bcrypt (5.1.0)
    • body-parser (1.20.2)
    • cors (2.8.5)
    • dotenv (16.3.1)
    • express (4.18.2)
    • graphql (16.6.0)
    • graphql-http (1.19.0)
    • json (11.0.0)
    • jsonwebtoken (9.0.0)
    • mongodb (5.6.0)
    • mongoose (7.3.0)
    • node-fetch (2.6.11)
    • react (18.2.0)

• Client (React 18.2.0)
  • NPM Packages
    • @apollo/client (3.7.15)
    • @emotion/react (11.11.1)
    • @emotion/styled (11.11.0)
    • @mui/material (5.13.6)
    • @mui/styled-engine-sc (5.12.0)
    • @mui/x-date-pickers (6.9.1)
    • @popperjs/core (2.11.8)
    • bootstrap (5.3.0)
    • dayjs (1.11.9)
    • interweave (13.1.0)
    • jquery (3.7.0)
    • jwt-decode (3.1.2)
    • react (18.2.0)
    • react-bootstrap (2.7.4)
    • react-dom (18.2.0)
    • react-material-symbols (4.1.1)
    • react-popper (2.3.0)
    • react-pro-sidebar (1.1.0-alpha.1)
    • react-router-dom (6.12.1)
    • react-scripts (5.0.1)
    • react-select-datepicker (2.1.2)
    • react-spinners (0.13.8)
    • react-switch (7.0.0)
    • react-time-picker (6.2.0)
    • styled-components (5.3.11)

• Hardware/Deploy

  • Host: Railway
    • Client: https://boardclubapp-production.up.railway.app/
    • API: https://boardclubapp-production-api.up.railway.app/
  • Database: Self Host via Docker
    • MongoDB
  • Version Control: GitHub
    • https://github.com/DesertCow/boardClubApp
  • Cloud Storeage: AWS
    • S3 - US West 1

Demo

Client Demo

Admin Demo