Auction-House-SP2-CA

Noroff Course Assignment for Semester Project 2.

• Brief

• Criteria

• Design Prototype Desktop

• Design Prototype Mobile

• Style Guide

• Kanban Board

• Gantt Chart

• Repository

• Hosted Demo

NB. There is a slight difference between the prototype and the implemented website due to some improvements. Breakpoints start from the screen width 375px.

Live app

This project is deployed on Pages.

Description

The main purpose of this CA is to take the skills learned over the past three semesters and create an auction website.

• CSS framework Bootstrap, SASS,

• REST API advanced features like GET, POST, PUT, DELETE

• array functions: filter, map, forEach

• destructuring

• JWT token and API authorization concepts

• usage of local storage

• Vite bundler

• effective workflow via Eslint, Prettier, commit hooks (Husky)

• security concepts (Dompurify)

• .env file to manage secrets for local development

• documentation via JsDocs

• examine informal test set, formal testing strategies, and the use of tools to automate and improve the quality of testing process:

  • Manual testing using devTools as console statements, breakpoints, network tab, etc
  • Unit testing using Vitest
  • End-to-end testing (e2e testing) or Integration test using Cypress framework

• usage of Hotjar

• CI/CD pipeline within Github:

  • GitHub Actions
  • Environment Secrets

• responsive design (concepts, media queries, etc)

• semantic html 5

• DRY (sass variables, structured code, etc)

• accessibility concepts (WCAG)

• developer tools (VS Code, Prettier, DevTools, Github, Github Pages, Postman, etc)

• code validation tools

API

• The API used in this project can be found under Auction House Endpoints in the Noroff API documentation. v2.
• Auction House API routes require both a JWT token and an API Key.

Feature implemented

• unregistered user can view and search through Listings
• user can register (only @stud.noroff.no email can register a new profile)
• user can login and logout
• a logged-in user can:
  • update their avatar
  • see his stats (listings, bids, wings and total credits)
  • view the user content listing
  • filter the content listing
  • search the content listing
  • view Bids made on a Listing
  • create a new listing with a title, deadline date, media gallery and description

Local development

• fill .env following .env.example:

  • Specify VITE_APP_GITHUB_PAGES_REPO (for example Your-Github-Repo)
  • Specify VITE_API_KEY (the guid key you got from /auth/create-api-key)

npm install npm run dev

JSDOC

The code is documented using JsDocs. The documentation can be generated in /public/out/index using:

npm run docs

The documentation will be available in /Your-Github-Repo/out/index.html, for example https://fp22fd.github.io/Auction-House-SP2-CA/out/index.html.

Validation

The web application code has been validated using the following tools:

• check html validity: https://validator.w3.org/
• check css validity: https://jigsaw.w3.org/css-validator/
• check redirect links: https://validator.w3.org/checklink
• check accessibility: https://www.accessibilitychecker.org/

Dependencies

To develop the web application I have used Visual Studio Code with Prettier formatter extension.

npm install npm run dev

Workflow badges