##Presentation and Demo Video https://youtu.be/sPn1j3kMMOo

The inspiration for Wildscape was the ever-growing crisis of environmental decay. As college students, we are passionate about supporting our local environment, but we find it difficult to make a real impact without being a part of a government body. We know that thousands of people our age share our strong interest in protecting the environment, and Wildscape provides an innovative and appealing platform to do just that.

As an online hub for the world's most luxurious scenes in nature, Wildscape empowers adolescents to make an impact by showing off their favorite "spots" and writing about why they deserve to be protected. If our users haven't found their "spot" yet, they can explore our discovery page to find locations that captivate them.

We built our web application with the following stack Next.JS (which includes React.JS), Pocketbase (DB) and writing in typescript. To deploy we had Vercel hosting docker as our container and Fly.io as our builder. The libraries we used were the Google Maps API, OAuth 2.0, TailwindCSS, Framer Motion and GSAP. We also both made our own components but we had some help with these component libraries: shadcn, aceternity, and Oliver Larose's blog.

One large challenge we ran into initially is since we are using so many tools some of them conflicted on initial setup so we had to wipe and make a new repo on day two. An additional struggle was the usage of a new database system, pocketbase, setting it up to fit our needs was difficult at first. After having Pocketbase setup it worked flawlessly and was very easy to use.

Some accomplishments we are proud of is our UI design using many different animation libraries giving engaging feedback to the user. Additionally being able to use the Google Maps API made us ecstatic connecting our data and being able to see visually on a map where our 'spots' are is satisfying. We were also were able to implement mobile responsiveness!

We learned how to deploy a Pocketbase backend, using the Google Maps API, and making UI with the six design principles.

Within the maps page use the google maps API to navigate from the maps page to see the 'spot'. We want to in the future implement AI so that when a user uploads a photo the AI will scan and ensure only nature photos can be posted. Add the ability to add in comments. Partnering with environmental sustainability stakeholders such as the National Park Service. Make mobile app for Wildscape instead of it being a webapp.

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.