CampOAC - Fundraiser website
Maintainers:
Michael Boulanger
Sai Rohith Enumala
Paul Ranger
Baillie Stang
About
We are developing a mobile-friendly website to help the general public obtain campfire wood. The user will select the location (from a list of available locations) and the desired number of bags of firewood on the website. Then, they will receive an email with an invoice generated based on the pricing and quantity ordered. The website then processes payment or retains an invoice for cash payment at pick-up time. The receipt is automatically generated. Users groups include local residents as well as tourists, most people who need a smaller quantity of wood as for larger orders people would be more likely to turn to a bulk supplier.
TO DO
Tech Stack
| Backend | NAME | LATEST VERSION | PURPOSE |
|---|---|---|---|
| NodeJS | 16.18.0 | Backend script / run express | |
| Express.js | 4.18.2 | Serve site and handle end points for database | |
| MongoDB | 6.0 | Database | |
| Square Payment API | 3.23 | Server side payment info processing |
| Package Manager: | NAME | LATEST VERSION | PURPOSE |
|---|---|---|---|
| NodeJS | Comes bundled with Node | self-explanatory |
| Frontend | NAME | LATEST VERSION | PURPOSE |
|---|---|---|---|
| React-dom | 18.0.2 | Rendering the website | |
| Square Web Payments SDK | 3.23 | Client side payment information handling |
Documentation Manual
Entire program located in react-app folder
Font and graphics elements located in build and public folders
Main application broken into two parts: server and src
src contains frontend functionality:
-Display pages located in pages folder and functions
-Styling information in css folder
-index.js manages display and navigation
server contains backend functionality:
-models folder contains database schema for mongoDB
-index.js has endpoints to handle all API calls and server communication
Frontend page functionalities such as placing orders or viewing databases make API call from frontend which is then received in appropriate handler in backend server/index.js
Example workflow for placing order with credit payment:
- User lands on home page and navigates to order page (handled by src/index.js)
- Order page makes API call to view current locations
- API call received by server/index.js which communicates with database server and returns location info
- order page displays LocationForm to let user view locations and select one
- user selects location
- location selection passed to OrderForm component
- order page changes display to OrderForm component to let user enter info and place order
- user enters info and places order
- OrderForm makes API call
- API call received by server/index.js which sends order info to database
- OrderForm passes order info to Payment component
- order page changes display to Payment component to let user enter payment info and pay
- user enters payment info and pays
- Payment makes API call
- API call received by server/index.js which handle payment with Square
- invoice generated by server/index.js and sent to user