Spring 2020 Final Exam Guide For CIS 3100 Project

Spring 2020 Final Exam Guidecis 3100 Final Exam Project Guide Student

Produce a React.js project as the final exam submission, which includes three components: items, item, and a dataManager. The project should import items and load bootstrap as CSS in App.js, making the app responsive. Use create-react-app to set up the project, and access state and props through JavaScript. Maintain a master state in dataManager that tracks item data, updating it through item and items components. Implement UI features for creating and deleting items. Deploy the web application to a public URL via Amazon Web Services. Submit the final version before the exam deadline.

Record a video under two minutes demonstrating the deployed app using Chrome's Inspect and React web inspector, without showing your IDE. Show only the live deployed app. During the demonstration, identify and discuss any errors visible in the React inspector and console, explaining their meaning and potential fixes. Include a brief discussion of what you accomplished, focusing only on what you did for the project, not future plans. Ensure the video reflects a working application with errors discussed clearly.

Paper For Above instruction

In this final project for CIS 3100, students are tasked with creating a React.js application that demonstrates their understanding of component structure, state management, and deployment processes. The project requires the development of three core components: items, item, and dataManager. These components work together to manage a list of data items, allowing for creation and deletion functionalities, encapsulated within a responsive interface.

The project must be initiated using create-react-app, ensuring a streamlined setup with all necessary dependencies including Node.js. Incorporating Bootstrap CSS enables the app to be responsive and visually appealing, aligning with modern web development standards. App.js should serve as the main entry point, importing the items component, and setting up the Bootstrap stylesheet. The dataManager component will contain a master state variable that holds the array of data items, updating this state via functions called in the item and items components as users add or delete items.

JavaScript logic is critical in handling the state and props, fostering data flow from parent to child components and vice versa. For creating new items, users should interact with a form or button that triggers a state update. For deleting items, a button or icon associated with each item facilitates removal, updating the master state accordingly. The React application's responsiveness ensures compatibility across devices, leveraging Bootstrap’s grid and utility classes.

Deployment is a key aspect of the final project. Students are required to deploy their application to a public URL using Amazon Web Services (AWS). This demonstrates an understanding of cloud deployment and web hosting services. Students must ensure that the deployed app is fully functional, with all features tested and working as intended.

As part of the submission, students will create a brief video, less than two minutes, showcasing their working application. The video should be recorded inside Chrome's browser tools, specifically demonstrating the React web inspector and Chrome DevTools. During the demo, students should highlight the application’s features and usage. Additionally, errors displayed during inspection or in the console should be acknowledged and discussed, including potential causes and remedies. This process ensures students demonstrate their problem-solving skills and understanding of React debugging.

In terms of grading, the project will be evaluated based on coverage of the required components and functionalities. Projects that comprehensively implement creation and deletion of items, effective state management, responsiveness, and proper deployment will score higher. Those with partial features or critical errors may receive lower grades, reflecting their adherence to the project criteria.

In conclusion, this project aims to assess students' mastery of React.js fundamentals, deployment skills, and ability to troubleshoot. Success is measured not just by meeting functional requirements but also by demonstrating understanding during the video presentation. Clear discussion of achieved features, encountered errors, and proposed solutions will strengthen the final evaluation, ensuring a comprehensive demonstration of practical React development skills.

References

  • React.js Documentation. (2023). React Official Website. https://reactjs.org/docs/getting-started.html
  • Create React App documentation. (2023). Facebook. https://create-react-app.dev/docs/getting-started/
  • Bootstrap Documentation. (2023). Bootstrap. https://getbootstrap.com/docs/5.3/getting-started/introduction/
  • AWS Amplify Documentation. (2023). Amazon Web Services. https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html
  • Chrome DevTools Documentation. (2023). Google. https://developers.google.com/web/tools/chrome-devtools
  • State Management in React. (2022). Kent C. Dodds. https://kentcdodds.com/blog/application-state-management
  • React Components and Props. (2022). Mike Chen. https://reactjs.org/docs/components-and-props.html
  • Deploying React Apps on AWS. (2021). AWS Tutorials. https://aws.amazon.com/blogs/mobile/deploying-react-applications-with-amazon-s3-and-cloudfront/
  • Debugging React Apps. (2022). Dan Abramov. https://reactjs.org/docs/error-boundaries.html
  • Responsive Web Design Principles. (2023). Smashing Magazine. https://www.smashingmagazine.com/2023/05/responsive-web-design-patterns/

Related Assignments