Holidaze project 2023

A course assignment in JavaScript frameworks for 2.year students in
Front-End Development, at Noroff VOC Oslo, Norway
• Student: Linda Sandaker, aka frk.Sandkake

Project Details • Key Features • How To Use • Credits •

Project details:

Intro:

The aim of this course assignment was to build an e-commerce store using React framework, fetching the products from the API provided by Noroff, and hosting it with Netlify or similar.

The assignment required the creation of several pages, including a homepage, individual product page, cart page, checkout success page, and contact page.

There where no requirement to use TypeScript, CSS Framework, styled-components, or CSS Modules. See the other requirements listed under Key Features.

Technical Restrictions:

• JavaScript Framework: React (>16)
• CSS Framework: Bootstrap (>5) - Tailwind (>3) - MUI (>5) - Styled Components - CSS Modules
• Static Host: GitHub Pages or Netlify
• Design Application : Adobe XD, Figma or Sketch
• Planning Application : Trello or GitHub Projects

User Stories

All users can:

• view a list of Venues
• search for a specific Venue
• view a specific Venue (by id)
• view a calendar with available dates for a Venue
• register as customer or manger if they have a stud.noroff.no email, and; Login, update their avatar & logout

All customers can:

• book a Venue
• view their upcoming bookings

All managers can:

• create a Venue
• update a Venue they manage
• delete a Venue they manage
• view bookings for a Venue they manage
  

How To Use:

• Fork and/or Clone this repo

You'll need Git and Node.js (which comes with npm) installed on your computer.

Toggle for more instructions:

On GitHub:

• Fork this repo to get your own copy AND/OR
• Copy the code URL or SSH link that you find under <> Code button

Locally, on your PC:

• In Terminal
  • cd .\path\ to directory/folder for your local workspace
  • run:git clone <Github repo URL or SHH>
  • then cd .\path\ to new folder with repo name
• Then open your IDE/code editor - Open the directory (or folder) with your cloned repo

• Command lines to run in terminal:

Commands	Description
npm install	Installs all packages in Package.json in the node modules
npm run dev	To see the whole project in local host
npm run build	Builds the project into minified version (dist folder)
npm run preview	To preview the project in minified mode (from dist folder)

Good to know `npm` Command lines:

Commands	Description
npm init -y	Will initiate a new Node JS project Package.json
npm outdated	To see the outdated packages
npm update	Updates the project dependencies
npm update <packagename>	Updates a specific project dependency
npm uninstall <package_name>	Uninstalls a project dependency
npm update -g	Use -g flag for global dependencies
npm update -D or --save-dev	Use -d or --dev flag for devDependencies
npm uninstall -g <package_name>

Credits

• vite JS dev guide
• Noroff API
• React JS dev
• React Bootstrap UI
• Axios http for fetch API
• WebDevSimplified YouTube - React TypeScript Shopping cart
• WebDevSimplified Github Repo
• iconfinder cart svg
• GitHub Docs
• Shield Badges
• Learning React Router 6
• React Router
• MirageJS
• Netlify

( back to top )