diff --git a/.gitignore b/.gitignore index 0a045ad..a2841e5 100644 --- a/.gitignore +++ b/.gitignore @@ -36,4 +36,9 @@ yarn-error.log* # Misc .DS_Store *.pem -.idea/ \ No newline at end of file +.idea/ + +# Report Latex +report.* +!report.tex +!report.pdf diff --git a/Report PDF & LaTeX Files/Screenshot 2024-12-10 at 21.39.08.png b/Report PDF & LaTeX Files/Screenshot 2024-12-10 at 21.39.08.png new file mode 100644 index 0000000..2b455d9 Binary files /dev/null and b/Report PDF & LaTeX Files/Screenshot 2024-12-10 at 21.39.08.png differ diff --git a/Report PDF & LaTeX Files/System Architecture.png b/Report PDF & LaTeX Files/System Architecture.png new file mode 100644 index 0000000..e4d88b0 Binary files /dev/null and b/Report PDF & LaTeX Files/System Architecture.png differ diff --git a/Report PDF & LaTeX Files/demo.mp4 b/Report PDF & LaTeX Files/demo.mp4 new file mode 100644 index 0000000..9199ce2 Binary files /dev/null and b/Report PDF & LaTeX Files/demo.mp4 differ diff --git a/Report PDF & LaTeX Files/report.pdf b/Report PDF & LaTeX Files/report.pdf new file mode 100644 index 0000000..7657ebf Binary files /dev/null and b/Report PDF & LaTeX Files/report.pdf differ diff --git a/Report PDF & LaTeX Files/report.tex b/Report PDF & LaTeX Files/report.tex new file mode 100644 index 0000000..1ff4242 --- /dev/null +++ b/Report PDF & LaTeX Files/report.tex @@ -0,0 +1,122 @@ +\documentclass[a4paper, 12pt]{article} +\usepackage[T1]{fontenc} +\usepackage[margin=1in]{geometry} +\usepackage{indentfirst} +\usepackage{enumitem} +\usepackage{graphicx} +\usepackage{lipsum} +\usepackage{float} +\usepackage[most]{tcolorbox} +\usepackage{media9} +\usepackage{hyperref} + +\hypersetup{ + colorlinks=true, + linkcolor=blue, + urlcolor=cyan, +} + +\definecolor{shadecolor}{gray}{0.9} +\newtcolorbox{example}{colback=shadecolor,grow to right by=-30pt,grow to left by=-30pt,breakable,adjusted title={Example}} + +\newcommand{\Example}[1]{\begin{example}#1\end{example}} + +\begin{document} +\title{HESS - CRSR - Automarker (Amongsus) Report} +\author{Vivan Waghela \and Ayush Acharjya \and Ye Aung (James) \and Selahattin Satilmis} +\date{7th December 2024} +\maketitle + +\section*{DEMO VIDEO} +\subsection*{Only works in latest versions of Adobe Acrobat and Okular PDF} +\noindent\href{https://bham-my.sharepoint.com/personal/axa2204_student_bham_ac_uk/_layouts/15/guestaccess.aspx?share=ETttWhWBaN5Cg4imyyt9B0sBOtxlj_SgOvyaVzMR3Kuz4g&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=0tRqZy}{Link to online video} + +\vspace{3mm} + +\noindent\includemedia[ + width=\textwidth, + addresource=demo.mp4, + flashvars={source=demo.mp4} +]{\includegraphics[width=\textwidth]{thumbnail.png}}{VPlayer.swf} + +\section*{Gource Video Link} +Gource is a contribution history graph generator. The link for the generated history graph is \href{https://bham-my.sharepoint.com/personal/vxw397_student_bham_ac_uk/_layouts/15/guestaccess.aspx?share=EfxBPncvaS9Ikv4icBteGqkBTj_La-L_GhuZvfUcs9hWzA&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=ppezH1}{here}. + +\section*{Summary} +We decided to use Ayush's EDR for our prototype. As Module Organisers could need more customisability than pre-built containers, we changed our prototype to allow them to upload a Dockerfile along with a test file that would be executed inside the docker container. We were able to make a working version of the auto-marking system described in the EDR. The system is able to run the submitted programming assignment against tests defined in test file. The markers can customise the test file as much as they like. The system also reduces human error as the code will be executed and the marks will be calculated based on the output of the test file. As per non-functional requirements, we were able to allow our system to mark code for any possible programming language (as long as there is a way to mark it with a shell file and a Dockerfile). As the CSRS product has an open API for developers to use, we included our submission API in the existing open API so that technically-savy users can automate parts of submission. + +\section*{Accomplishments} +To keep track of the development process, we decided to use GitHub Issues (see Fig.~\ref{fig:issues}). We also used Discord to communicate with each other, including weekly meetings, general calls to help each other and keep track of what is being updated in the repository, etc, and we took detailed meeting notes every meeting. To make sure our code works before it is merged into the main branch, we first individually tested our code by simply running it, then a pre-commit hook makes sure the code builds before a commit is made. Once the pre-commit hook succeeds, we would create a Pull Request for the feature being made. The repository restricts merging until a reviewer other than themself approves it, and requires that the CI check passes. Once merged, our CD pipeline builds the backend and engine docker images and pushes it into the dockerhub and verifies that it has been pushed. The CI pipeline also runs after a merge occurs into the main branch to make sure the merged code does not fail any tests. + +\subsection*{Project Management} +We implemented the Agile development strategy, which was easiest for our team to work with as implementing a system like our prototype can and will have bugs that we would potentially run into during development. + +In our first meeting for this project, we decided that Vivan would work mainly on the backend, Ayush would work mainly on the engine, devops, and some parts of the backend, James would work mainly on the student frontend, and Selahattin would work mainly on the marker frontend. Since James and Selahattin worked mainly on parts of the frontend, they also worked on the UX for the website. During development, James and Selahattin had a lot of questions, so Vivan and Ayush collaborated with them throughout the frontend development process. + +Many times, the frotnend team needed to communicate with the backend team about what the backend would return in specific API routes. Sometimes, team members had written entire features including frontend and backend parts. This would be communicated beforehand so that other group members would not be confused. This would lead to many parts of each of the system being completed quicker as more features would be implemented at the same time. + +\subsection*{Planning} +Throughout the entire project, each member was transparent on what work they finished, what they need to finish, and what they needed help with. We also set deadlines so that each feature would be completed and tested thouroughly on time. There were times that a feature was not finished by a deadline due to complex errors that had to be debugged multiple times by other group members. + +\Example {There was an issue where the CI pipeline could not build the project as it was reporting a very generic error, however, it was successfully building on all machines within the group. After doing tons of research, we found that we simply needed to add an optional dependency in the \emph{package.json} file} + +As per our planning, we finished the project 2 days before the dealine of the prototype, all thanks to our planning that allowed deadlines to be moved whenever needed. We used the remaining time to polish the project by cleaning up some of the code and increase the project's efficiency. + +Like any group, we also had a few miscommunications that occurred throughout the development process: + +\Example {In the beginning of the project, one of our group members decided to use MUI as the components library without informing the others. However, in our first meeting, we had decided to use shadcn as our components library. In the next meeting, we discussed if we should continue to use shadcn or if we should switch to MUI for our components library. In the end, we decided to stick to shadcn.} + +There were also times where two teammates had different ways a problem could be fixed, and both preferred their own fix. To resolve this conflict, we would have a meeting that would attempt to find a middleground. We would discuss the pros and cons of each approach, and we would try and merge both solutions to include as many pros from both approaches and leave out as many cons from both approaches. + +\subsection*{Technical Achievments} +We decided to use a monorepo for our project as we knew there would be shared code which would implement the DRY coding practice. Our frontend used NextJS, our backend used ExpressJS, and our engine (microservice) uses NodeJS. We used Kafka for our async communication system. All systems were implemented in Typescript. We also used Storybook to individually test our components in isolation. + +We built our prototype to be very scalable, which is why our prototype uses a microservice-based system architecture (see Fig.~\ref{fig:system-architecture}). We used Prometheus and Grafana to monitor our backend API services. We also included an OpenAPI spec in our backend to allow technically-savy people to automate parts of this new system. + +% We were able to make our prototype as close to a full product as we could with the time given for this project. We made sure there are little to no hard-coded values, as users can create student accounts and markers can create assignments, and the engine would mark the submissions as per the provided test script when the assignment is created. + +If our product is ran in production, it would be able to withstand a high volume of requests and submissions (provided that load-balancing is implemented in the production server). If needed, multiple instances of the engine can be ran to increase the marking speed of submissions (this can be done with a kubernetes cluster as well). + +\section*{Images} +\begin{figure}[H] + \centering + \includegraphics[width = \textwidth]{Screenshot 2024-12-10 at 21.39.08.png} + \caption{Screenshot of all Github issues used to keep track of development} + \label{fig:issues} +\end{figure} +\begin{figure}[H] + \centering + \includegraphics[width = \textwidth]{System Architecture.png} + \caption{Screenshot of our System Architecture Design} + \label{fig:system-architecture} +\end{figure} + +\section*{Reflections} +\begin{enumerate} + \item Vivan's Reflections + \begin{description} + \item[Ayush: ] Ayush played a very crucial role in this project. He was tasked with writing the engine and doing the devops, the main part of this project, that would mark student submissions and update the database accordingly. This also required him to write some parts of the backend so that the engine can work with the backend. His major skill is his knowledge on many different tools that are widely used. Without this skill, this project would not have been possible. He also thinks about scalability features when coming up with system designs, which is very helpful where in the future it would need to be thought about. He was also a great help to James and Selahattin as whenever they needed help, Ayush was able to help more with things than me. Another one of his biggest skills is his patience. Even when a very big bug would occur, he was able to patiently find the root of the bug and would fix it. He also was very friendly and always helped people out whenever they needed it. One thing I would say is that he could have less strict deadlines as many times life happens and it could make someone not meet a certain deadline. However, I understand the reasoning behind the scrictness. Overall, he was very fun to work with and I will be happy to work with him again. + \item[James (Ye Aung): ] James was tasked with making the student frontend. Even though he did not have much knowledge on frontend development, he was able to make such a great UI and UX due to his determination and willingness to learn. Seeing his dedication assured me that this project will be completed well in time. He also met all of the deadlines that would be set, re-assuring me that even though he did not have much experience with the frontend, he will learn a lot a finish his parts of the project. He was able to effectively communicate his issues and questions, which made it very easy for me to help him out when he needed it. Even though a miscommunication occures where he used bootstrap to make the UI instead of shadcn, he was able to re-write the UI code using shadcn. He is very good at these types of big re-writes, which is a very good skill to have in the future. One thing I would say is that he sometimes over-engineers solutions to some problems. However, sometimes over-engineering a solution to a problem can come handy in the future, so it is not a bad quality to have. Overall, James was a really fun to work with and I would love to work with him again. + \item[Selahattin: ] Selahattin was tasked with making the marker frontend, where teachers could upload a test script and a Dockerfiles that would mark submissions from students. Being one of the more less-experienced members of the group means it is easier to get overwhelmed when major issues arise in the code. However, he was able to work through and learn a lot from working on this project. Similar to James, he asked a lot of questions throughout the development process. He also was able to communicate his issues and questions effectively, which made it very easy for me to help out when he needed it. He would also show his research on issues that he could not solve, which is great skill to have in the workplace as you can learn a lot more by fixing issues yourself before asking others. By collaborating with James, they were able to make the UI look very nice and was also able to implement a very good UX for the frontend, given their experience. One thing I could say is that he could have coordinated more with James as there were parts of the code that were pretty much the same and could be cleaned up (which I did near the end of the project). Overall, he was a great person to work with and I wish to work with him in the future as well. + \end{description} + \item Ayush's Reflections + \begin{description} + \item[Vivan: ] He was assigned to make backend API routes and keep the frontend team updated on the structure of the responses which each particular route would return, which he managed to do very effectively. Throughout the project he stayed transparent and kept the team updated with all the work which he was doing. He is a very fast learner as he is able to learn a new skill very quickly just through reading the documentation and applying it to the project. He strictly followed a DRY rule throughout the project. He was able to debug very complex issues and was able to solve them very effectively for eg.:- fixing the CI pipeline where we had a very generic error which was not allowing the project to build. He stayed upto date with smallest change which is happening inside of the repository and was able to help with any teammates who were facing some issues. One thing which he could have improved is to identify potential problems earlier. But as a team member he was very effective with his contributions and I am glad to have him on our team. He also brought a wide variety of knowledge to the team which was very helpful for the team. Aside with his technical skills he was a very patient and understanding team member who was always willing to help and guide us through the project. Apart from that he is a very good learner and was very good at implementing techincal skills into the project which also raised the standard of the project. + \item[James (Ye Aung): ] He was assigned with the implementation of student frontend. He was had a very limited knowledge with using react and nextjs and was new to frontend development. He was a fast learner and collaborated with the backend team and he oftenly asked questions related to the project which was very useful. He was also very good with pre-planning and he was always on time with his deadlines, he stayed transparent and asked for help from the team time to time. He took critical feedback very positively and worked on his skills and improved his work. He was able to solve complex challenges and came to a very efficient solution very quickly. Also he apart from being a project member, he well maintained a friendly atmosphere amongst the team which was very enjoyable and also he handled failures very well and was able to learn from them. One thing I would say is that he could have planned more on the frontend design and asked questions about the tech stack we were using before implementing his design because at the very beginning he was a bit confused about the tech stack and decided to use bootstrap instead of shadcn which was completely different from what we were using. But after that he started communicating and reconfirmed if he had any doubt. But overall, he was a great team member, and I am glad to have him on our team. + \item[Selahattin: ] He was tasked with the implementation of the marker frontend. Although he was a beginner at NextJs and Typescript, he was very keen to learn and showed great dedication, and when he was stuck, he remained transparent and asked for help. He collaborated with me much of the time to understand how the backend data format is going to be so that he can plan the frontend design accordingly. He was also very punctual and met his deadlines and communicated effectively with me and the rest of the team. He was also very good at summarising the team meetings and pointing out new ideas and issues that we might face in the future. He was very punctual with all his team meetings and performance review meetings. He also took the feedback given to him very positively and tried to improve his skills which always set a new bar for the team. One thing I would say is he could have planned more on the frontend design and asked questions about the tech stack we were using before implementing his design because at the very beginning he was a bit confused about the tech stack and decided to use MUI which was something that is completely different from what we were using (shadcn). But after that he was great at communicating with the team and always double checked if he had any confusion with any part of the project. But overall, he was a great team member, and I am glad to have him on our team. + \end{description} + \item James (Ye Aung)'s Reflections + \begin{description} + \item[Vivan: ] Vivan’s role in our project was central to its success. He communicated expectations clearly and guided us through tasks which made everything flow seamlessly. One of his great strengths was his technical skills. He was always there and willing to help whenever the team encountered difficulties regarding the tools that we were using. He also has this unique ability to explain difficult concepts with simple easy-to-understand terms. After talking with him, difficult problems always feel manageable because he always knows which documentation to read, which problem to fix, to tackle parts of the project. This has helped me keep up with the project’s pace and allowed me to get more confident in my abilities as I worked with Next.js and backend integration. His positive attitude and reassuring explanations always make me feel at peace and not worry about the difficulties but instead guide me on how to solve the task. If there’s one area for improvement, it might be identifying potential problems earlier in the development phase to prevent last-minute fixes. That said, his contributions were invaluable and his leadership and problem-solving skills made a significant impact on my personal development throughout the project. I, along with the team, would not have done very well without his leadership and guidance. + \item[Ayush: ] Ayush played a crucial role in our project, and he had a great impact on my learning journey. Before starting this project, I had limited experience with backend development and was new to front-end frameworks such as Next.js. This project was challenging for me, especially when it came to setting up APIs and integrating backend and frontend. Ayush was patient and he was willing to help. A lot of the time when I was stuck, I found myself seeking his guidance, and he always took the time to explain things to me thoroughly and guide me in the right direction. His support helped me overcome a lot of challenges and also made the overall process more comfortable and encouraging. He also checked up on us on our parts and offered help if we needed it. One thing I was struggling with was that he had a strict and safe deadline on our parts, and I was running late on some parts because I was studying for other modules. However, I understand that it is safer and better to complete it quickly and test for errors rather than to run late against the official deadline. It was not that much of a struggle because whenever I was running late, he stepped in to check on me and guide me. + \item[Selahattin: ] Selahattin was responsible for designing the front end of the marker interface. Although he and I were the two less experienced members of the four, he still showed dedication and a willingness to learn. He looked up tutorials online to understand how to design and code the front end with Next.js. He also attended the group meetings regularly and wasn’t scared to ask for guidance when he was unsure about setting up APIs. I felt comfortable and motivated with him because although he and I were both inexperienced at the start of the project, he showed dedication and discipline to learn what was needed to complete his part. His positive presence and his desire to learn and grow have left a positive impact on our group’s overall performance. Another positive thing about him is that he was always on time and managed his time well on his part of the project. Although we worked together to understand the idea for both the front ends of the student and marker pages, I wish we could have coordinated more on some parts because some of our code was a bit redundant (one of us could have done it and the other could work on the next things). But overall, it turned out very well and I am grateful to have him on our team. + \end{description} + \item Selahattin's Reflections + \begin{description} + \item[Vivan: ] Vivan fostered a positive and supportive environment, making team interactions smooth and enjoyable. He wasn’t only helping me but also he was coordinating us overall, managing our chat channels and telling us exactly how to do everything and making everything run smoothly. He was quite concise and clear on what he wanted and how he wanted it. He was also well experienced in the tools we used, so he was also helping me a lot with the problems I had. He was able to break down complex technical concepts into more digestible explanations, which has helped me not feeling overwhelmed with the work we are doing. He was very active during the development process so he was very reliable whenever I was doing my work, which reduced delays which could have been caused by the issues I had. One thing he could have done can be highlighting the issues in early development so that we could have watched out for these problems, but I would say other than that he has helped me a lot with understanding NextJS and made it very easy for me to cope with the group’s expectations. + \item[Ayush: ] For Ayush I would say working with him was really enlightening and made me learn a lot of things. Before starting this project I had very limited knowledge of backend development and not much of frontend. I started learning Next.js and API stuff specifically to use for this project so I didn’t really have prior experience on it. I was struggling a lot, especially when setting up the APIs and trying to ensure smooth integration of backend and frontend. I would say he provided very valuable guidance, patiently explaining stuff every time I was asking him to help me with the integration etc, which was almost everyday. But this level of help made understand a lot of concepts that I was struggling to understand. He has a very patient nature where he would repeat himself many times until he made sure I understood what to do which was also good for us as it formed a positive work environment where I felt really comfortable to ask questions which helped me improve a lot. One thing I would say is that he could have sent feedback more frequently on ongoing work to catch potential issues earlier and make it easy for me to work on them during the development, as when you are a beginner in the language a lot of uncertainties arise and I get overwhelmed quite easily. + \item[James (Ye Aung): ] Working with James throughout this project was very reassuring to say the least. We had similar level of knowledge and experience, which allowed us to relate to each other’s challenges and victories easily. While I was building the marker front end for publishing assignments, viewing submissions etc he was working on student submissions the deadline for them etc. One thing I greatly appreciated was his discipline, where he was always meeting his deadlines, which also allowed both of us to meet up almost periodically to help and learn from each other as we were both beginners for NextJS stuff. He was also very keen on learning, which allowed us to work together very efficiently, as having the same mindset allowed us to develop our code quite fast. He was quite good at summarizing the issues he had and his questions so it was really easy to relay our opinions and problems with each other. Another thing I would say about him is that he sometimes overengineers solutions for some of the simpler solutions which does sometime take time, but I would say this is not a too bad quality to have overall as sometimes it does come in handy when unexpected issues arise in the code. + \end{description} +\end{enumerate} + +\end{document} diff --git a/Report PDF & LaTeX Files/thumbnail.png b/Report PDF & LaTeX Files/thumbnail.png new file mode 100644 index 0000000..ff94f23 Binary files /dev/null and b/Report PDF & LaTeX Files/thumbnail.png differ