Skip to main content

Frontend Final Project

(32.5% of the course mark)

Course Final Project​

  • For the final project, students will create their own unique application and implement a specific feature. This project will allow students to demonstrate their understanding of front-end technologies, as well as their ability to apply these skills creatively to develop a fully functional application.

Final project objectives​

By the end of this final project, you should have implemented a feature of an application, using any of the diverse stack of front-end technologies covered in class such as:

JavaScript
  • Vanilla Js
  • Node Js
  • Express Js
  • EJS
  • Fetch
  • ES6 Concepts / Modules
REST
  • Create
  • Read
  • Update
  • Delete
HTTP Methods
  • POST
  • GET
  • PUT
  • DELETE
React
  • JSX
  • Components
  • Props
  • Events
  • Conditionals
  • Lists
  • Forms
  • Hooks
  • React Router
CSS Frameworks
  • Bulma
  • Bootstrap
  • Tailwind
  • Sakura

Final project Guidelines​

  • Think of any application you wish to build and choose one specific feature to implement. It can be a complex app like an e-commerce platform with many features, or a simple one like an expense tracker for example, if you choose an e-commerce app, possible features include an online store, payment processing, or inventory management. Regardless of complexity, scope your project based on factors like time constraints and familiarity with the relevant technology stack.

  • The feature chosen to be implemented should demonstrate CRUD (create, read, update, and delete) tasks.

  • Choose any framework or technology stack to support your app.

  • For backend data, you can use the generic Crud-Backend-App which was demonstrated in Lab-2-11.

Marks breakdown​

  • HTML, CSS and JavaScript coding = 75 %

    • Keep it Simple: Write code that is easy to understand. Avoid unnecessary complexity.

    • Descriptive Naming: Use meaningful variable, function, and class names that clearly describe their purpose.

    • Commenting: Write comments to explain why certain decisions were made, not just what the code does.

    • Single Responsibility Principle: Each function or module should have a single responsibility.

    • Reusability: Write reusable functions and components to avoid duplication.

    • Graceful Failures: Handle errors gracefully to avoid crashing the application.

    • Logging: Log errors and important events to aid in debugging and monitoring.

    • ES6+: Utilize modern JavaScript features such as arrow functions, destructuring and template literals.

    • Async / Await: Use async/await for handling asynchronous operations instead of callbacks or then/catch.

    • Modules: Use modules to encapsulate code and manage dependencies.

    • Array Methods: Use array methods such as map, filter, forEach, and reduce when appropriate.

    • Component Reusability: Create small, reusable components to build a scalable UI.

    • React Hooks: Use the correct React hooks to support your app.

  • Functionality of the feature: 25 %

    • Does the chosen functionality demonstrate CRUD operations?

Submission​

  1. Create a GitHub repository named COMP9783-59774-Final-Project. If the repository is private, add roderickkit-bernardo as a collaborator.

  2. Upload all files required to run your app excluding node_modules to the following repo: Final-Project-COMP9783-59774.

  3. Send an email to roderick.bernardo@georgebrown.ca with your repository details and, if applicable, any necessary build instructions.