Presenting ProductBoard, our submission for the Auth0 Hackathon. This time, I worked with Masoom Kumar, learning new things as the project progressed. I took care of the backend, and together we built the frontend.
Problems
The problem of plenty. Most applications target big teams and end up offering too many features for simple tasks. So, for individuals, it's often tough to manage and maintain an effective workflow.
Solution: Product Board
The productivity app market is a big one, and we've struggled to keep up with so many applications. That's where ProductBoard comes in. We're here to help you manage your productivity hassle-free and cater to your needs, whether you're part of a small team or working alone. We've got you covered.
Features
- Live Markdown Editor
- CRUD Tasks and Projects
- Advanced Project History / Task History
- Kanban Boards
- Team Management (Add Member — only admin allowed)
- Real-time Notifications
- Role-Based Access
- Advanced Filters
Tech Stack
- Frontend: React
- Backend: Node
- Database: MongoDB
- Real-time Experience: Socket.IO
- Authorization and Authentication: Auth0
Frontend Libraries
- Material UI Components & Headless UI
- CSS Framework: Tailwind CSS
- Form Handling: Formik and Yup
- Auth0: Authorization and Authentication
- react-beautiful-dnd: Drag and Drop Support
- axios: API Requests
- rich-markdown-editor: Live Markdown Editor
Backend Libraries
- morgan: Development Logs
- express: Node.js Framework
- jwt-decode, jwks-rsa, express-jwt: Handling Auth0
- socket.io: Handle Real-time Connections
- mongoose: MongoDB ODM
Key Takeaways
- Started learning TypeScript.
- Implementing Socket.IO
- Deploying Node.js APIs on Heroku
- DB Modeling MongoDB
Problems Faced
Managing the DB model for history was not going to be easy. Keeping track of history required grouping multiple models together, and it took a while to arrive at a working solution.