Worship Manager
Worship Manager is a dashboard application for worship leaders to track and manage all of the events, people, and songs that happen in a worship service. Please note, this dashboard is currently not intended to be used by mobile devices
Links
Features
- Interactive CRUD application using React hooks and Context API.
- Client-side routing and redirection using React Router v6.
- RESTful API using the Express.js framework and MongoDB.
- Session-based user authentication and protected routes using Passport.js
- Securely hashed and stored passwords using Bcrypt.
- Strongly typed code using TypeScript on both client and server.
Planned Features
- Input masking and validation
- Dynamic filtering and drag-and-drop tables using React Table
- Import/Export functionality
- Mobile friendly
The Idea
The idea for this project is based on a project that I initially built for a Database Systems class in college. In that class, I designed a MySQL database to solve the need of storing worship service information. The MySQL database was complete with an ERD, functions, and stored procedures. However, since the project was for a database class, the user interface that I built was mostly an after-thought as shown below:
I was going to remake the user interface, but I realized that I could take the same concept and make a much more polished and fully-featured web app if I started from scratch using new tools that I had learned. Worship Manager is the evolution of this idea: a fully-featured SPA using React and TypeScript, and an Express.js REST API for the server.
How It Works
When first visiting the site, the user is redirected to the login and register page. The user can create an account with an email, password, and name.
After logging in, the user will be redirected to the services page where they can see all of their past and upcoming services. The user will automatically be given three upcoming and past services with example data.
The user can click the "New Service" button on the top right to create a new service, or click any service to go to its detail page shown below. This detail page contains a list of all of the events and people who participated in the service.
The user can also add an event or person to the service using the drop downs under each table. The cool thing about these dropdowns is that they pull in all of the data from the other parts of the application. For example, when the user selects a new person to add, all of the names in the dropdown are pulled from the "People" page.
The user can view and edit all of the available songs and people using the Songs and People pages on the left sidebar.
The user can also edit all of the available service types, event types, and roles using the Options page.
Existing services, people, and options can also be edited using a pop-up modal:
Together, all of these features create a flexible dashboard application that can easily track and manage worship services.