Web Developer Fast Track

Winter 2022

CPNT-262 Assignment 3 - Group Assignment

  • Due: Friday April 8, 2022
  • Weight: 30% of the final mark

Outline

For this assignment, you are a web developer team who working on a multi page website. You can choose to do a client site that is focused on any topic of your choice, or you can choose to do a team portfolio site that focuses on advertising yourselves as a web development company.

You will be building your web site in Nuxt and deploying to Netlify. You must make use of 1 public api for data and can also use your own data from storyblok or a locally hosted api.

Use what you've learned in the course thus far to accomplish your site. As this assignment is focused on javascript, the majority of marks will be dependent on successfully using js and vue functionality on your site.

Tasks

  • Create a group charter (required)
    • outline and obligations
    • write up your charter in your README
  • Plan out your website (required)
    • objectives
    • content
    • style
    • code structure
    • plugins and modules
  • Build a kanban board to plan your project (optional +points)
  • Design wireframes and mockups (optional +points)
  • Set up your repo (required)
  • Build your site! (required)

Requirements

  • A team/company name
  • A consistent design system (typography, colors, and theme)
  • The following pages
    • A home page
    • At least 1 page that uses content from an api
    • A team bio/about page (dependent on your site)
    • 2 other pages (services/products, contact...)
  • Group Charter/readme

Tech Stack

Create a JAMstack site using Github, Nuxt, and Netlify.

  • Frontend: Nuxt 2 Static Site
  • Style: Your choice of CSS approach
  • Data: Public API + Local API
  • Hosting: Netlify

Marking Rubric

Bonus Point Options

  • Kanban Board
    • Organize project tasks in github kanban board
  • Design Mockups
    • Wireframes, mockups, prototypes. Any visuals used to improve your workflow
  • Storyblok
    • Site data hosted through storyblok

Nuxt/Vue Development 10

  • Usage of reusable components
  • Templates
    • Use of:
      • props
      • slots
      • looping
  • Script
    • script syntax uses one of the valid forms consistently
    • computed used when needed
    • logic kept in script tags
    • async functions used to pull data from CMS

Backend and Configuration 5

  • Configuration
    • Nuxt Configuration
    • Usage of modules to enhance Nuxt
  • Deployment
    • Site is deployed live
  • File naming conventions
  • CMS Integration
    • Project is connected to a Storyblok CMS

Site Content and Design 5

  • User Experience
    • Site navigation
    • Page layout and design
  • CSS
    • use of scoped css when appropriate
    • follows recommended practices of chosen css framework
  • Assets
    • Quality of assets
    • Image and other assets are properly saved in assets/ or static/ folders
    • Design assets are properly organized and implemented

Indiviual Grade 5

  • Based on git commits, team charter, and quality of work outlined in individual roles and responsibilities

Team Assessment 5

  • Determined at end by group assessment

README (required for individual grades)

  • Outline tech stack and nuxt module setup (brief)
  • Team Charter (team member's roles and responsibilites)

Submission

  • Only 1 project submission per team required
  • In text submission, specify team member's names
  • Link to Github repo
  • Link to deployed web page
  • Individually submit team member review
  • Zipped project folder