Reuse is a platform that allows you to donate your old items to people who need them. Items which are set active are available for Reuse. Anyone near the location can pick up the item for free. Items which are set inactive were previously donated.
Inspiration
We were inspired by the idea of sharing and helping others. We wanted to create a platform that would allow people to donate their old items to people who need them. We also wanted to create a platform that would allow people to reuse items that are no longer needed by others.
How we built it
This was a project which was built during the SustainHack Hosted by MLH on December 2 - 4, 2022. We wanted to make recycle more accessible. Winners of Best Recycled Hack.
Initial design we went with a simple design which will display the posts to the users, which will have two states
- Active - if the post is available for pickup
- Inactive - if the post is not available for pickup
We also wanted to avoid unwanted spam of the posts, so we added the authentication feature to the app. So a user can only post if he is authenticated.
If want to know where i designed the above image, Its called Excalidraw
Technologies used
In order to build this project we went with Next.js because its simpler to handel routing and I wanted to improve my skills in Next.js. There are other options to install Next.js like create-next-app, but I wanted to go with T3 which sets up the project with TypeScript and TailwindCSS.
We used the NextAuth.js for authentication. It is a simple library which allows you to add authentication to your app. It supports multiple providers like Google, Facebook, Twitter, GitHub, etc.
We used MongoDB for storing the posts, and used Firebase Storage for storing the images. this is because Firebase Storage is a simple and easy to use storage solution.
Working
If the user is not logged in they can view posts but not create posts.
This is how we can add a post. We can add the title, description, and image. We can also set the post to active or inactive.
Once the post is added, it will be displayed on the home page.
Active are displayed in green and inactive are displayed in red.
Inorder to view each item deatils we can click on the item. This will take us to the item details page. This was one of the biggest challenges we had inorder to make it dynamic. We had to use the getStaticPaths and getStaticProps to make it dynamic.
Challenges we ran into
We ran into a lot of challenges.
- Initially, we had some issues related to tailwind CSS but we were able to fix them.
- One of the major issues we faced was creating a static paths function for the dynamic routes. which also led us a problem with the deployment of the website.
What's next for Unused to Reuse
We are planning to add a few more features and deploy the website for public use. We are also planning to add a feature that would allow users to put a timer on the items they donate. This would enable users to set a time limit for the items they donate. After the time limit is over the items will be automatically set inactive.
Top comments (0)