My Dive Site

Check out my live site in the wild, or sit back and watch an online demo!

The why (description)

I love scuba diving. When I lived in Asia I used to go at least once or twice a month. For my third project I'd like to build a SPA that holds all my diving info. The MVP will have the following functionality:

1. React frontend with an Express/MongoDB backend that will hold all my dive info
2. View dive sites near me - I'll be pulling data from this API and here is an example of the type of data I'll be displaying to the user. I plan to automatically detect the users location and only show dives sites near them.
3. Full CRUD functionality that will log dives

The how (technology used)

1. React (frontend framework)
2. CSS / SASS
3. Express (backend framework)
4. Mongoose (model data)
5. MongoDB (database storage)
6. Heroku & Vercel (deployment of front and backend)
7. JavaScript (all the magic)

Icebox items

1. Adding user authentication
2. Add newsletter signup functionality
3. Upload images to my dive log

Screen Shots

Screen shot - header

Screen shot - Dive Sites section

Screen shot - Logged Dives section

Screen shot - Footer

Example database result

{"_id":{"$oid":"6070d76ca533f87180a94e33"},"country":"Mozambique","site":"Moz Dive","condition":"Saw some great looking fish, some ugly ones too","createdAt":{"$date":{"$numberLong":"1618007916549"}},"updatedAt":{"$date":{"$numberLong":"1618007916549"}},"__v":{"$numberInt":"0"}}

"sites": [ { "currents": null, "distance": "7.71", "hazards": null, "lat": "33.7629", "name": "Georgia Aquarium", "water": null, "marinelife": null, "description": null, "maxdepth": null, "mindepth": null, "predive": null, "id": "23155", "equipment": null, "lng": "-84.3948" },