• 
  

  Implement your
  
  understanding of web application architecture in your web project

  
  
  
  


• 
  

  Study the
  
  different scenario of the project to come up with inclusive
  
  wireframe design (
  
  structure
  
  of the website)
  
  
  

  
  
  
  


• 
  

  Prepare a
  
  prototype design of your web application

  
  
  
  


• 
  

  Implementation
  
  should be done using react.js and related frameworks

  
  
  
  


• 
  

  Adhere formal
  
  project work file structure and good naming convention
  
  
  

  
  
  
  

For assignment 1
your task is to design and create a frontend web application
including featured user interface.

1. 
   

   A D2L or git
   
   repository containing your frontend implementation.

   
   
   
   

Your design and
implementation should use React, or another frontend web framework
that you have cleared with your instructor.

This assignment is
worth a total of 15 percent of your final mark.

As in any large
software project, you should take some time to consider your frontend
design before starting the implementation. Consider the following
questions while coming up with your design:

1. 
   

   What are my
   
   different pages?

   
   
   
   
   
   
   
   
   1. 
      

      Which parts of
      
      these pages should be components?

      
      
      
      
   
   
   2. 
      

      Which parts of
      
      these pages should be elements?

      
      
      
      
   
   
   3. 
      

      Where should I
      
      store my state? Which elements can be stateless?

      
      
      
      
   
   
   4. 
      

      How should the
      
      state be transferred between components and elements?

      
      
      
      
   
   
   
   
   
   


2. 
   

   How can my
   
   frontend use an API to access a data from a database?

   
   
   
   


3. 
   

   Which portions
   
   of my design are reusable?

   
   
   
   


4. 
   

   How should I
   
   handle animation and state changes?

   
   
   
   


5. 
   

   Is my design
   
   modular?

   
   
   
   
   
   
   
   
   1. 
      

      Does this
      
      design exhibit low coupling and high cohesion?

      
      
      
      
   
   
   
   
   
   


6. 
   

   Is my design easily updatable
   
   or customizable?
   
   
   

   
   
   
   

Remember to keep the
following in mind as you write and test your code:

1. 
   

   Does this code
   
   adhere to the design?

   
   
   
   
   
   
   
   
   1. 
      

      If not, is
      
      that an implementation oversight or a design oversight?

      
      
      
      
   
   
   
   
   
   


2. 
   

   Is this code
   
   maintainable?

   
   
   
   
   
   
   
   
   1. 
      

      Does it detect
      
      and handle strange input parameters?

      
      
      
      
   
   
   2. 
      

      Does it
      
      correctly leverage the framework I am using?

      
      
      
      
   
   
   3. 
      

      Does it use
      
      proper packages and tools?

      
      
      
      
   
   
   
   
   
   


3. 
   

   Is this code
   
   efficient?

   
   
   
   
   
   
   
   
   1. 
      

      
      If not, is it
      
      worth the cost in time and readability to fix that?

      
      
      
      
   
   
   
   
   
   


4. 
   

   At this point
   
   you can recode the front end as well as the back end to meet any
   
   specific need

   
   
   
   

You are expected to
make progress on your site throughout the semester. To pass, your
front end must meet the following conditions:

1. 
   

   Stored in a git
   
   repository or D2L

   
   
   
   


2. 
   

   Capable of
   
   running on a local machine.
   
   
   

   
   
   
   


3. 
   

   It should have
   
   full functionality of UI by the time the assignment is due.

   
   
   
   


4. 
   

   Each student
   
   has to demonstrate the submission up on request.
   
   
   

   
   
   
   

Assignment
2: (15/15)

Assignment expectation

• 
  

  Implement your
  
  understanding of web application architecture in your web project

  
  
  
  


• 
  

  Study the
  
  different scenario of the project to come up with inclusive design

  
  
  
  


• 
  

  Prepare the
  
  backend design of your website

  
  
  
  


• 
  

  Implement backend
  
  web application using Node.Js and SQL/MySQL or MongoDB server.
  
  
  

  
  
  
  


• 
  

  Create different
  
  local APIs to process data from your database.
  
  
  

  
  
  
  


• 
  

  Discuss your ERD diagram to
  
  make sure the schema accommodates the features of your frontend
  
  website You should be able to run, connect to, and query your
  
  database and populate the database with sample record

  
  
  
  


• 
  

  
  
  
  
  
  Which
  
  API should you implement to retrieve information to/from Bow course
  
  registration system?
  
  
  
  
  

  
  
  
  

Submission Requirements 15

Your
task is to integrate your front application with your backend
application for your course project. In this part of the assignment2,
you should work on

1. 
   

   
   
   
   
   
   Working
   
   database schema implementation populated with sample data 3
   
   
   
   
   

   
   
   
   


2. 
   

   
   
   
   
   
   Web
   
   application and database integration 2
   
   
   
   
   

   
   
   
   


3. 
   

   
   
   Local
   
   APIs to fetch data to/from your database (you can us postman for
   
   testing) 2
   
   

   
   
   
   


4. 
   

   
   
   
   
   
   
   
   
   Security
   
   and validity of your front-end and back-end web application 3
   
   
   
   

   
   
   
   


5. 
   

   
   
   
   
   
   Login
   
   or session management 3
   
   
   
   
   

   
   
   
   


6. 
   

   
   
   
   
   A
   
   test suite that covers all major functionality of Bow course
   
   registration system
   
   
   
   .
   
   2
   
   
   
   
   

   
   
   
   

Your
design and implementation should use NodeJS and SQL database or MySQL
database, or another backend web framework and database system that
you have cleared with your instructor.

Final Project

Front End and Back End
integration (20/35 points)

Implementation

Much
like your frontend, you should think carefully about your design
before you start implementing any code. Consult your sketch and
consider the following questions:

1. 
   

   
   
   
   
   
   Which
   
   API should to get information from Bow registration system
   
   
   
   
   

   
   
   
   


2. 
   

   
   
   
   
   
   Proper
   
   use and implementation of APIs to work on Bow registration system
   
   
   
   
   

   
   
   
   


3. 
   

   
   
   
   
   
   What
   
   is the input and output of any functions I need? Are there edge
   
   cases?
   
   
   
   
   

   
   
   
   

1. 
   

   
   
   
   
   
   How
   
   should I structure my end points?
   
   
   
   
   

   
   
   
   


2. 
   

   
   
   
   
   
   How
   
   will I manage login and sessions?
   
   
   
   
   

   
   
   
   








1. 
   

   
   
   
   
   
   Is
   
   my design modular?
   
   
   
   
   

   
   
   
   

1. 
   

   
   
   
   
   Does
   
   this design exhibit low coupling and high cohesion?
   
   
   
   

   
   
   
   

Testing your web application (15/35 points)

Testing your system

Once
you have settled on a design, begin creating unit tests for your API
endpoints. You may use any testing framework of your choice, or none.
You are recommended to use postman and similar tools to easy your
work for testing purposes.

Implementing
Your Backend

With
unit tests in place, you should be able to write your backend code to
pass the tests. Remember to keep the following in mind as you write
and test your code:

1. 
   

   
   
   
   
   Does
   
   this code adhere to the design?
   
   
   
   

   
   
   
   

1. 
   

   
   
   
   
   If
   
   not, is that an implementation oversight or a design oversight?
   
   
   
   

   
   
   
   






1. 
   

   
   
   
   
   Is
   
   this code maintainable?
   
   
   
   

   
   
   
   

1. 
   

   
   
   
   
   Does
   
   it detect and handle strange input parameters?
   
   
   
   

   
   
   
   


2. 
   

   
   
   
   
   Does
   
   it adhere to the best practices of the language I am using?
   
   
   
   

   
   
   
   


3. 
   

   
   
   
   
   Does
   
   it correctly leverage the framework I am using?
   
   
   
   

   
   
   
   






1. 
   

   
   
   
   
   Is
   
   this code efficient?
   
   
   
   

   
   
   
   

1. 
   

   
   
   
   
   If
   
   not, is it worth the cost in time and readability to fix that?
   
   
   
   

   
   
   
   

Project will be
marked according to the following rubric:

	4 10 Exceptional	3 7 Good	2 5 Fair	1 3 Poor
Design Quality 5	All major functionality adheres to design best practices for the front end framework.	Most functionality is well designed, but there is one major oversight or a few small oversights. 7	Design has several major flaws, but still uses some aspects of the framework best practices. 5	Design did not use framework, or used it trivially.
2API Calls 10	Front end uses all mock server endpoints correctly.	Front end uses most mock server endpoints correctly. 7	Front end uses at least one mock server endpoint correctly. 5	Front end does not use mock server.
Implementation Quality 10	Implementation uses chosen library effectively, handles errors, and is reasonably efficient.	Implementation uses library, but not as effectively as possible OR does not handle errors reasonably OR is grossly inefficient. 7	Implementation barely uses library, or uses it incorrectly. 5	Library is not used, or is trivially used.
Style and Maintainability 10	Code follows industry standard conventions for organization, documentation, and style. Deviations from industry standard are trivially small.	Code does not follow industry standards, but is still easy to follow. 7	Code can followed, but it is difficult due to unconventional style, organization, or documentation.5	Code is almost impossible to follow due to poor style, documentation, or organization.