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/

Sign In Page

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.
Sign In Page

Dashboard

    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

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 Page

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 1

Student Profile Part 2

Collapsible headers provide useful information about the student, program, parent, or other entities.
Student Profile Part 2

Student Profile Part 3

Notes section allows users to add notes about the student.
Student Profile Part 3

Student Profile Part 4

Created a custom reusable modal
Student Profile Part 4

Student Registration Part 1

Student Registration Part 1

Student Registration Part 2

Student Registration Part 2

Student Registration Part 3

Student Registration Part 3

Demo Coming Soon...