Uncluttered
A progressive web application that helps users declutter their spaces by facilitating the rehoming of unwanted items. The platform connects people who want to get rid of items (sellers) with those who might find value in them (buyers), creating a sustainable community-based solution to reduce waste.
Technologies Used
Frontend
- Next.js
- React
- Tailwind CSS
- Progressive Web App (PWA)
- Server Actions
- Server Components
Backend
- Express.js
- Node.js
- MongoDB
- Mongoose
- RESTful API
Authentication
- JWT
- Google OAuth 2.0
- Passport.js
- HTTP Bearer Strategy
Storage
- Google Cloud Storage
- Multer
Security
- Helmet
- XSS Protection
- MongoDB Sanitize
- Request Body Sanitization
- CORS
Development
- JavaScript
- Nodemon
- Debug
- Winston
Challenges & Solutions
Challenge 1: Mobile-First Responsive Design
Creating an intuitive interface that works seamlessly across both desktop and mobile devices, with special attention to the mobile experience where most users would interact with the app.
Solution Approach
Designed a modular full-stack application with a clear separation between frontend and backend. Used Next.js App Router for the frontend with server components and actions, while implementing a RESTful API in Express.js for the backend with proper separation of concerns.
Challenge 2: State Management Between Buyer and Seller
Implementing a complex item lifecycle with multiple states (Available, Interested, Scheduled, Agreed, Flushed) that required different UI components and actions depending on whether the user was a buyer or seller.
Solution Approach
Implemented a secure proxy pattern using Next.js API routes to bridge the frontend and backend, protecting sensitive credentials while enabling seamless communication between layers.
Challenge 3: PWA Implementation
Setting up the application as a Progressive Web App to ensure it works offline and provides a native-like experience on mobile devices, including service worker registration and proper manifest configuration.
Solution Approach
Leveraged Next.js Server Actions for secure form processing, allowing for server-side validation and security measures while maintaining a seamless user experience.
Challenge 4: Authentication Flow
Creating a seamless authentication experience with Google OAuth while maintaining secure token management throughout the application using cookies and middleware for secure token handling.
Solution Approach
Implemented a sophisticated state machine to manage the lifecycle of items from creation to transfer, with different states triggering different UI components and actions for buyers and sellers.
Challenge 5: Secure File Storage and Management
Implementing secure image upload, storage, and retrieval using Google Cloud Storage with proper validation and sanitization of user-uploaded content.
Solution Approach
Built a dynamic UI that adapts based on item status and user role, providing appropriate actions and information for each step of the item's lifecycle.
Challenge 6: Full-Stack Integration
Bridging the frontend and backend seamlessly through Next.js API routes as a proxy layer, ensuring secure data flow and consistent error handling across the stack.
Solution Approach
Created a secure authentication flow using Google OAuth, JWT tokens, and HTTP-only cookies with middleware for interception and proper token management.
Outcomes & Results
Successfully delivered a full-stack progressive web application that helps users declutter their living spaces by connecting them with others who might want their unwanted items. The application features a complete item lifecycle management system from listing to pickup, robust authentication, secure file uploads, and a responsive design that works across all devices with an offline-capable PWA experience.
Key Metrics
- Built a responsive PWA with Next.js App Router and server components
- Implemented OAuth 2.0 authentication with JWT for secure user sessions
- Developed a complete item lifecycle state machine with role-specific interfaces
- Created a secure REST API with Express.js and MongoDB
- Integrated Google Cloud Storage for user-uploaded images
- Implemented comprehensive security measures including input validation and sanitization
Key Learnings
- Gained experience with Next.js App Router, server components, and server actions
- Developed skills in creating responsive, mobile-first user interfaces with Tailwind CSS
- Deepened understanding of OAuth flows, JWT authentication, and secure cookie management
- Learned effective state management techniques for complex multi-state workflows
- Enhanced understanding of middleware implementation for authentication and security
- Improved skills in secure file upload and cloud storage integration
- Gained experience with RESTful API design and implementation with Express.js
- Developed expertise in MongoDB schema design and Mongoose for data modeling
Project Gallery
Demo showing the google auth
Demo showing creating a new item
Demo showing flow from Available > Interested > Scheduled > Agreed > Flushed
Project Duration
March 2024 - April 2024
Role
Full-Stack Developer
What's Next?
Future enhancements include implementing geolocation-based item discovery with MongoDB geospatial queries, real-time updates with WebSockets, enhanced image handling with client-side previews and cropping, advanced search functionality, in-app notifications, and additional authentication methods.