A lightweight web application for tracking and managing apartment rental prospects with local-first architecture and offline support
Visit Project DepaTrack is a lightweight web application designed to simplify the apartment hunting process, allowing users to register, track, and manage rental prospects efficiently. Its local-first architecture ensures that data is stored directly in the browser, providing a fast and private experience with full functionality without internet connection. Optionally, users can synchronize their data to the cloud by signing in, ensuring accessibility from any device.
Some of DepaTrack’s key features include:
- Complete property management: CRUD (Create, Read, Update, Delete) functionalities for detailed tracking.
- Advanced search and filtering: Tools to quickly find properties that meet specific criteria.
- Data import and export: Facilitates information migration to and from CSV format files.
- Responsive and customizable design: Mobile-first interface with light and dark themes that adapt to system preferences.
My Role in the Project
As the creator and lead developer of DepaTrack, I was responsible for all phases of the project, from conception to implementation and deployment of the application. My responsibilities included:
- Designing the complete application architecture, focused on the local-first philosophy to ensure a smooth and uninterrupted user experience.
- Developing both the frontend and backend of the application, using modern technologies like Vue.js, TypeScript, and Pinia for state management.
- Implementing data synchronization with Firebase, allowing users to securely save their information in the cloud.
- Ensuring code quality and project maintainability through modularization and adoption of development best practices.
Technical Details and Interesting Aspects
Frontend
Technologies:
- Vue.js (Composition API) and TypeScript: For modern, typed, and scalable development.
- Pinia: As state manager, enabling reactive and centralized data management.
- Tailwind CSS and shadcn-vue: For creating a clean, customizable, and fully responsive user interface.
- Vite: As build tool, ensuring a fast and efficient development environment.
Key Highlights:
- Offline functionality: The application continues to work without internet connection, storing data locally.
- Intuitive interface: A user-centered design that facilitates property registration and management.
- Reusable components: A modular codebase that promotes consistency and ease of maintenance.
Backend and Synchronization
Technologies:
- Firebase Authentication: For user management and secure authentication.
- Firestore: As cloud database for synchronizing registered users’ information.
Key Highlights:
- Real-time synchronization: Data updates automatically between devices when the user is online.
- Privacy and control: Users have the option to keep their data locally or synchronize it to the cloud.
Conclusion
DepaTrack is a practical and modern tool that solves a real need for those looking for a new home. The project not only demonstrates my ability to develop full-stack applications from scratch, but also my focus on creating user-centered solutions, with a strong emphasis on code quality, user experience, and scalable architecture. I’m proud to have created a tool that is not only functional, but also respects privacy and offers great flexibility to its users.