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
- 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.
To get a local copy up and running follow these simple steps.
This is a list of things you need in order to use this application.
- Node.js
- Yarn
Via HTTPS:
git clone https://github.com/Marko19907/urban-infusion-website.git
Via SSH:
git clone [email protected]:Marko19907/urban-infusion-website.git
or download it directly as a zip from here.
- 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.
- Make sure you have installed Node.js and Yarn on the system.
- Download and the extract zip-file or clone project to the desired location as specified in the "Downloading the project" section.
- Run the command
yarn install
in the project root. - After all the dependencies of project of the project are installed, run the command
vite
in the project root. - The website should then be available at http://localhost:3000
The application has two main roles:
- Admin
- 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
- 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.
- 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.