Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marko19907/urban-infusion-website

Urban Infusion front-end, Web Technologies (IDATA2301), spring 2022.
https://github.com/marko19907/urban-infusion-website

frontend github-pages jwt material-ui netlify react react-query redux typescript vite yarn

Last synced: about 6 hours ago
JSON representation

Urban Infusion front-end, Web Technologies (IDATA2301), spring 2022.

Awesome Lists containing this project

README 

        
# 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](https://github.com/Marko19907/urban-infusion-server)



[![Yarn build](https://github.com/Marko19907/urban-infusion-website/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/Marko19907/urban-infusion-website/actions/workflows/main.yml)



### Built With

* [React](https://reactjs.org) - A JavaScript framework for building user interfaces.

* [TypeScript](https://www.typescriptlang.org) - A superset of JavaScript that adds static typing.

* [Yarn](https://github.com/yarnpkg/yarn) - Our package manager.

* [Vite](https://github.com/vitejs/vite) - A fast, next-gen frontend build tool.

* [Material UI](https://mui.com) - React component library.

* [JWT](https://github.com/jwtk/jjwt) - As the authentication mechanism.

* [Netlify](https://www.netlify.com) - 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:**

```sh

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

```

**Via SSH:**

```sh

git clone [email protected]:Marko19907/urban-infusion-website.git

```

or download it directly as a zip from [here](https://github.com/Marko19907/urban-infusion-website/archive/refs/heads/main.zip).



### Usage methods



#### Deployment [Recommended]



1. Head to [https://urbaninfusion.netlify.app](https://urbaninfusion.netlify.app) **or** [https://marko19907.github.io/urban-infusion-website/](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"](#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](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:



* [x] Signup and log in

* [x] View products

* [x] Send in an order

* [x] Write a comment for a product

* [x] Edit their own comment

* [x] See other user's comments



An admin can:



* [x] Add a new product

* [x] Update a product

* [x] Delete a product

* [x] See all user orders

* [x] Mark an order as processed

* [x] See all user comments for each product

* [x] 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](https://www.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](https://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.