Garbage box finder app with Next.js

Git hub link

This is my first project that I tried to make an app from my own idea, which is it will be useful if people can know the place garbage boxes are. It came to my mind when I was in Canada since Canada has many public garbage boxes.

As you can see below video, this app allow us to mark the place where a garbage box is. Considering Canada's case, in which there are mainly three types of garbage boxes in public space, I set three buttons for each. I imagine the color of the button, according actual color of garbage boxes.

If you clicked Paper button assuming you found paper garbage box there, you can mark the place by yellow circle. If you choice several buttons the circle can be magenta color, if three of all buttons circle will be white. In addition, if you marked upon another mark in the same place, you can update the mark. ( not exactly same, within the degree of latitude and longitude I set, in this case +-0.0005 degree, which is approximately latitude:111.32m, longitude:75.92m )

You might have realized, that this app could be better especially design is not polished. But I spent a lot of time to make this and learned a lot same as the time I spent and To make this project was a good opportunity to think about how I should server-side and client-side component in Next.js. I'm gonna write three main things that I learned from this project.

How to use Leaflet
Location API on the browser
Next API using App/Router for taking data using Prisma for PostgresSQL

1. How to use Leaflet

To have a map, I used React-Leaflet library referencing this article. After I read this article and I tried to display this map, I understood I needed to use 'use client' mode at the top of the component. I added my own function to get marked spots information into the component, though the structure of the component code to display a map described by the article was really helpful.

2. Location API on the browser

I had no idea how to get GeoLocation in our browser. I could see how to do it on Mozilla official document. It can give Web app an access to to the location of the device based on this document, So useful, isn't it? As I mentioned previous section, I have put the function to get the location using this webAPI into the map component, Of course in order to use this API I needed to use client component in Next.js.

3. Using NextAPI and Prisma

I used Next.js App/Route's Route Handlers, we can create a file named route.js or route.ts under the directory of api. On the way to using that, one of the confusing points to me was that I could only use HTTP method as a function name in route.js or ts file as a function accessed from other, as a convention. I referred to this document.

Example of the image of structuring of the route.

Conclusion

I created this app as the first app from my idea. Cause, before this project, I only tried to make some tutorial projects from Vercel or Next.js template. As I mentioned at the beginning of this page, this app is not perfect and completed, but I can't come up with some good idea to go this app further though, I record this app's summary and my experience through this app into this page. Because I wanted to share and record my current capability to make an app.

Back to home.