Wildscape

Wildscape is a photo-sharing platform for teens to showcase nature spots. Upload photos, add descriptions, and support conservation with donations. Explore, connect, and protect your favorite places.

Comment

Inspiration

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.

What it does

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.

How we built it

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.

Challenges we ran into

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.

Accomplishments that we're proud of

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!

What we learned

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

What's next for Wildscape

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.

Built With

Share this project:

Updates