misghna / holy-ui Goto Github PK

HTML 0.22% JavaScript 99.78%

holy-ui's Introduction

Holy: Web UI

Introduction

Holy is an open-source web application, crafted by a team of volunteer engineers. While it's versatile enough to be used for any blog site, its primary design is aimed at serving Churches and Temples. While the website will be fully functional on desktop, its design and user experience are primarily optimized for mobile users, reflecting the prevailing trend of mobile dominance in internet usage today.

Holy UI is a React app built using (Vite)[https://vitejs.dev/] and (Material-UI)[https://mui.com/material-ui/getting-started/] for fast development. It uses Bun, an alternative to Node.js, to run your app. Here you'll find all the necessary files and instructions to get up and running with this project.

Note: This version of Holy UI utilizes (Material-UI)[https://mui.com/material-ui/getting-started/], a popular React UI library for building fast, scalable, and accessible applications.

Demo Site

(Demo)[https://holydemo.com/]

Prerequisites

Install Bun on your machine. (Node is also fine)
Basic understanding of React, Vite, and Material-UI.

Note : If using npm use --legacy-peer-deps flag.

Getting Started

Clone or download this repository to your local machine.
Navigate to the project directory in your terminal.
Install the dependencies

bun install. (Node : npm install & then npm i @mui/styles --force)
Run the app

bun dev. (Node : npm run dev) Your app should now be running at http://localhost:3000

Kanban board : clickup

signup for for fee and request admin for invite
https://app.clickup.com/9014227579/v/b/li/901402296735

API Testing platform : insomnia

signup for for fee and request admin for invite
https://insomnia.rest/

Code Structure

main.jsx: The entry point of the application. It renders the root component of your app, which is .
index.html: The HTML file that contains the root element where your app will be mounted.
src/App.css: Contains CSS styles for the App component.
src/App.jsx: The main component of your application. It imports and uses the necessary libraries and utilities from Vite, Material-UI, and React.
package.json: Contains metadata about your project, including its name, version, dependencies, and scripts.'

Scope : Release 1 (Core Functionality)

Admin - The ability to create/edit pages,add content and upload media dynamically
Public - view, navigate and filter (date & global search)
Supported contents - Text,Pdf, Image, Audio, Video
Language - multi language support including autotranslate
Theme - light/Dark mode and Stye colors selectors

Scope : Release 2

Donation manager - (with monthly subscription Feature)
Notification Manager (SMS)
User profile manager
My donations and Org statements viewer
Sentiment and Comment Integration

Scope : Release 3

Chat engine
Pastoral care and Members manager

License

MIT

Free Software, Yeah always free !

holy-ui's People

Contributors

Stargazers

Watchers

Forkers

davewish emitoaig nahitu hermyh21 siru-kid maki44 kuldep7 aateddy aigemito

holy-ui's Issues

Content Manager

GET : http://localhost:8000/api/contents?content_category=home&lang=english&start=0&limit=9

[ {
"id": 1,
"lang": "english",
"type": "image",
"title": "Pics Test",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"content_text": "test",
"background_image": "http://localhost:8000/storage/uploaded/6ca5790f-571f-4b90-b15a-f409f1332ab1_1.jpg",
"content_category": "Home",
"release_date_time": 1713252420000,
"m_link": "6ca5790f-571f-4b90-b15a-f409f1332ab1_3.jpg",
"file_type": "image",
"media_link": [
"http://localhost:8000/storage/uploaded/6ca5790f-571f-4b90-b15a-f409f1332ab1_2.jpg",
"http://localhost:8000/storage/uploaded/6ca5790f-571f-4b90-b15a-f409f1332ab1_3.jpg"
]
}
]

POST : http://localhost:8000/api/secured/contents

{
	"id": 1,
	"lang": "english",
	"type": "image",
	"title": "Pics Test",
	"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
	"content_text": "test",
	"background_image": 7
	"content_category": "Home",
	"file_type": "image",
	"media_link": [
		6,8
	]
}

Adding a file mapper

** Create a file_mapper table with the following columns:

id
ref_id (No Foreign Key)
file_id (Foreign Key to files table ‘id’)
* ref_type (to distinguish between ref type)
* updated_at
- updated_by (Foreign Key to users table)

** Remove image_link and header_img columns from the page_config table.

** Update the PageConfig and FileMapper models to reflect these changes.

** Modify the PageConfigController to handle the new structure and return the appropriate JSON response.

sample json POST would then be
{
"page_type": "public",
"name": "Home2",
"description": "test3",
"parent": 0,
"header_img": [23,94],
"language": "english",
"header_text": "test3",
"page_url": "/home",
"seq_no":0
}

so you push to file mapper db as

you need to loop and push for each id in the array

id = gen id <22323>
ref_id =
ref_type=“page_config”
file_id = id from the array

Dictionary

dictionary List
GET : /api/protected/dictionaries
[
{
"id": 1,
"Key": "test",
"English": "Test",
"ትግርኛ": "Not Set",
"Spanila": "Not Set"
}
]

GET (for edit) : /api/protected/dictionary?key=test
{
"Key": "test",
"English": "Test",
"ትግርኛ": "Not Set",
"Spanila": "Not Set"
}

POST : /api/protected/dictionary

Req-Body : {
"Key": "sugar",
"English": "Sugar",
"ትግርኛ": "ሽኮ"
}

PUT : /api/protected/dictionary
Req-Body : {
"id": 1,
"Key": "test",
"English": "Test",
"ትግርኛ": "Not Set"
}

Tenants

GET : /api/protected/tenants

[
{
"id": 1,
"tenant_id": 0,
"tenant_name": "Test",
"updated_at": "2024-05-14T20:19:03.000000Z",
"updated_by": "Tesfu"
},
{
"id": 2,
"tenant_id": 0,
"tenant_name": "Test2",
"updated_at": "2024-05-14T20:19:03.000000Z",
"updated_by": "Belay"
}
]

POST : /api/protected/tenants

{
"tenant_name": "Test2"
}

PUT : /api/protected/tenants
{
"tenant_name": "Fetene",
"id":4
}

Adding Login button in main drawer

add login button on the public “non admin” layout at the bottom of the drawer

User Profile

add a new page under /secure/user_profile
use the same template structure as /secure/content_manager
have only two tabs - Access Config & Access Report
this user story is focused on Access Config
inside the Access Config tab, add one table and "add/edit" form
plz use similar pattern of table and form like PR "page config table" for consistency
see attached for layout and api details

user_profile_api.txt

Document Manager

GET : http://localhost:8000/api/protected/file_list?type=image&limit=100&start=0

[{
	"id": 16,
	"group_id": "fcd0bf12-abb2-4d01-b295-215e84c56478",
	"file_id": "fcd0bf12-abb2-4d01-b295-215e84c56478_1.png",
	"file_name": "Screenshot 2024-05-02 at 6.56.51 PM.png",
	"file_type": "image",
	"tenant_id": 1801,
	"description" :"this and that"
	"created_at": "2024-05-04 01:24:45",
	"created_by": 1
}]

POST : http://localhost:8000/api/protected/file

Languages UI

Add content viewer/Editor for Tenants page
here is a test API
GET : /api/protected/languages
[
{
"id": 1,
"lang_id": "english",
"lang_name": "English",
"tenant_id": 0,
"updated_at": null
},
{
"id": 2,
"lang_id": "tigrigna",
"lang_name": "ትግርኛ",
"tenant_id": 0,
"updated_at": null
},
{
"id": 3,
"lang_id": "spanish",
"lang_name": "Spanila",
"tenant_id": 0,
"updated_at": "2024-05-11T17:13:33.000000Z"
}
]

POST : http://localhost:8000/api/protected/languages
{
"lang_id": "spanish",
"lang_name": "Spanola"
}

PUT : /api/protected/languages
{
"id": 3,
"lang_id": "spanish",
"lang_name": "Spanila"
}

NO delete