Introduction
While taking the Web Technologies course at TCU, we were assigned a group project. The assignment was to develop a full functioning website. This website would be used to schedule a SuperFrog Student Appearance (TCU's Mascot). This is important to TCU as their policy mandates that there can only be one SuperFrog in the world at any time. We would need to create forms for customers to request an appearance for events such as weddings and sporting events. Then we needed a database to store these forms and create student and admin accounts to manage these forms. With six members on our team, we each became fullstack developers working with Vue.js as our frontend and Spring Boot as our backend.
API-First Approach
Our team believed in the API-first approach. APIs are the contract between the frontend and backend developers. This approach allows developers to work independently of each other and work solely to developing features that utilize the API. We wanted our API to be RESTful. We developed our API documentation using a yml file. The API was written before any single line of code was written.
Agile Workflow
-Created User stories on GitHub issues and assigned to a team member
-Worked on indepedent feature branches
-Performed pull requests and reviews
-Communicated story status
-Merged branches onto file project
Backend
The backend was built using Spring Boot (Java). Using the Spring Framework, we can easily manage dependencies by having Spring inject them. We had the Spring JPA repository handle our database by automatically converting our annotated entities into SQL tables. The backend was developed using the Test Driven Development schema. I would write out tests before writing a feature then implement just enough code to pass the test. After writing a feature, I would launch the app locally and used Postman to mimic the API calls. The backend would also handle security. Authorization and authentication using a JWT was our choice.
Frontend
The frontend was built using Vue.js. We componentized parts of the website to be able to reuse any components on our pages. Vue components contain HTML elements, css scoped styles pertaining to that component, and JavaScript to create Vue instances and mount data and functions onto an app. The frontend made API calls using the axios library.
Conclusion
This course was a great introduction to fullstack development with a team. The instructor laid out the documentation to mimic a client request for an application. After that, the team was left with no starter code and had to figure out how to work together. I learned that when working with a member that isn't performing their assigned task, we shouldn't just boss them around. We should convince them of the overall benefit of performing their task, be understanding if they are lost and offer help if necessary. There were many times where we peer programmed. Git branches were very important in the success of our independent development. Overall, the project was a success and we received full credit. Additionally, we hosted it fully online!
