Personal Project
Docuflow - Document Submission and Signing platform
ReactTypeScriptPythonFastAPISupabaseTailwind CSS
Overview
React TypeScript frontend with Python FastAPI backend. Integrated supabase for database and file storage
Key Features
- Role-Based Authentication (JWT-based for Staff & Users)
- Document Submission & Status Tracking
- Role-Specific Dashboards for users & staff
- Fast & Secure API built with FastAPI
- PostgreSQL Database (Supabase) Integration
- Custom Authentication (instead of Supabase Auth)
- Protected Routes in React with role-based access
Architecture & Decisions
- FastAPI for BackendChose FastAPI for its high performance and ease of use with Python, allowing for rapid development of RESTful APIs.
- Supabase for Database and StorageUsed Supabase for its PostgreSQL database and file storage capabilities, providing a scalable and secure solution for document management. and a centerlaized storage
Challenges & Solutions
Challenge / Problem
Cloudinary did not have support for PDF files
Solution / Implementation
Cloudinary stores PDF as generic files, affecting the user experience. Used Supabase for document storage instead, which supports PDF files natively.
Challenge / Problem
Role-Based Authentication
Solution / Implementation
Implemented JWT-based authentication with role management, allowing for secure access control to different features based on user roles (Staff & Users). Hide views in the frontend based on user roles.
Project Timeline
Day 1-3
Requirement Identification
Day 4-5
Planning
Day 6-7
Design & Prototyping
Week 2-3
Backend Development
Week 4
Frontend Development
Week 5
Testing & Deployment
Gallery
Homepage
Clean and responsive landing page with user-friendly navigation
Reference Resources
documentation
Supabase Storage
Using Supabase for file storage and management in web applications
tutorial
Building a CRUD API with FastAPI and Supabase: A Step-by-Step Guide
Comprehensive guide on building a CRUD API with FastAPI and Supabase