UI Mockup #1 for Questions Page

[swxstikk]

An initial rough sketch of what the questions page of the website may look like. Attached is the initial rough sketch. I have numbered the boxes so I can provide more clarity regarding the functionality of each box and their purpose of why I have them included.

1. This could be a drop-down box where the user can select the specific company they want to view questions for or it could have an option of 'All' for all the FAANG companies.
2. I have assumed that this website is not only for software engineering interview questions and hence I included this field. The name could be improved upon, but as of now, for the sake of simplicity, I have named it Area of knowledge so the user can select whether he/she wants to view questions from all or specific companies regarding software engineering, and system design, frontend, etc. I hope that gives some clarity.
3. This box will contain the actual question itself. The sizing can be dynamic depending on the question's length.
4. This box will show the author of the question. Can be an 'Anonymous user' if the user who submitted the question wishes to keep their identity private. (We could maybe implement the google docs feature of random names instead of a simple 'anonymous user' for all users who choose to stay private when uploading their questions. We could have animal names or something like that to make it a little bit more creative and fun. Alternatively, if the user chooses to disclose their identity, the identity details will be shown in that box.
5. This box will show the expected complexity of the solution you must come up with. I am a little unsure about this but from what I have observed so far, many interviews expect candidates to have decent knowledge regarding the efficiency of their solution and if the user has an idea regarding the complexity of the solution expected in regards to their question, that can be displayed in that box. This box is questionable and up for debate whether it should be included or not.
6. the user who uploads the question can also add some hints/helpful tips for the solution if they feel it may be necessary or have the knowledge to do so. This will then be reflected in this box when the user who is viewing the question selects this box.
7. This is pretty obvious but it is the solution box. The user can find the full working solution when he selects this box.
8. This is a big space for the user to try their code if they want to. However, this box gives me mixed feelings. Maybe, we don't necessarily need this but it could be something that can be incorporated in the future. UI Mockup #1.pdf

[ykdojo]

Thank you! It looks good. Great points.

I think it might be easier to see what it'll be like if you put it in something like Excalidraw, though?

[swxstikk]

Yupp. My next step is to get a visually appealing prototype of this UI for better clarity. I will post it here when I have finished working on it.

[yaa-chi]

Wooow, can't wait to see it @swxstikk 🔥