tidal-authentication

bySri Sivasakthi transport

I want you to design and generate a complete full-stack web application for a Document Reminder System with secure user authentication and mobile-friendly features. Core Features: 1. User Authentication Users can sign up and log in using email and password Authentication must be secure (hash passwords, no plain text storage) Users should be able to log in from any device Session persistence (stay logged in) Option for logout 2. User Data & Profiles Store user data in a database Each user has a profile where they can: View their details (email, name, etc.) Edit and update their information All user data should sync across devices in real time or near real time 3. Document Management Users can add multiple document types such as: FC (Fitness Certificate) Insurance Driving License RC (Registration Certificate) Pollution Certificate, etc. Each document should include: Document name/type Expiry date Notes (optional) 4. Separate Reminder System (Important) Each document must have its own independent reminder settings Users can: Set multiple reminders per document (e.g., 30 days before, 7 days before, 1 day before) Edit or delete reminders individually Reminders must not be shared globally—each document is handled separately 5. Notifications (Critical) The app must send notifications to the user’s phone even when: The web app is closed The browser is not active Use: Push Notifications Service Workers PWA (Progressive Web App) approach 6. Mobile & PWA Support The web app should be installable on mobile (especially iPhone) When added to the home screen: It should display a proper app icon (logo) It should behave like a native app (fullscreen, smooth UX) 7. UI/UX Clean, modern, responsive design Dashboard showing: All documents Upcoming expiries Active reminders Technical Requirements: Recommend and use a modern tech stack (e.g., React, Node.js, Firebase, or similar) Include: Frontend structure Backend API Database schema Implement: Authentication system CRUD operations for documents and reminders Push notification system Deliverables: Architecture overview Tech stack explanation Database design Step-by-step implementation Full or partial working code (frontend + backend) Instructions to run the project locally Deployment guidance Additional Notes: Focus on security best practices Ensure scalability Keep the code modular and clean Explain important parts clearly

LandingSignupLogin
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

Tidal-Authentication System Requirements Document

Introduction

The Tidal-Authentication project is designed to provide a comprehensive solution for fleet owners, transport companies, and logistics businesses to manage multiple vehicles and their associated documents. The system focuses on secure user authentication, cross-device access, and a robust reminder system to ensure compliance and operational efficiency.

System Overview

The Tidal-Authentication system aims to streamline the management of vehicle-related documents by offering a secure, scalable, and user-friendly platform. It supports multi-vehicle management, document tracking per vehicle, and independent reminder settings for each document. The system is designed to be accessible from any device, ensuring that users can manage their fleets efficiently and effectively.

Functional Requirements

  • As a User, I should be able to securely sign up and log in using email and password.
  • As a User, I should be able to log in from any device (mobile, tablet, desktop) using the correct email and password.
  • As a User, I should be able to manage multiple vehicles under one account, including adding, editing, and deleting vehicles.
  • As a User, I should be able to manage documents for each vehicle, including adding, editing, and deleting documents.
  • As a User, I should be able to set independent reminder settings for each document.
  • As a User, I should receive push notifications for document reminders even when the app is closed.
  • As a User, I should experience a clean and simple UI/UX with a dashboard showing vehicles and upcoming expiries.
Page 2 of 4

User Personas

  • Admin: Manages the overall system, including user accounts and settings.
  • Fleet Manager: Manages multiple vehicles and their associated documents.
  • Staff: Assists in managing vehicles and documents, with limited access.

Visuals Colors and Theme

  • primary: #1A73E8 (a deep blue for brand identity)
  • primary_light: #E8F0FE (a light blue for hover states and secondary UI)
  • secondary: #FF6F61 (a coral hue for headlines and emphasis)
  • accent: #FFD700 (a vibrant gold for CTAs and active states)
  • highlight: #FFA500 (a warm orange for hover states and notifications)
  • bg: #F5F5F5 (a light grey for the page background)
  • surface: rgba(255, 255, 255, 0.9) (a white card/panel background)
  • text: #333333 (a dark grey for primary text and headings)
  • text_muted: #757575 (a muted grey for secondary text and labels)
  • border: rgba(200, 200, 200, 0.5) (a subtle grey for borders)

Signature Design Concept

The homepage of the Tidal-Authentication system will feature an interactive "Fleet Map" concept. Users will see a dynamic map interface where each vehicle is represented as a pin. Clicking on a pin will open a detailed card with vehicle information and document status. The map will be interactive, allowing users to drag and zoom to view different fleet locations. This concept will be implemented using @react-three/fiber for 3D map rendering and framer-motion for smooth animations and transitions. The map will provide a visually engaging and intuitive way for users to manage their fleet.

Page 3 of 4

Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements like vehicle icons and document badges will move at different speeds, adding a dynamic feel to the page. Real content will scroll naturally, ensuring a seamless user experience. Internal pages will adopt a "static" model for clarity and ease of use, focusing on data-heavy tasks like vehicle and document management.

Non-Functional Requirements

  • The system must ensure high availability and reliability.
  • It should support scalability to accommodate large-scale fleet operations.
  • Security best practices must be followed to protect user data.
  • The system should provide a responsive design for mobile and desktop devices.

Tech Stack

  • Frontend: React for Web
  • Backend: Python, FastAPI
  • Database: MySQL or MariaDB, using Alembic for migrations
  • Notifications: Service Workers, PWA approach
  • Containerization: Docker, docker-compose
  • Orchestration: Kubernetes
Page 4 of 4

Assumptions and Constraints

  • The system assumes users have internet access for real-time data syncing.
  • It is constrained by the need for secure data storage and transmission.
  • The system must comply with local regulations for data protection and privacy.

Glossary

  • PWA: Progressive Web App, a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript.
  • FC: Fitness Certificate, a document certifying that a vehicle is fit for use.
  • RC: Registration Certificate, a document certifying the registration of a vehicle.
  • CRUD: Create, Read, Update, Delete, the four basic functions of persistent storage.
Landing design preview
Landing: View Info
Login: Sign In
Landing: Register
Signup: Create Account
Dashboard: View Overview
Dashboard: Manage Users
Users: Edit User
Users: Delete User
Settings: Configure System
Settings: Manage Roles
Notifications: View Alerts
Notifications: Configure Push