SNF
Syeda Nida Fathima

App - Copy this React, Tailwind Component to your project

1.-Login/Sign-Up-Page-Login-Form:-Two-input-fields:-Username-and-Password.-A-Login-button-to-submit-the-credentials.-Sign-Up-Form:-Three-input-fields:-Username,-Password,-and-Profile-Picture-Upload.-A-Sign-Up-button-to-submit-the-details.-Redirection:-After-successful-login-or-sign-up,-redirect-users-to-a-tag-selection-page.-2.-Tag-Selection-Page-(Post-Sign-Up)-Display-a-list-of-pre-defined-tags-as-visually-appealing,-clickable-ovals-(e.g.,-#DSA,-#CN,-etc.).-Allow-users-to-select-multiple-tags-by-clicking-on-the-ovals.-Add-a-Complete-Setup-button-that-redirects-users-to-the-home-screen-after-tag-selection.-3.-Home-Screen-Layout-Left-Section-(Dashboard):-Display-user-stats,-including:-Total-questions-answered.-Total-questions-posted.-Total-upvotes-received.-Current-rank-(e.g.,-based-on-upvotes-or-activity).-Main-Section-(Feed):-Display-a-list-of-questions-filtered-by-the-tags-chosen-during-sign-up.-For-each-question:-Show-the-question-text.-Display-one-top-rated-answer-underneath-with-a-View-More-button-to-see-additional-answers.-Sort-the-feed:-Latest-asked-questions-appear-at-the-top.-Top-rated-questions-are-prioritized-within-the-feed.-4.-Question-&-Answer-Posting-Add-a-Floating-Button-or-a-prominent-"Post"-Button-on-the-home-screen.-When-Clicked:-Open-a-modal-dialog-box-with-the-following-fields:-Text-Field-1:-For-the-question.-Text-Field-2:-For-adding-tags-(e.g.,-#tag).-Image-Upload:-Optional-field-to-upload-an-image-with-the-question.-Post-Button:-To-submit-the-question-to-the-feed.-Add-an-option-below-each-question-to-answer-it.-Clicking-on-this-opens-another-dialog-box-with-a-text-field-to-write-an-answer-and-a-Post-Answer-button.-General-Design-Guidelines-Navigation:-Include-a-top-navigation-bar-with-the-following:-Home-button.-Profile-button.-Logout-button.-Style:-Use-a-clean,-modern-design-with-soft-colors-and-rounded-edges.-Tags-should-have-a-colorful-chip-like-design.-Modals/dialog-boxes-should-have-a-simple,-uncluttered-layout.-Responsiveness:-Ensure-the-design-is-mobile-friendly-and-scales-appropriately-across-screen-sizes.-User-Experience-(UX):-Keep-the-interface-intuitive-and-simple.-Provide-confirmation-dialogs-or-messages-(e.g.,-"Question-posted-successfully").-Add-hover-effects-for-buttons-and-clickable-elements-for-better-interactivity.

Prompt
Component Preview

About

App - A user-friendly interface with login/signup forms, tag selection, and a dynamic feed for questions and answers, built with reac. Copy component code!

Share

Last updated 1 month ago