Wireframes for Deurdu website

[fsheikh]

Low-fidelity wireframes with suggestions for color scheme for deurdu blogging website should be shared under: https://github.com/fsheikh/sample_code/wiki/Deurdu:-A-multilingual-blogging-website

Candidate color-scheme: green color palette, see item number 7 on this page

[MuhammadTaha01]

Basic Structure of how our website will look like

To view it : https://www.figma.com/proto/ZWuGDjhn09nycDoutMr39w/DeUrdu?t=gPhNMdMNLNm0NeEN-1

[MuhammadTaha01]

Basic data-flow wireframes to make picture clear that how the data-flow will work

To view it : https://www.figma.com/proto/2bB1zcmjlUK7KVLJ9eGAGR/Dataflow-wireframes?t=F8KNmVdv2uTLxTYy-1

[fsheikh]

Please see some comments:

• "Home-page" is missing categories as defined in https://github.com/fsheikh/sample_code/wiki/Deurdu:-A-multilingual-blogging-website
• When user selects a category, a list of blogs with preview thumnails should be displayed
• User should be able to select all blogs by an author
• 'Data flow' is not very clear in figma may be better to use something like https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams.
• It is not clear exactly what information is being saved and retrieved from database. Do we keep file paths in database indexed by Rest API
• Possibly we need a separate task to design the REST API for the website, but I would suggest to complete the data flow involving Node JS and database first.
• Please see additional comments on https://www.figma.com/proto/2bB1zcmjlUK7KVLJ9eGAGR/Dataflow-wireframes?t=F8KNmVdv2uTLxTYy-1

[MuhammadTaha01]

FlowChart of posting a blog on website

This flowchart represents the process of a user posting a blog on the website, where the backend delivers it to the database for storage. It also includes the process of a user viewing blogs.

graph TD;
    User-->Posting_Blog_On_Website;
    Posting_Blog_On_Website-->API_Post;
    API_Post-->Database;
    Database-->|status: 200|API/Backend_Success;
    Database-->|status: 404|API/Backend_Fail;
    API/Backend_Success-->Response_Success;
    API/Backend_Fail-->Response_Fail;
    Response_Success-->Frontend/Website;
    Response_Fail-->Frontend/Website;

Loading

[MuhammadTaha01]

FlowChart of viewing a blog on website

This flowchart represents the process, what if user want to view a blog on the website, where the backend delivers it to the frontend for displaying.

graph TD;

    User-->Viewing_Blogs_On_Website;
    Viewing_Blogs_On_Website-->API_Get;
    API_Get-->Database_Get;
    Database_Get-->API/Backend_Response;
    API/Backend_Response-->Frontend/Website_Display;

Loading

[MuhammadTaha01]

1 - A flowchart covering aspect - what is user fails to login

graph TD;
    User-->|Login|Login_Page;
    Login_Page-->Authentication;
    Authentication-->|Auth Fail|Login_Fail_Response;
    Login_Fail_Response-->Login_Page;

Loading

[MuhammadTaha01]

2 - A flowchart covering aspect - what is user auth fails/success during blog posting

graph TD;
    User-->|Login|Login_Page;
    Login_Page-->Authentication;
    Authentication-->|Auth Success|Post_Blog_Page;
    Authentication-->|Auth Fail|Login_Fail_Response;
    Login_Fail_Response-->Login_Page;

    Post_Blog_Page-->|Post Blog|Posting_Blog_On_Website;
    Posting_Blog_On_Website-->API_Post;

    API_Post-->|Auth Check|Authentication;
    Authentication-->|Auth Fail|Auth_Fail_Response;
    Auth_Fail_Response-->Login_Page;

Loading

[MuhammadTaha01]

3 - A flowchart covering aspect - User successful blog posting

graph TD;
    User-->|Login|Login_Page;
    Login_Page-->Authentication;
    Authentication-->|Auth Success|Post_Blog_Page;

    Post_Blog_Page-->|Post Blog|Posting_Blog_On_Website;
    Posting_Blog_On_Website-->API_Post;

    API_Post-->|Auth Check|Authentication;
    Authentication-->|Auth Success|Database;

    Database-->|status: 200|API/Backend_Success;
    API/Backend_Success-->Response_Success;
    Response_Success-->Frontend/Website;

Loading

[MuhammadTaha01]

4 - A flowchart covering aspect - User failure blog posting

graph TD;
    User-->|Login|Login_Page;
    Login_Page-->Authentication;
    Authentication-->|Auth Success|Post_Blog_Page;

    Post_Blog_Page-->|Post Blog|Posting_Blog_On_Website;
    Posting_Blog_On_Website-->API_Post;

    API_Post-->|Auth Check|Authentication;
    Authentication-->|Auth Success|Database;

    Database-->|status: 404|API/Backend_Fail;
    API/Backend_Fail-->Response_Fail;
    Response_Fail-->Frontend/Website;

Loading

[MuhammadTaha01]

5 - A flowchart covering aspect - User viewing blogs

graph TD;
    User-->|View Blogs|View_Blogs_Page;
    View_Blogs_Page-->API_Get;
    API_Get-->Database;

    Database-->|status: 200|API/Backend_Success_Get;
    Database-->|status: 404|API/Backend_Fail_Get;

    API/Backend_Success_Get-->Response_Success_Get;
    Response_Success_Get-->Frontend/Website;

    API/Backend_Fail_Get-->Response_Fail_Get;
    Response_Fail_Get-->Frontend/Website;

Loading

[fsheikh]

Focus of this ticket is mainly UI (authentication use-case would be separately covered). UI review done under figma: https://www.figma.com/design/2bB1zcmjlUK7KVLJ9eGAGR/Dataflow-wireframes?node-id=27-11&t=jf4uVmnT2DD76PHp-0

[MuhammadTaha01]

https://www.figma.com/design/2bB1zcmjlUK7KVLJ9eGAGR/Dataflow-wireframes?node-id=0-1&t=cxnPnhXSMI5THrXO-0

[MuhammadTaha01]

-> Search filters have been romoved from here and i have made a new page there for 'Search Blog'

https://www.figma.com/design/2bB1zcmjlUK7KVLJ9eGAGR/Dataflow-wireframes?node-id=0-1&t=cxnPnhXSMI5THrXO-0

[MuhammadTaha01]

I have replaed upload image with preview image

https://www.figma.com/design/2bB1zcmjlUK7KVLJ9eGAGR/Dataflow-wireframes?node-id=0-1&t=cxnPnhXSMI5THrXO-0