fsheikh / sample_code

Some sample code snippets

1 stars 1 forks source link

Wireframes for Deurdu website #3

Open fsheikh opened 4 months ago

fsheikh commented 4 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 4 months ago

Basic Structure of how our website will look like

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

MuhammadTaha01 commented 4 months 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 3 months ago

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 commented 3 months 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 3 months 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 3 months 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 3 months 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 3 months 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 3 months 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 3 months 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 3 months 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 3 months ago

ss1

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

MuhammadTaha01 commented 3 months 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 3 months 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