beach-tides-client

KO | EN

gitlite — search

#ai #android #machine-learning #linux #java #windows #awesome #cli #kubernetes #awesome-list #pytorch #ios #openai #open-source

beach-tides-client

(★ 8)

BeachTides is a web app that gives users real time and future United States tidal predictions.

beach-tides-client Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Beach Tides](https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/BeachTides.png?raw=true "Beach Tides Logo")
# (www.beachtides.us)

## WHAT IS BEACH TIDES
Beach Tides is a full-stack mobile first responsive web application that is built to give users in coastal United States real time and future tidal predictions.  Users can choose to search by zip code or city and state combinations.  Users can search for tide information without creating accounts or users can create accounts which will allow storing favorite locations and having personalized themes.

### SCREENSHOTS

| <img alt="Landing/Login/Search Page" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-Mobile-Landing-Page.png?raw=true" width="350"> | <img alt="Tidal Results" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-Mobile-Search-Results.png?raw=true" width="350"> | <img alt="Night Theme" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-Mobile-Night-Theme.png?raw=true" width="350"> | 
|:---:|:---:|:---:|
| Landing/Login/Search Page | Search Results | Night Theme |

## WHY MAKE THIS APP?
Unfortunately, not all of us live directly within the town or area with which we seek tide information. Many users search tide info on areas outside of there immediate location.  Whether the user is a surfer a beach goer or a boater the user can save locations that will load upon arrival.

### TABLET SCREENSHOTS
| <img alt="Landing/Login/Search Page Tablet" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-Tablet-Landing-Page.png?raw=true" width="430"> | <img alt="Night Theme Tidal Results" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-Tablet-Search-Results-Night-Theme.png?raw=true" width="430"> |  
|:--:|:--:|
| Tablet Landing/Login/Search Page | Tablet Night Theme Search Results |

## TECH STACK
### Beach Tides uses a MERN stack
#### FRONT-END
* HTML5
* CSS3
* JavaScript
* React.js front end framework
* Redux.js state management
* moment.js time zone calculation
* react-google-login

#### BACK-END
* Node.js backend run-time environment
* Express.js backend framework and architecture
* MongoDB for database
* Mongoose - object modeling for mongodb
* Google OAuth 2.0 and JWTs for authentication

#### TESTING and DEPOLYMENT
* Mocha - back-end testing framework
* Chai - assertion library backend testing
* Enzyme - React.js testing utility
* mLab - cloud production database
* Travis CI - cloud continuous integration
* Heroku - cloud application platform

## FUTURE IMPROVEMENTS

### UI IMPROVEMENTS
* Desktop layout and sizing
* Relevent tidal content additons
* Navigation bar consistency
* Linking from search to favorites improvements
* Additional themes

### UX IMPROVEMENTS
* Auto locational finding upon user arrival
* Smooth loading animations
* Friendlier search logic to help guide user to desired info

### OTHER FRONT-END IMPROVEMENTS
* Reduce API calls by storing tidal data in browser
* Facebook Login
* Full scale React unit testing

### SERVER-SIDE IMPROVEMENTS
* Location validation improvements

## SOME ORIGINAL WIREFRAME DESIGNS

| <img alt="Wireframe Search Page" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-WF-landing-search-page.png?raw=true" width="200"> | <img alt="User Saved Locations" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-WF-Search-Results.png?raw=true" width="200"> | <img alt="Unsucessful Search" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-WF-Unsucessful-Search.png?raw=true" width="200"> | <img alt="Logged In User flow" src="https://github.com/JacobMacInnis/beach-tides-client/blob/master/src/img/README.images/BeachTides-WF-.png?raw=true" width="200">
|:--:|:--:|:--:|:--:|
| Landing/Search Page | User Saved Locations |Unsucessful Search | Logged In User Flow |

beach-tides-client

beach-tides-client Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

beach-tides-client

beach-tides-client Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README