Software Engineering and Design Enhancement
Overview
The artifact selected for this enhancement is the IT 145 Pet Boarding System, originally developed as a Java-based object-oriented application. The original system focused on managing pet boarding data but lacked a user interface, persistent storage, and modern software architecture.
For this enhancement, the artifact was transformed into a full-stack web application using React, Node.js, Express, and MongoDB. The goal of this enhancement was to improve the overall system design, usability, and scalability while applying modern software engineering principles.
Justification for Inclusion
This artifact was selected because it demonstrates my ability to redesign and enhance an existing system using industry-standard tools and practices. The transformation from a static Java application into a dynamic full-stack system highlights my growth in software engineering and design.
Key components that showcase my skills include:
- Development of a modular frontend using React components
- Implementation of a structured backend using Express and RESTful APIs
- Integration of frontend and backend through API communication
- Creation of a responsive user interface with improved user experience
- Separation of concerns across frontend, backend, and database layers
These improvements demonstrate my ability to design and implement a scalable and maintainable software solution.
Enhancements Made
The following enhancements were implemented:
- Conversion from a console-based Java application to a web-based interface
- Implementation of reusable React components for UI consistency
- Creation of navigation using React Router for seamless user experience
- Development of a structured backend with Express routes and controllers
- Integration of frontend and backend using API calls
- Implementation of responsive design for multiple screen sizes
These enhancements significantly improved usability, maintainability, and system structure.
Course Outcomes Achieved
This enhancement aligns with the following course outcomes:
- Outcome 1 (Collaboration): The modular design and separation of concerns support collaborative development environments.
- Outcome 2 (Communication): The system demonstrates clear organization and documentation through structured components and portfolio presentation.
- Outcome 4 (Software Engineering): The full-stack implementation reflects the use of modern tools and practices to build a complete software solution.
Reflection
Enhancing this artifact allowed me to gain a deeper understanding of full-stack development and software architecture. One of the most significant lessons I learned was the importance of structuring an application in a way that supports scalability and maintainability. Transitioning from a simple object-oriented program to a layered web application required careful planning and organization.
One challenge I encountered was managing CSS styling across multiple pages. Initially, styles applied globally caused conflicts between components. I resolved this by implementing CSS modules, which allowed styles to be scoped to individual components and improved maintainability.
Another challenge involved structuring the application to ensure smooth communication between the frontend and backend. Through debugging and testing, I developed a stronger understanding of API integration and data flow within a full-stack application.
Overall, this enhancement significantly improved the artifact and strengthened my skills in software engineering, preparing me to build more complex and scalable applications in the future.