Django REST Framework // React // CapacitorJS // PostgreSQL // Firebase
01. Overview
This project is a comprehensive full-stack task management application with cross-platform mobile capabilities. It features a RESTful API built with Django, a responsive React frontend, and a mobile adaptation compiled for iOS using CapacitorJS. The system supports secure user authentication, role-based permissions, and robust state synchronization.
02. Backend & API Engineering
The backend architecture handles relational data models and secure user management.
- Framework & Database: Built with Django REST Framework and PostgreSQL to manage relational
TodoListandTodoItemmodels. - Authentication: Integrated Firebase for user authentication.
- Access Control: Implemented permission classes to restrict CRUD operations based on user ownership and administrator privileges.
- API Optimization: Utilized
drf-flex-fieldsto allow dynamic subset field retrieval, reducing payload sizes, and integrateddrf-spectacularfor automated OpenAPI schema generation.
03. Frontend & Integration
The web client prioritizes interface responsiveness and efficient state management.
- UI Framework: Developed the interface using React and Chakra UI, following design specifications established in Figma. Includes data visualization using
recharts.js. - State Management: Employed TanStack Query (React Query) alongside Axios for asynchronous data fetching and global state synchronization.
- UX Enhancements: Implemented optimistic updating, skeleton loading states, and infinite scrolling to minimize perceived network latency.
- Routing: Configured protected and public routes utilizing React Router Dom linked to the global Firebase authentication state.
04. Mobile Adaptation & Native Plugins
The web application is packaged as a native mobile application using web technologies.
- Framework Integration: Utilized CapacitorJS to deploy the React codebase to iOS and Android environments.
- Native Tooling: Integrated standard native modules including SafeArea, Haptics, and custom Splash Screens. Session handling was migrated to the Capacitor Firebase Authentication plugin for native storage persistence.
- Custom Swift Plugin: Engineered a custom Capacitor plugin to interface directly with device accelerometers. The plugin exposes an API to detect shake gestures, triggering device vibration and a logout prompt for authenticated users.