Skip to content

Metternich11/FreeYourStuff-FE

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Free Your Stuff

Idea

A mobile-first platform designed to help facilitate the culture of giving away your unused/unwanted items away to people who need them more then you!


logo of app


Motivation

A common practice in the city of Tubingen, Germany, was that people would leave their unwanted items in the street with a sign saying "For Free". I appreciated the idea and the recycling culture, however also noticed some problems such as:

  • Only an immediate passerby would be able to take them
  • Things would be left out for multiple days
  • Also in bad weather
  • Some people would leave undesirable stuff (trash)

There are platforms that try to help, however they are poorly designed, often requiring long descriptions to be able to past an app, and hard to navigate

This app is currently able to solve all these problems by:

  • One click uploading
  • Geolocation of items dropped
  • photo recognition enabling smart tagging

Screenshots


screen shots of app


Getting Started

  1. Clone both the Free Your Stuff front-end and the Free Your Stuff back-end
  2. In the command line, for both repos, enter npm i then follow the repository specific instructions below.

Frontend Repository Configuration

Step 1: Acquire Google Cloud API Key

You will need to acquire a Google Cloud API key that grants you access to Cloud Vision API and Maps JavaScript API.

Go to https://cloud.google.com/ and create an account. At the time of writing this, it is a requirement to enter your payment details to prove you are not a robot. Google informs you during this process that no actual billing will be taken without your authorisation.

Step 2: Setup a Cloudinary account

Go to https://cloudinary.com/ and create an account. In the Settings - Upload page which can be accessed at https://cloudinary.com/console/settings/upload, search for 'Add upload preset' and create a new one. Set the 'Signing Mode' to be 'Unsigned' and save the newly created upload preset. You will need the upload preset name in your config file.

Step 3: Create a config file

Using the /config/example.config.js file, create your own config.js file inside the /config folder. This file should contain your Google and Cloundinary details.

Backend Repository Configuration

TODO (replace content below with step-by-step instructions)

Create a .env file - following the .env.example

Starting the application

  • Frontend: npm start
  • Backend: npm run dev

Possible features to add

  • Tests!
  • Login/authentication & user accounts
  • Weather recognition (if weather is bad, don't leave things out!)
  • User messages
  • Ability to gift things person to person

Tech Stack

  • React - The frontend framework used
  • Koa - The backend framework used
  • MongoDb - The database used
  • Cloudinary - The photo-storage database
  • Google APIs - APIs for Maps and Cloud Vision

Contributing

Contributions Welcome!

This is an ongoing project and external input and ideas will be gladly received!

License

This project is licensed under the MIT License, take it, have fun.

About

The client side of Free Your Stuff

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.2%
  • CSS 30.1%
  • HTML 5.7%