Project Overview

Noor is an online platform for publishing Islamic content.

Technologies Used

ReactNext.jsTailwind CSSTypeScriptShadcn UIAl-Quran API

Key Features

  • Advanced Text Editor
  • Admin has almost control over the whole website.
  • Admin can page layout and design.
  • Admin can add, edit, delete Posts or Tags.
  • Posts are searchble and categorized by Tags.
  • Server side and Client side rendering
  • Responsive design for mobile and desktop
  • Authentication & Authorization

Additional Information

Noor is an online platform for publishing Islamic content. Where user can find Islamic articles, Quran, Hadith, Quranic Ayat, Tasbih, Dua and many more.

1

Main Page

Where user can see the latest posts, posts by tags, and posts by categories.

Step 0: Main Page
2

Post Page

User can see the post and its details, including the post description, date, share button, and related posts.

Step 1: Post Page
3

Post Share Dialog

User can copy or share the post to social media directly.

Step 2: Post Share Dialog
4

Search Dialog

User can search for a post by title or tags, and see the search results.

Step 3: Search Dialog
5

Admin Dashboard

Admin can see the usage of the databases, and see the used and remaining space.

Step 4: Admin Dashboard
6

Admin Posts Page

Admin can see the posts, and edit or delete them.

Step 5: Admin Posts Page
7

Add Post Page

Admin can add new posts, select image, tags and writing the post description by advanced text editor.

Step 6: Add Post Page
8

Admin Tags Page

Admin can add, edit or delete the tags.

Step 7: Admin Tags Page
9

Admin Images Page

Admin can see the uploaded images, and see or check if they are used in any post or not. And delete them if they want.

Step 8: Admin Images Page
10

Admin Layout Page

Admin can change the website layout and design, and select the posts for a specific section of the website.

Step 9: Admin Layout Page
11

Admin Social Links Page

Admin can edit or delete the social links.

Step 10: Admin Social Links Page
12

Add Social Link Page

Admin can add new social links and specify the icon and link.

Step 11: Add Social Link Page

Page Navigation

© HOSHANG E. HAMA | 2024