This repository contains the source code of BC Cancer Event Data Management System for our CS5500 Software Engineering project partnered with BC Cancer Foundation.
In this project, we were given virtual presentations on various pain points of donor invitation and event management in the BC Cancer fundraising process. We came up with serveral possible solutions and decided to build a dashboard that features user-friendly data tables and change history log to help streamline the process of managing donor invitations for events. For more details, please refer to our final presentation where we demonstrated the dashboard in action in front of BC Cancer representatives.
- NestJS
- SQLite
- TypeScript
- React
- React Router
- Tailwind CSS
- shadcn/ui
- TanStack Query
- TanStack Table
- React Hook Form
- Zod
If you want to run the project locally, you can follow these steps:
First, you might need to install yarn on your machine.
Then navigate to project/packages/backend and run the following commands:
yarn install
yarn startSimilarly, navigate to project/packages/frontend and run the following commands:
yarn install
yarn devThe defalut port for the frontend is 5173, and you should be able to access our application at http://localhost:5173 by now.
- Setup Tailwind & shadcn UI
- Routing
- React Router setup
- separate auth stack and app stack
- Scaffold basic UI for each page
- Login
- Event
- Create Event
- Event Detail
- Communicate with backend
- React Query
- Implement functionality
- Login with username/password
- Logout and user avatar
- Event table
- Row actions
- Edit
- Delete
- Pagination
- Sorting
- Filtering
- Row actions
- Create/Edit event
- filter by city & limit
- reuse for updating event
- add admins
- add navigation to edit inside event detail
- Event detail
- Donor table
- Status tab
- Row actions
- Exclude
- Invite
- Patch status
- Document reasons for change
- Pagination
- Sorting
- Filtering
- Column visibility
- Global search
- Change history
- improve UI
- reflect reasons for change
- Donor table
