Main Features
✔ OAuth 2.0 Integration: Secure user authentication leveraging NextAuth.js with Google Provider integration.
✔ Dynamic Task Management: A centralized dashboard for CRUD operations, allowing users to manage personal workflows efficiently.
✔ Granular Privacy Controls: Implementation of public vs. private task visibility. Public tasks generate sharable permalinks to facilitate collaboration.
✔ Interactive Engagement: Real-time commenting system on public tasks with author-based deletion privileges (access control).
✔ High-Performance Landing Page: A data-driven homepage showcasing real-time platform statistics (total tasks/comments).
Technologies Used
✔ Framework: Next.js (Pages Router) utilizing hybrid rendering strategies.
✔ Language: TypeScript for robust type-safety and scalable code architecture.
✔ Database & Backend: Firebase Firestore for NoSQL document storage and real-time data streaming.
✔ Auth: NextAuth.js for secure session management and middleware-level protection.
✔ Styling: CSS Modules for scoped, maintainable, and collision-free styling.
✔ Real-time: Firebase SDK (onSnapshot) for live UI synchronization.
Architecture
Hybrid Rendering Strategy: The application leverages the full power of Next.js by choosing the right rendering method for each use case:
✔ SSG (Static Site Generation): The landing page utilizes getStaticProps to pre-render aggregate data (task/comment counts), ensuring O(1) loading times and optimal SEO.
✔ SSR (Server-Side Rendering): Sensitive routes like /dashboard and /task/[id] use getServerSideProps to handle server-side authentication checks. This prevents layout shifts and ensures that unauthorized users never reach the client-side code.
✔ Real-time Data Synchronization: Instead of traditional polling, I implemented a Reactive UI on the dashboard using Firebase’s onSnapshot. By integrating this listener within a useEffect hook, the application maintains a persistent connection to Firestore, providing sub-second UI updates whenever the database changes.