Capstone Project Final Paper PDF

Wyatt Stephenson CIS 2089551 Capstone Final Paper My capstone project is an online forum website and uses the MERN stack, which stands for MongoDB, Express, React, and Node. The MERN stack utilizes many concepts learned through the AAS in Web Developme...

Wyatt Stephenson CIS 2089551 Capstone Final Paper My capstone project is an online forum website and uses the MERN stack, which stands for MongoDB, Express, React, and Node. The MERN stack utilizes many concepts learned through the AAS in Web Development and knowledge from JavaScript, Web Authoring, and the three programming language classes I took — C++, Python, and Java. This paper will go over what was applied from the AAS to the project, achievements, opportunities for improvement, and provide a re ection on the project. With my capstone project, I achieved the goal of creating a MERN stack project in the form of a message board. To do this, I created many components on the frontend which pass data between one another and the database. I also achieved this by writing classes and instantiating them as objects on the backend, which communicate with the database. I completed these tasks by putting in the time to create the component in React, set the state using React hooks which work together and a call the respective axios function. I also establish express routes that call controller methods, which then calls a DAO. It can be said that these goals were achieved because the website functions as intended. I completed these tasks using VS Code, Google Chrome and Chrome Developer tools such as the console and Element inspector. Goals that I did not complete include creating a user-friendly replies section of posts, and total separation of concerns for the controllers and DAOs. Total separation of concerns for the backend logic could have been achieved by creating a service layer on the backend which would act as a hub to separate the concerns. In addition there were features that I did not complete such as the Mod Tool Search Component which would have allowed more detailed searching including of users. I also did not complete functionality that allows users to visit other users’ pages. These uliutately came down to time constraints. If I were to complete this capstone project again, the only thing I would have done di erently is to create a service layer on the backend, as implementing the other features are simply a matter of time constraints. fl ff  If I could choose between doing the capstone again, and revamping what I have, I would revamp what I have, as it’s fairly decent with room for improvement. I would start by creating the service layer on the backend. Then, I would go through the components and look for opportunities to improve modularization. The best parts of the project included learning how to pass data between the front and back end and making something useful. The worst parts were getting stuck trying to gure out when to reuse a component and when to create a new one. Balancing modularization and reusability with separation of concerns seems to be a tradeo. For example the Edit component started o as a Reply component with special parameters, but in the end it was simpler to just make a separate component rather than play whack-a-mole while testing, trying to get both functionalities to work with the single component. The capstone project did challenge me. Anytime I come back to React after spending a few months away from it, I have to relearn how to use React Router and useContext. What would have made the project more challenging would have been to attempt to use additional React hooks that I have little experience with such as useRef and useReducer, among other. If I were to redo the project with the goal of making it more challenging, I would have tried using those hooks. The skills I improved on while working on the capstone project are knowing when to reuse a component and when to create a new one, as I ran into that a lot. If I didn’t improve knowing when to create a new component rather than reuse one, I de nitely did get a lot of exposure to seeing the tradeo between the two. I learned more about MongoDB from the project such as how to use projections. Skills that would have bene tted me prior to the project would be to have experience with MongoDB and Mongoose, as well as experience with additional developer tools. I’m aware of there being dev kits for React, and tools to make creating websites with the MERN stack easier and simpler, but I don’t know speci cally what they are or how to use them. ff fi ff ff fi fi fi  Soft skills I engaged with on the capstone project were patience and perseverance. These improved over time by putting patience into practice over the 100+ hours of the project. I wanted to complete the whole time as soon as possible, but learning to put that on the back burner and work on it was bene cial. I just started telling myself that I’ll work on what there is left to complete while there’s time left in the project, and as long as I’m doing that, it doesn’t matter how soon or late it gets done, as long as I’m putting the time in. The express data access objects and express controller objects rely on OOP concepts learned and worked with in C++, Python, and Java, such as classes. In express data access objects, each class is declared in a structurally similar way to how the programing languages declare classes, which I studied for the AAS. Objects are also instantiated in data access objects using the “new” keyword, much like in the other programming languages, and member functions are called in the same way as they are in the languages studied, using the member access operator (.). Through research, before starting the message board website, I needed to learn how to use React for a full stack project. React, Node, and Express are JavaScript libraries/ frameworks, and MongoDB is a NoSQL database. Express uses classes and objects such as controllers, for business logic, and data access objects for database communication. As part of researching, I built the project from the Beginning MERN Stack book, which was a movie review site, to see how the MERN stack ties the frontend to the backend. Using Beginning MERN Stack by Greg Lim, I learned his method of creating a MERN stack project, including how to use Axios, a JavaScript library, to send GET and POST requests along a route to the backend, and how to set up a controller and DAO. As I worked with speci c types of updates to the database and business logic needs for the project, I branched out, researching how to perform more speci c and niche tasks including incrementing one attribute using the $inc operator, how to set one attribute using the $set operator, how to return only certain attributes using the projection object as the second argument to nd(), for example, which came from other resources. fi fi fi fi  The book used primarily React with React Bootstrap for the frontend, which is almost its own language. I chose a di erent approach for the frontend that was familiar and used a lot of what I learned in the Web Authoring and JavaScript classes. Instead of using React Bootstrap, I opted for JSX (Knowledge of HTML and JavaScript provides almost all of the knowledge necessary to use JSX with some small and speci c di erences), CSS, and function based React. And, as a refresher for React concepts, such as for destructuring props, and the UseContext hook, and other features of React, I relied on speci c resources which I have included in my resources document in my project journal. React hooks useE ect and useState, functional components, as well as JSON format were covered in JavaScript class. The courses that I found less useful are coming from the perspective of someone looking for a job in web development, as a software tester, or as a software development. The courses that I didn’t nd useful were Intro to Python and Java. The reason that I didn’t nd Intro to Python useful was because it didn’t cover much material. Java was informative, but didn’t tie into the program of study. Although I know that Java is used for web development, I still don’t know how. The courses that I found most useful were Web Authoring, Computer Science I and II, Advanced Python, JavaScript, Intro to SQL, Database Design and Development, and PHP. Web Authoring was very pertinent because of how much CSS and HTML it goes through. These are at the core of web development. Computer Science I and II were helpful because of the concepts at the core of all programming languages, and the heavy practice it o ered in coding, which applies to any backend technology. Advanced Python added value to the skillset because Python is a popular programming language, and having a foundation in it can open up job possibilities. In addition it provided excellent practice for programming skills as Computer Science II did. JavaScript was useful because web development stacks rely very heavily on JavaScript. Intro to SQL was valuable because working with databases is integral, which is the same reason that Database Design and Development was useful. PHP was fi ff fi fi ff ff ff fi useful, because with PHP, just like with Advanced Python, job opportunities open up in the form of LAMP, MAMP, and WAMP stack jobs. I do wish that there had been a course in software testing using Python, JavaScript (in the form of Playwright), or C++, as that is an entry level job that recruiters have actively contracted me to apply for. Having more knowledge in this area would be valuable. Advanced Python covered test cases for a week, but more would be better. Computer Science II had assignments that were tested using “assert,” but experience with testing software, by using “assert,” would be handy as well. A class that is a semester long group capstone project almost, formulated to provide internship experience, would also be useful, as getting internships is extremely di cult because of how competitive they are in addition to being located far away. Classes geared toward speci c tech stacks like the MERN stack would also be handy. All in all, I learned a lot with this capstone project, and over the course of study for the AAS in Web Development, from applying OOP to new libraries and frameworks, to designing GUIs, and designing websites with the end user in mind. The capstone project will make a great portfolio project to showcase for employment. In addition, not only will I have experience with LAMP stack technologies, but also MERN stack technologies, for a higher degree of appeal in the job market. ffi fi