Edit Page

Project

Project Overview

Form a team consisting of 2-3 students to develop a web application using React. Your web app should solve a specific problem for a particular group of users. At minimum, your web app should include the following features:

  1. User Authentication: Utilize a service that manages user login and registration. (Optional in Fall 2024, required for future semesters)
  2. Protected Routes: Ensure that certain routes within the application are accessible only to authenticated users. (Optional in Fall 2024, required for future semesters)
  3. API Integration: The application should interact with an external API to fetch or send data.

Proposal Submission

Please submit a PDF document that includes the following information:

  1. Project Idea: Provide a detailed description of the problem your web application aims to solve and how it will address this problem.
  2. Paper Prototype: Submit a low-fi/paper prototype of your app. The prototype should clearly illustrate the user interface and user experience of your application, including key screens, navigation flow, and major functionalities. This will help in visualizing the design and layout before moving on to the development phase.
  3. Team Members: List the names and roles of your team members.

Project Submission

Please submit a link to your project on GitHub. Please make sure the repository reflects the contributions of all group members. You will need to demonstrate the project during the last lecture of the semester.

Grading Rubric

CriteriaExcellent [2 marks]Fair [1 mark]Poor [0 marks]
1. HTMLWell-structured and semantic HTMLBasic HTML structure with minor issuesPoorly structured HTML
2. CSS 1Responsive and well-styledBasic styling with some responsivenessPoor or no styling
3. JavaScript Interactivity and Form ValidationInteractive UI and proper form validationBasic interactivity, missing or minor issues in form validationPoor or no interactivity and form validation
4. User EventsEfficient handling of mouse and keyboard eventsBasic handling of user events with minor issuesPoor or no handling of user events
5. React ComponentsWell-organized and reusable componentsBasic components with some reusabilityPoorly organized components
6. Prop ManagementProper passing and management of propsBasic prop management with minor issuesPoor or no prop management
7. State ManagementProper use of state management techniquesBasic state management with minor issuesPoor or no state management
8. Routing and NavigationSmooth navigation across multiple pagesBasic navigation with minor issuesPoor or no navigation
9. API FetchingEfficient and error-handled API callsBasic API calls with minor issuesPoor or no API integration
10. Key FeaturesAll specified features are fully functionalMost features are functional with minor issuesFew or no features are functional
11. DeploymentSuccessfully deployed on GitHub pages or similarDeployed with minor issuesNot deployed
12. DocumentationREADME.md file with description, build instructions, and screenshots of the React appBasic README.md file with minor issues in description, build instructions, or screenshotsPoor or no README.md file
13. Accessibility 2Fully accessible using semantic HTML tags and alt text for imagesPoor or no accessibility
Total Marks25

  1. The use of CSS frameworks is allowed ↩︎

  2. Accessibility is worth 1 mark. ↩︎