This website was developed in 4 weeks (part-time) by 3 passionate Le Wagon students (Francis Servignat, Kylian Janssens and Sunny Law). The website is accessible via http://www.valuejunk.site/.
The project idea was born after recognising the struggle of upcycling. Most of the time, people will throw away their junk instead of repairing or giving/selling them. However, the availability of the junk and help from craftspeople may not be obvious in the communities. ValueJunk brings these elements together to connect people to the junk market and to a pool of skilled craftpeople.
Our vision also included a project marketplace, where people could gather around projects they are interested in, creating teams, learning new skills, and make friends. We can think of project kinds like art, humanitarian, gardening, or specific event like the 'Redbull Soapbox Races'.
Landing page – is an old telephone with light bulbs. This captures the purpose of the website of providing connectivity in the community sharing their bright ideas of upcycling projects. Scrolling down reviews the three main sections of the website (i.e. Market place, Craftspeople, and Projects) which is self-explanatory from the images and brief descriptions.
Logo – The logo is two circles joined together reinforcing the idea of connnectivity. The circles represent a sustainable life cycle for junk. This logo is located on the top left and serves as a clickable icon to the home page.
Navigation Bar - the navigation bar blends in with the landing page taking the theme colors, shades of green throughout the website. It includes the three categories , 'Junk Market', 'Craftpeople', and 'Projects'. In addition, there is a quick access to 'Post an Ad'.
Avatar – this is the user's image and clicking it will drop a menu with 'My profile', 'Messages', 'Settings', and 'Log out'. When logout, the dropdown menu will only include 'Log in' and 'Sign up'.
- My profile - this is a dashboard where the current_user can check what is advertised under the account (junks, crafts and projects). It is also from this page that the user can update or delte his/her listings.
-
Messages - this message box allows the users to communicate with each other. Buttons to contact a specific user are available in the junk and craft show pages.
-
Setting - [this feature is underdevelopment] and is where the user will be able to update his/her account details.
-
Log out - this allows the user to sign out of the account.
Search boxes – Users can perform a quick search and filtering of the items or services they want to view from the home page but these features are also available in the Junk Market and Craftpeople pages.
- Junk Market Search box
- Craftpeople Search box - beside the search box, the carousel brings a better UX (interactive and rapid search) when searching for a specific craft. The results will be filered in real time as the user goes through the content of the carousel.
Junk Market page - this page is listing the junk items posted for donation or selling. The cards include a small carousel of images (uploaded by the user). Clicking anywhere on the card (except the heart icon that is used to add the item to the favourites) will open the item's show page. A map at the bottom is provided to show where the item is located.
Junk show page:
Craftpeople page - this page is listing trade services. A map at the bottom of page shows where the all the craftperson is located.
Craft show page:
Post an Ad - this gives the user a quick access to posting an ad on the website. Also, the user can see a live preview of the card as details are entered in the form.
-
list ad for the junk market
-
list ad for the craftpeople
Footer - List the creators of this website and their social media links (GitHub and Linkedin).
Due to limited time, not all features were developed. The outstanding work still remaining are:
- project webpage,
- user setting,
- further improvements to the message box (ie. formatting and features)
-
full-stack framework
- Rails app generated with lewagon/rails-templates, created by the Le Wagon coding bootcamp team.
-
HTML
- The structure of the Website was developed using HTML.
-
SCSS
- The Website was styled and layed out using SCSS.
-
Javascript
- TypedJS
- Stimulus
-
Heroku
- platform used to deploy the application.
-
Git
- Used to commit and push code during the development of the Website
-
Other key GEMS
- cloudinary, acts-as-taggable-on, geocoder, devise, font-awesome-sass, turbo-rails
-
Favicon.io
- Favicon files were created at https://favicon.io/favicon-converter/