This project is submitted for MLH - Hack and Snack 2022 Hackathon

The Idea behind Scooba Dive is to build a hassle-free web application which helps peoples and researchers to know more about marine life. We provide a virtual Scuba diving experience and a fish encyclopedia through which users can experience or get aware of marine life 🤿. We are spreading awareness through a fun activity of Scuba Diving.

This hackathon project is our attempt to solve the problems of researchers and peoples who want to know about marine lifes but not get any proper platform to explore it. Our website provides a single platform for both researchers and peoples who love marine lifes and wants to explore virtual Scuba diving. Here are the points , which helps you to understand how our website works :-

1.Upon visiting our web app the user is presented with a Sign-Up Page where they need to first register to explore our site. If the user has already registered, they can click on login button which will render them directly to the login page where they need to provide the password to login.

2.Once the user is logged in, they will be directed to our home page where the user can get information about various fishes, can click on each fish which will render them to a new page where they can see the whole information about that fish and a map which will shows the region in which that fish is found.

3.If any researcher wants to post their own research about the fishes they can do it on compose post page, and after publishing that reseach they can see their research on the home page.

4.Last, but the most amazing feature of our site is that if anybody wants to get a Scuba diving experience virtually, they can do it on our site by simply going to that page.

1. Frontend :- We used Vite.js, Chakra-Ui and javascript to build our UI and used styled-components and locomotive-scroll for creating smooth animations. It was our first time using locomotive-scroll, so developing the frontend was full of learning
2. Backend :- We built our server through node.js and express.js for handling API requests. We also integrated a map using leaflet and Google Map services. Also used Mongoose acts as a front end to MongoDB which acts as a front end to MongoDB
3. Database :- The real gem behind the project is the databases and the api's which we have created by our own. We have used MongoDB database to store data of fishes.

npm install

npm run dev -- --open

1. Creating smooth animations in the Scuba Dive Page was a difficut task, it took us a lot of time to add animations to all the fishes
2. Pushing and Merging our code on github was also a tedious task.
3. Figuring out the API for different regions or co-ordinates of different places was a huge task.
4. Gathering data of fishes from different resources as one cant find a proper data of a fish on any one platform.

We were able to complete our project successfully besides lot's off challenges, and create da hack to solve the problem that researchers and people faces when they wants to know about fishes and other marine lifes but not able to find proper resources or a proper platform to explore on it.

1. Its was our first time using Vite.js to create our frontend
2. We learnt how to use Locomotive-scroll to create smooth scrolling animation
3. Half of our team was beginner, so they learnt how to make and submit projects in a hackathon
4. We also got familiar with param routes and middlewares in Express.js
5. We experimented lot of technologies and learnt pretty much everything we used out of this project.

1. We would like to add more marine fishes in Scuba Diving Section and would like to introduce plants as well to give a more real feel to the virtual experience.
2. Also we would filter our data so user can get more meaningful information about the fishes they are looking for.

Please ⭐️ this repository if this project helped you!