Casa Chirilagua
What did I do?
Developed an internal website using MongoDB, Express.js, Node.js, and React to help manage programs for Casa Chirilagua, a non-profit organization based in the City of Alexandria, Virginia.
Role
Full Stack Engineer
Responsibility
Consultation, Front End Architecture, Back End Development, Create and Manage Database, Create RESTful APIs, Security, UI/UX Design, Figma Prototyping, Deployment, Present Demos, Employee Training.
Learn more about Casa Chirilagua
https://casachirilagua.org/Welcome Page
Included an image of program participants with a purple background, consistent with the organization's official colors of purple, green, and orange.
Login
The front end and back end are protected with Auth0, a third-party authentication service. Auth0 uses AES-256 to encrypt data at rest and is ISO27018 certified, complying with security and privacy guidelines for managing PII.
Dashboard Part 1
- Created custom dashboard components using the recharts library.
- Pie chart: Categorizes the programs by the number of students.
- Reusable card component: Used to display useful metrics such as percentages or numbers.
Dashboard Part 2
Line graph created using recharts, displaying the number of students enrolled over time, along with additional reusable card components.
Student Page
- Students, parents, programs, and families have a similar user interface, utilizing:
- Custom reusable table component: Displays useful information such as names and other relevant fields.
- Custom reusable Search bar: Helps in finding specific users.
- Custom reusable Side navigation bar: Facilitates easy navigation within the pages.
Student Profile Part 1
- Students, parents, programs, and families have a similar user interface, utilizing:
- Custom reusable profile component: Displays relevant relationships, such as programs, parents, or children for the parent profile. Provides the flexibility of adding a parent to a specific student or adding a student to a particular program.
Student Profile Part 2
Collapsible headers provide useful information about the student, program, parent, or other entities.
Student Profile Part 3
Created a reusable modal component used throughout the web application.
Student Profile Part 4
Includes a reusable Delete component.
Student Registration Part 1
Student Registration Part 2
Student Registration Part 3
Student Registration Part 4
