Hi,
Congratulations on reaching the Assignment round of this full-time position at BeyondChats!
Through this assignment round, we want to evaluate your mobile-responsive UI/UX skills. ALL THE BEST!
Assignment: BeyondChats is a chatbot company. Following is the step-by-step process for setting up a new chatbot for new businesses. You need to build the UI/UX to implement this workflow. User Registration: User enters name, email & password. User can also “continue with Google” User needs to submit email verification code to ensure genuine registrations. Next section: Setup Organisation User enters company name, company website URL, company description. (Bonus point if you can auto-fetch meta-description from website URL) Assume that a backend server exists that scrapes the client website in the background to auto-train the chatbot. You need to create a UI to show the user all webpages that have been detected, which have been scraped, which are still pending. Use dummy data for this. Along with this, user can click on any webpage to see all data chunks that have been scraped from that webpage. User can wait for the chatbot training to finish, or move to the next part of setup. Next section: Chatbot integration & testing Three buttons on this screen: “Test chatbot” button Open the client's website with a dummy chatbot integration on bottom right. Have a topbar “Chatbot not working as intended? Share feedback” “Integrate on your website” button. 2 options: Easy to follow instructions on how client can copy-paste a dummy code within <head> of their website to integrate the chatbot. Mail instructions to client’s developer Test integration button Opens a new screen Confetti UI or some other SUCCESS UI showcasing that integration has been successful. After that, show the following "Explore Admin Panel" button. "Start talking to your chatbot" button. Social media sharing buttons. Another UI in case integration cannot yet be detected.
i got this assignment so can you help me in this
How to do it
I'd be happy to help you with this assignment. Let's break down the project into manageable steps and create a mobile-responsive UI/UX for BeyondChats' chatbot setup process. We'll use React with Next.js and Tailwind CSS for styling, as these are modern and widely-used technologies for building responsive web applications.
Let's start by creating the main structure of the application:
This implementation covers all the requirements mentioned in the assignment:
User Registration:
Setup Organisation:
Chatbot Integration & Testing:
The UI is designed to be mobile-responsive using Tailwind CSS classes. The components use state management to handle user input and navigation between steps.
To further improve this implementation, you could:
Remember to test the application thoroughly on various devices and screen sizes to ensure it's fully responsive. Good luck with your assignment!
Can you enhance the design the UI of every page so that it looks amazing, also give some toast or console or alert when you do anything.
I'll enhance the UI design for each page and add toast notifications for user actions. We'll use the react-hot-toast library for notifications and improve the overall design with more Tailwind CSS classes and some custom components.
Let's update our project:
it is lookeing very whitish, and also change the progress bar at the top instead of something else and the Ui of the form also,
can you change the color theme, To the dark mode