Barter Books A web app that will allow college students to trade their books and notes with other college students as a more affordable solution for them to be more prepare for their courses by relieving some of the financial burden. This web app is designed with mobile accessibility first in mind, then desktop and tablet, therefore all the features are legible and functional for most mobile and desktop/tablet devices. Presently, only basic features for bartering books are functional, however in the future more features, like the ones in the PVMP section, may be added to this web application.
The Barter Books MVP is to meet full CRUD on the back-end and front-end for books allowing only registered users to have full access to these features. Unregistered users will be able to view all the available books for bartering and can only request an exchange after registering or logging in.
- Allow all users to view books that available for exchange.
- Allow user to register for an account.
- Allow user to login into their account and edit and delete their book(s).
- Allow any registered user to request an exchange.
- Allow user to sort books by categories.
- Full CRUD on back-end and front-end.
List of all supporting libraries and dependencies, and their role in this app.
Library | Description |
---|---|
React | Axios |
React Router | React-Router-DOM |
Rails | jwt,rack-cors, bcrypt, pry-rails |
- Mobile Landing
- Mobile Books Index
- Mobile Book Detail
- Mobile Create Book
- Desktop Book Index
- Tablet Book Detail
The component architecture for the app will be like so:
src
|__ assets/
|__ images/
|__ components/
|__ Header.jsx
|__ Footer.jsx
|__ Layout.jsx
|__ screens/
|__ Books.jsx
|__ BookDetail.jsx
|__ CreateBook.jsx
|__ EditBook.jsx
|__ Confirmation.jsx
|__ Login.jsx
|__ Register.jsx
|__ Home.jsx
|__ services/
|__ api-config.js
|__ categories.js
|__ books.js
|__ students.js
|__ auth.js
|__ containers/
|__ MainCointainer.jsx
|__ styles/
|__ Books.css
|__ Details.css
|__ CreateEditForm.css
|__ Confirmation.css
|__ Login.css
|__ Register.css
|__ Home.css
|__ Header.css
|__ Footer.css
Task | Priority | Estimated Time | Time Invested | Actual Time |
---|---|---|---|---|
Install Ruby on Rails Package & Create React App | H | .5 hrs | .5 hrs | .5 hrs |
Create Database | H | .5 hrs | .5 hrs | .5 hrs |
Seed Database | H | 1 hrs | 1 hrs | 1 hrs |
Create Tables, Migrations & Models | H | 1 hrs | 1 hrs | 1 hrs |
Create CRUD Actions Back-End | H | 3 hrs | 1 hrs | TBD |
Test all back-end CRUD actions | H | 3 hrs | 3 hrs | 3 hrs |
Test all register & login back-end actions | H | 2 hrs | 2 hrs | 2 hrs |
Create API-config file & CRUD methods | H | 2 hrs | 2 hrs | 2 hrs |
Create CRUD Actions Front-End | H | 3 hrs | 1 hrs | TBD |
Home/About Page | M | 3 hrs | 3 hrs | 3 hrs |
Books List | H | 3 hrs | 3 hrs | 3 hrs |
Book Categories | M | 3 hrs | 3 hrs | 3 hrs |
Book Detail | H | 3 hrs | 3 hrs | 3 hrs |
Confirmation Page | L | 3 hrs | 3 hrs | 3 hrs |
User Authentication for Edit & Delete | H | 3 hrs | 3 hrs | 3 hrs |
Create Book Form | H | 3 hrs | 2 hrs | 3 hrs |
Edit Book Form | H | 3 hrs | 2 hrs | 2 hrs |
Register Form | H | 3 hrs | 2 hrs | 2 hrs |
Login Form | H | 3 hrs | 2 hrs | 2 hrs |
Test all front-end CRUD actions | H | 3 hrs | 3 hrs | 3 hrs |
Test all register & login front-end actions | H | 2 hrs | 2 hrs | 2 hrs |
Style Edit & Create Forms | M | 3 hrs | 3 hrs | 3 hrs |
Style Login & Register Forms | M | 3 hrs | 3 hrs | 3 hrs |
Style Home/About Page | M | 3 hrs | 3 hrs | 3 hrs |
Style Book List | M | 3 hrs | 3 hrs | 3 hrs |
Style Book Detail | M | 3 hrs | 3 hrs | 3 hrs |
Style Confirmation Page | L | 3 hrs | 3 hrs | 3 hrs |
Test for Bugs | H | 3 hrs | 3 hrs | 3 hrs |
TOTAL | - | 70 hrs | 50 hrs | 42hrs |
- Barter ERD Model
- Sort books by college/university name.
- Change password feature.
- Add pagination to books index page.
- Allow user to view any open books they have requested.
- Allow user to view any books they have opened and approved.
- Allow user to view any past exchanges.
- Allow user to add and edit their personal information: name, college/university name, and password.
- All any registered user to contact the barterer for more information.
Use this section to include a brief code snippet of functionality that you are proud of and a brief description.
code_snippet
Use this section to list of all major issues encountered and their resolution.
- User login state throughout all pages and using login information.
- All elements used in Figma design not being viable due to time using CSS code.