Team: Boyd Compton, Emma Drobina, Sowjanya Garigipati, Ryan Hodge, Colin John
During the first semester of the capstone project, we designed the layout of our web application, an updated research portal for the Office of Undergraduate Research (OUR), and began to develop it. During the second semester, which will be covered in this post, we revised our initial designs, completed the project, and prepared a final release to send to our client. A late-stage prototype of the web application can be viewed here.
During this phase of the project, I worked primarily as a developer in Angular 2, HTML, and CSS. Firstly, I implemented a revised front page design, where there is a welcome section that introduces you to the site and shows blog posts and announcements (we later added a sidebar with permanent links, as shown in the picture above). Users can switch to the search view by clicking the “Search Faculty” button.
Search page with results (admin view).
I implemented the feature to let administrators delete faculty from the search results, and split the search page into a default search, where users search by keyword, and an advanced search, where users specify campus, college, and department. On the results page, users can scan the list of faculty and keywords related to their research. If they find a faculty member that interests them, they can click on their name and be redirected to the faculty profile, which has in-depth information on them.
Admin view of the faculty profile.
On the faculty profile, students can view more detailed information about the professor, including images and posts about their research. If students are interested in working with a professor, then clicking on the star by their name will save them to a workbook that lists recently viewed and favorite professors.
My largest contribution to the project was the creation of blog posts. With blog posts, administrators can post updates about research opportunities or fellowships to the front page, professors can post about their research to their faculty profiles, and students can submit posts about their research experience for admin approval.
Blog editor – from here, users can post blogs and edit their drafts.
We used the ngx-markdown-editor library to allow users to easily edit their text and preview how it will display, as well as the ng2-markdown-to-html library to convert the markdown we stored back to html. All blogs can be saved as drafts or submitted immediately. Once they’ve been submitted, drafts and blog posts can be edited by the original poster. Additionally, the user has the option to give blogs an “expiration date,” after which they disappear from public view and a header image, which appears above the body of the post.
One of our largest changes was giving admins in OUR the ability to manage Research@UofSC by adding departments (if the University restructures colleges), approving blogs by students, creating new faculty members, and managing user permissions in a single place: the admin panel.
How administrators create new faculty members.
Here, administrators can give permissions to users – including connecting a user account with a faculty profile.
Finally, I helped complete a QA phase, where my team and I completed QA testing for another team, while a third team reviewed our project. After this, we fixed any errors the QA team reported and presented our project to our classmates and to OUR.
This project helped me build the skills in Angular 2, HTML, and CSS I had developed in the first semester of the Capstone project. Additionally, it helped me understand developing code as a team on an ongoing project, particularly how to best use Git. As part of this project, I learned how to effectively merge code, use branches and pull requests, and create releases on GitHub. Lastly, I built integral skills relating to working on a long-term project, including how to communicate with clients, how to work with teammates, and how to adjust direction on a project as needs change.