search

fsheikh / sample_code

Some sample code snippets
1 stars 1 forks source link

Wireframes for Deurdu website #3

Open fsheikh opened 2 months ago

fsheikh commented 2 months ago

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 commented 1 month ago

Basic Structure of how our website will look like

f1 f2 f3 f4 f5

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

MuhammadTaha01 commented 1 month ago

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

fd1 fd2

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

fsheikh commented 1 month ago

Please see some comments:

MuhammadTaha01 commented 1 month ago

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;
MuhammadTaha01 commented 1 month ago

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;
MuhammadTaha01 commented 1 month ago

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;
MuhammadTaha01 commented 1 month ago

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;
MuhammadTaha01 commented 1 month ago

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;
MuhammadTaha01 commented 1 month ago

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;
MuhammadTaha01 commented 1 month ago

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;
fsheikh commented 1 month ago

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 commented 4 weeks ago

ss1

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

MuhammadTaha01 commented 4 weeks ago

ss2

-> 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 commented 4 weeks ago

ss3

I have replaed upload image with preview image

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