Skip to main content

Team Project - Multipage Website

Weight: 25%

Due:

Instructions

In teams of 2-3 you will make a multipage Nuxt 3 Website that pulls data from an api (your own strapi implementation from 200 or a public api).

This assignment is meant for you to put together the skills that you’ve learned throughout this course to create a modern website and hone your skills for your Course Final Project.

Specifications

  • 4 Pages
    • Home
    • About
    • Services/Products/Blog Collection Page
    • Service/Product/Post page (dynamic)
  • Components (minimum 8, grouped at developer descretion)
    • ui: nav bar, footer, sidebar…
    • layout: headers, sections, banners, cards…
    • utilities: buttons, display text, lists, links…
  • Data (choose 1)
    • Strapi API (from a 200 assignment)
    • Public API
    • Nuxt Content Module (local blog)
  • Design
    • Use vanilla CSS or TailwindCSS

Team Work

  • Divide the work to fit your strengths

  • Document your team member’s agreed upon responsibilities in the README (changes are fine but this needs to be documented early on)

  • Use of Pull Requests to track work and follow each others progress

  • Do code reviews when needed to improve your work

  • Communicate regularly

Rubric

Components 5

  • Properly defined props and slots
  • class bindings used in page header for greater distinction
  • v-bind and moustache syntax used correctly
  • Components imported and rendered correctly

Data Fetching and Modules 5

  • Data from api or nuxt content used
  • Nuxt Modules or other plugins used when needed (ie: google fonts, tailwind, strapi…)

Page Templating

  • Pages have minimal to no repeating code (use of components and v-for)
  • Content renders
  • Hierarchy of layout - page - component followed
  • Data passed with Props

Page Design 5

  • Consistent design scheme
  • Uses scoped css or tailwind
  • Responsive design

Project Organization 5

  • Site is Deployed to Netlify
  • Pull Requests used to merge from dev branch(es) to main
  • Clear commit messages
  • Attributions
  • README outlines team member responsibilities

Submission Instructions

  • One submission per group required
  • Submit github repo and link to deployed Netlify Site
  • No node_modules in remote repo or zip file