This application is an Independent Capstone project, culminating my knowledge and experience gained during my 27 weeks time at Epicodus in the Front-End Development track. It demonstrates a knowledge of React.js and an aptitude for planning, designing, and developing a functional application that meets the UX/UI industry standards of today.
"Velle" - Latin: to wish, want, be willing
Velle is a pseudo company/organization that operates as a middle man between various public outreach supporters, and individuals who want to help their fellow neighbors by donating their clothes. Recently, I have found myself in a predicament that I am sure others share as well. Many of us have unwanted or unneeded clothes that are trendy brand named or were bought at a modest but higher price. People may not want to hand these items to a store as they offer extremely low buying prices in return. And, knowing how much they had originally bought these items for, these people may also not want to hand the clothes over to Goodwill for free just to be resold for 100% profit to someone else. I and others, I'm sure, would much rather place our donations in the hands of reputable outreach organizations and programs who will in turn place the items directly in the hands of the individual in need. Velle stands as the organizer, liaison, and middle man that would make an operation like this possible. Benevolence.
- React
- Redux
- Firebase
- Firestore
- Webpack
- eslint
- SASS
- JSX
- Clone this GitHub repository https://github.com/randeelayosa/velle.git to your Desktop.
- Install git onto your computer if it isn't already.
- Open your Terminal, and enter the following commands:
cd desktop
git clone https://github.com/randeelayosa/velle.git
cd velle
atom .
npm install
npm run start
- You can use another text editor if Atom is not your preferred program.
- Make sure a "node_modules" folder is created in your project file. If it hasn't, run
npm installagain. - You can then go to the link in step 1 above, or continue on to the following instructions to run the server.
- Go to http://localhost:8080/ in the browser of your choice. Note: The app will automatically reload if you edit any of the code in the source files.
| Configuration/Dependencies | Use |
|---|---|
| Babel | JS transpiler |
| CSS-Loader, Style-Loader, Sass-Loader, Node-Sass | styling |
| ESLint | JS linter, checks code for errors |
| File-Loader, URL-Loader | image loader |
| HTML-Webpack-Plugin | loads HTML file |
| Jasmine, Karma | for testing code |
| React | JS Library |
| Webpack | bundles/compiles code |
Target Users
- General public
- Charitable organizations
- Outreach programs
User Stories
- As a community member, I want the guarantee that my clothes are being handed directly to a person in need.
- As a community member, I want to be able to see a list of items in need.
- As a charity/outreach, I want to be able to have and maintain a list of people in need, but have the names anonymous to the public.
- As a charity/outreach, I want to be able to upload details about the person in need, their personal information.
- As a charity/outreach, I want to be able to upload photos of items in our possession that we received but do not have a need for, yet can be handed off to another organization to use.
- Jill
- Purpose: Has unwanted clothes and does not want to donate it to Goodwill, or go the resell route.
- Pain Points: Unsure of where to look or how to go about giving away her clothes.
- How we can serve: Velle's main function serves the very basis of Jill's needs. It will make her search and eventual donation a smooth and easy process.
- YMCA
- Purpose: Has a number of club members that need clothing and cannot afford to do so.
- Pain Points: There's no infrastructure in place to constantly take in donations or campaign for them in a way that follows guidelines and keeps the club members' anonymity.
- How we can serve: Velle allows organizations to create and keep a private login account to upload details of member information. The information will then show on the main site page without names shown, keeping client anonymity.
- Boys & Girls Club
- Purpose: Has a particular item or size in need that hasn't been donated to them yet.
- Pain Points: Has no control over the items they will receive in donations from the community.
- How we can serve: With the private logins for organizations, they can also pass along items amongst themselves, much like a library book share system.
Home
About
- Navigation bar.
- List of support agencies.
- Login feature to access private information.
- Agencies can maintain their Wish List.
- Search feature to find drop off locations nearby.
- Agencies can upload images and information of items that they received but have not given away and are willing to share/send to other agencies.
- Sharing feature that allows agencies to view item lists of other agencies to see if they have a specific requested item.
- Address label generator feature.
- About Page
- Contact Page
- Page routing
- Styling
Friday, May 3 - Planning
- 8:00 - Clone down template repo and begin readme
- 9:00 - Start planning out and creating sketches
- 10:00 - Begin wireframing
- 1:00 - Update/change out readme to reflect appropriate information.
- 2:00 - Add component tree image to readme.
- 3:00 - Research more about outreach programs in Portland, and if businesses that offer similar services to my app the exist.
- 4:00 - Done for the day.
Friday, May 10 - Wireframing and Static Build
- 8:00 - Wireframing
- 9:00 - Wireframing
- 10:00 - Prototyping
- 11:00 - User Stories
- 12:00 - Change file structure, create Nav component
- 1:00 - Install redux-logger, convert things over to redux, troubleshoot
- 4:30 - Done for the day.
This software is licensed under MIT license.
Copyright (c) 2019 Randee Layosa