Full Stack Dev for superU Collaboration App
Budget: ₹600 – ₹1,500 INR
# superU full stack dev Task
### **App Flow and Requirements**
### **1. Authentication**
- Create a signup screen with simple email authentication using JWT for secure session management.
### **2. Team Collaboration**
- Implement an **Invite Team Member** mechanism.
- Allow invited team members to access and collaborate on content within the app.
### **3. Workspace Interface**
- Develop a `/workspace` route on the frontend:
- Provide an input box where users can enter a website link.
- Scrape the website for all its content and store it for further processing.
- sample website that you can scrape → https://docs.mixpanel.com/docs/what-is-mixpanel, or any other docs platform
### **4. Editor Setup**
- Install and integrate the [Tiptap](https://tiptap.dev/) editor using their starter kit.
- Utilize Tiptap to enable content editing and manage structured content.
### **5. File Tree Visualization**
- Once website scraping is complete:
- Render the content in a **recursive file tree** structure on the left-hand side.
- Display the corresponding file's content on the right, where users can:
- Edit the content.
- Add new content.
- Automatically save changes.
- Show an **auto-save indicator** during saving.
### **6. Team Collaboration on Content**
- Ensure that when a user accesses a URL such as:`domain/edit/<page-name>/uuid`
- Both the left-hand file tree and the right-hand editable content are displayed.
- Team members can view and edit the content simultaneously. use socket for real time **collaboration**
- **Hint:** Tiptap stores content as JSON. On every content change, emit and save the updated JSON to the backend.
### **7. Persistent Data Handling**
- Save all data to the backend.
- Ensure that saved data persists across page reloads.
---
### **Technical Stack**
### **Frontend**
- Use **Next.js (pages router)** version 14.1.0.
- Ensure the UI is clean and presentable.
- **Brownie Points:** Incorporate appropriate icons to enhance usability.
### **Backend**
- Build the backend using **Flask/fastapi/django**.
### **Additional Features**
- Use **Docker** for containerization and deployment.
- Leverage **Redis** for optimized caching and session management.
---
### **Extra Notes**
- The application must support seamless collaboration.
- Auto-save functionality is critical to ensure no user changes are lost.
- The UI should be user-friendly and functional, with a professional aesthetic.
### **App Flow and Requirements**
### **1. Authentication**
- Create a signup screen with simple email authentication using JWT for secure session management.
### **2. Team Collaboration**
- Implement an **Invite Team Member** mechanism.
- Allow invited team members to access and collaborate on content within the app.
### **3. Workspace Interface**
- Develop a `/workspace` route on the frontend:
- Provide an input box where users can enter a website link.
- Scrape the website for all its content and store it for further processing.
- sample website that you can scrape → https://docs.mixpanel.com/docs/what-is-mixpanel, or any other docs platform
### **4. Editor Setup**
- Install and integrate the [Tiptap](https://tiptap.dev/) editor using their starter kit.
- Utilize Tiptap to enable content editing and manage structured content.
### **5. File Tree Visualization**
- Once website scraping is complete:
- Render the content in a **recursive file tree** structure on the left-hand side.
- Display the corresponding file's content on the right, where users can:
- Edit the content.
- Add new content.
- Automatically save changes.
- Show an **auto-save indicator** during saving.
### **6. Team Collaboration on Content**
- Ensure that when a user accesses a URL such as:`domain/edit/<page-name>/uuid`
- Both the left-hand file tree and the right-hand editable content are displayed.
- Team members can view and edit the content simultaneously. use socket for real time **collaboration**
- **Hint:** Tiptap stores content as JSON. On every content change, emit and save the updated JSON to the backend.
### **7. Persistent Data Handling**
- Save all data to the backend.
- Ensure that saved data persists across page reloads.
---
### **Technical Stack**
### **Frontend**
- Use **Next.js (pages router)** version 14.1.0.
- Ensure the UI is clean and presentable.
- **Brownie Points:** Incorporate appropriate icons to enhance usability.
### **Backend**
- Build the backend using **Flask/fastapi/django**.
### **Additional Features**
- Use **Docker** for containerization and deployment.
- Leverage **Redis** for optimized caching and session management.
---
### **Extra Notes**
- The application must support seamless collaboration.
- Auto-save functionality is critical to ensure no user changes are lost.
- The UI should be user-friendly and functional, with a professional aesthetic.