Urban Infusion website, group 7

This repository contains the frontend made for the Urban Infusion project from NTNU's Web Technologies (IDATA2301) subject. The project counts towards 60% of the final grade in the subject.

The back-end part can be found here: https://github.com/Marko19907/urban-infusion-server

Built With

• React - A JavaScript framework for building user interfaces.
• TypeScript - A superset of JavaScript that adds static typing.
• Yarn - Our package manager.
• Vite - A fast, next-gen frontend build tool.
• Material UI - React component library.
• JWT - As the authentication mechanism.
• Netlify - Used to deploy the website.

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

This is a list of things you need in order to use this application.

• Node.js
• Yarn

Downloading the project

Via HTTPS:

git clone https://github.com/Marko19907/urban-infusion-website.git

Via SSH:

git clone git@github.com:Marko19907/urban-infusion-website.git

or download it directly as a zip from here.

Usage methods

Deployment [Recommended]

1. Head to https://urbaninfusion.netlify.app or https://marko19907.github.io/urban-infusion-website/ to see the website in operation.
   This is the preferred method.

Other usage methods

Via Vite

1. Make sure you have installed Node.js and Yarn on the system.
2. Download and the extract zip-file or clone project to the desired location as specified in the "Downloading the project" section.
3. Run the command yarn install in the project root.
4. After all the dependencies of project of the project are installed, run the command vite in the project root.
5. The website should then be available at http://localhost:3000

Project requirements

The application has two main roles:

1. Admin
2. User

An admin can do everything that a user can but admins can access extra functionality that is not available to users.

A user can:

• Signup and log in
• View products
• Send in an order
• Write a comment for a product
• Edit their own comment
• See other user's comments

An admin can:

• Add a new product
• Update a product
• Delete a product
• See all user orders
• Mark an order as processed
• See all user comments for each product
• Delete any user comment

Non-functional requirements for the project

• Responsive design.
• Load data from the backend.
• Follow universal design (accessibility) principles.
• Look aesthetically pleasing, according to current “website trends”.
• Topic is provided by the professor.

Our app currently has a predefined admin user and a regular user used under testing:

Admin:

• username: admin
• password: admin

User:

• username: user
• password: user

Note: These predefined users are only meant to be used for demo and development purposes, they should not be included in a real scenario.

Disclaimers

• All product images used were fetched from pngegg.com and are covered by their non-commercial use only license.
• Icons used were either provided by the Material UI component library, provided by the companies themselves, or fetched from fontawesome.com
• The user images used in this project have been generated by an AI and do not depict any person currently alive or dead.