Giter Club home page Giter Club logo

docs.ai's Introduction

docs_ai

A simple and collaborative editor that uses AI to enhance and make your research or writing process faster.

Features

  • A user can login and register with email/username/password or with his google account
  • A user can create a new document
  • A user can fill a created document with a title and content
  • A user can save a content of a document
  • A user can summarize a long text using AI and add the result inside the document
  • A user can modify the style of the text document using a simple editor
  • A user can generate an image using a AI and add the image to the document
  • A user can choose a subscription and the fee by stripe (There is two subscription basic and pro)
  • A user can upload a profile picture

Technologies

  • Flutter
  • Nodejs
  • Mongodb
  • How to install locally

    1. Install Flutter:
      • For Windows:
        • Download the Flutter SDK from the official Flutter website.
        • Extract the downloaded file to a desired location.
        • Add the Flutter SDK's bin directory to your system's PATH environment variable.
      • For macOS:
        • Download the Flutter SDK from the official Flutter website.
        • Extract the downloaded file to a desired location.
        • Add the Flutter SDK's bin directory to your system's PATH environment variable.
      • For Linux:
        • Download the Flutter SDK from the official Flutter website.
        • Extract the downloaded file to a desired location.
        • Add the Flutter SDK's bin directory to your system's PATH environment variable.
    2. Clone the GitHub repository and run the project:
      • Open a terminal or command prompt.
      • Navigate to the directory where you want to clone the repository.
      • Run the following command:
        git clone https://github.com/imdadAdelabou/docs.ai
        
      • And then cd docs.ai flutter run
      • And select your device

    Packages

    • cached_network_image
      A flutter library to show images from the internet and keep them in the cache directory.
      
    • dio
      A powerful HTTP networking package for Dart/Flutter, supports Global configuration, Interceptors, FormData, Request cancellation, File uploading/downloading, Timeout, Custom adapters, Transformers, etc.
      
    • file_picker
      A package that allows you to use the native file explorer to pick single or multiple files, with extensions filtering support.
      
    • firebase_core
      A Flutter plugin to use the Firebase Core API, which enables connecting to multiple Firebase apps.
      
    • firebase_crashlytics
      Flutter plugin for Firebase Crashlytics. It reports uncaught errors to the Firebase console.
      
    • firebase_storage
      A Flutter package to interact with the cloud firebase storage service.
      
    • flutter_quill
      A Flutter package used to have a google docs like editor view.
      
    • flutter_quill_extensions
      An extensions for flutter_quill to support embedding widgets like images, formulas, videos, and more.
      
    • flutter_riverpod
      A reactive caching and data-binding framework. https://riverpod.dev
      Riverpod makes working with asynchronous code a breeze by:
      
      handling errors/loading states by default. No need to manually catch errors
      natively supporting advanced scenarios, such as pull-to-refresh
      separating the logic from your UI
      ensuring your code is testable, scalable and reusable.
      
    • flutter_stripe
      The Stripe Flutter SDK allows you to build delightful payment experiences in your native Android and iOS apps using Flutter. We provide powerful and customizable UI screens and elements that can be used out-of-the-box to collect your users' payment details.
      
    • flutter_stripe_web
      An additional package to use with flutter_stripe to integrate the stripe widget on the web.
      
    • form_field_validator
      A straightforward flutter form field validator that provides common validation options.
      
    • gap
      A Flutter widgets for easily adding gaps inside Flex widgets such as Columns and Rows or scrolling views.
      
    • google_fonts
      A Flutter package to use fonts from fonts.google.com.
      
    • google_sign_in
      A Flutter package to handle google authentification.
      
    • image_picker
      A Flutter plugin for iOS and Android for picking images from the image library, and taking new pictures with the camera.
      
    • intl
      Provides internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.
      
    • json_annotation
      Defines the annotations used by json_serializable to create code for JSON serialization and deserialization.
      
    • riverpod_annotation
      This is a side package for riverpod_generator, exposing annotations.
      
    • routemaster
      An easy to use router for Flutter. Simple declarative mapping from URLs to pages
      Easy-to-use API: just Routemaster.of(context).push('/page')
      Really easy nested navigation support for tabs
      Multiple route maps: for example one for a logged in user, another for logged out
      Observers to easily listen to route changes
      Covered by over 250 unit, widget and integration tests
      
    • screenshot
      A simple package to capture widgets as Images. Now you can also capture the widgets that are not rendered on the screen.
      
    • shared_preferences
      A simple package used to interact with the localstorage of the current platform.
      
    • socket_io_client
      A simple package used to communicate with a server using websocket.
      
    • blackfoot_flutter_lint
      This package contains a recommended set of lints for Blackfoot's Flutter apps to encourage good coding practices.
      
    • build_runner
      The build_runner package provides a concrete way of generating files using Dart code. Files are always generated directly on disk, and rebuilds are incremental - inspired by tools such as Bazel.
      
    • flutter_lints
      This package contains a recommended set of lints for Flutter apps, packages, and plugins to encourage good coding practices.
      
    • json_serializable
      Provides Dart Build System builders for handling JSON.
      
    • patrol
      Patrol package builds on top of flutter_test and integration_test to make it easy to control the native UI from Dart test code
      
    • test
      Test provides a standard way of writing and running tests in Dart.
      

    Architectures

    First, we use Riverpod for the state management. Riverpod provides a better way to register providers into the widget tree and access them easily. It also provides an optimizable way to change a view state according to the result of an asynchronous API request.

    Our project files are separated into different directories. Each directory has a specific purpose. The models directory contains our data model. The repository directory contains a set of functions to interact with our backend server and other external services. Each repository is registered inside the provider to easily access it globally. The screens directory contains all the UI. The widgets directory contains all the shared components. The utils directory contains some reusable functions and constants. The viewModels directory is like a controller, it connects the UI interface to the repository. Basically, each feature has a UI screen, a serviceModel, and a repository associated with it. All connected using the power of provider.

    Management

    We use github project to manage the project and here I will explain the meaning of S, XS, L and XL. It represent the complexity of a task and how many days it will take to accomplish this task.

    • XS -> the task will take 01 day to finish
    • S -> the task will take 02 days to finish
    • L -> the task will take 03 days to finish
    • XL -> the task will take more than 03 days to finish

    Authors

    docs.ai's People

    Contributors

    imdadadelabou avatar hamid-yg avatar

    Watchers

     avatar  avatar

    docs.ai's Issues

    Improve login screen on desktop and mobile

    Add a onboarding view on the left side of the login screen to showcase the different features of the app when the user is on a web device.

    Adapt this screen for mobile view.

    Requirements:

    • 03 onboarding items
    • Each item need to have a title, a illustration and a description
    • A skip button to skip the onBoarding part on mobile device
    • A next button to redirect to the login view on mobile device

    Implement websocket client and server

    Implement websocket on client and server side to allow some features like

    • auto-saving
    • collaborative editing

    The use of socket.io will allow to have a feature of realtime between the client and the server.

    Implement stripe on dev mode

    Stripe will be used as a payment method to allow a user to pay for a subscription.
    Update the subscription status for a user on backend after a change on a subscription.

    Create a custom splashing screen

    Create a splashscreen with the logo of the app on middle of the screen. The page will display when some ressources is loading.

    Implement a setting screen to show user detail information

    Now, the user information is displayed on the home screen (where all the documents created by a user are created). Move the user information display on a new setting screen.

    • Display the image on a CircleAvatar
    • Display each information( email, name) with their labels and values.

    Implement the view to allow a user to upload a profile picture on web

    The goal of this task is to allow a user to upload his profile picture on a WEB device.

    • A user can pick a profile picture by clicking on a "add" icon
    • And upload the picture by clicking on a "upload" button
    • The file will be stored on a Firebase Cloud Storage service

    The file_picker package will be used.

    Testing

    Write unit test on frontend and backend

    • Widget test on frontend
    • Integration on frontend.

    This is progressive task

    Write the README

    Write the README of the project to describe it .
    The README need to show :

    • What the project is about
    • How to install it
    • The packages used and why
    • The architecture and why
      etc..

    Implement an generative AI image on backend for premium user

    Implement the api route on backend to generate an image using an AI and a prompt enter by a user.
    This feature is available only for premium user.

    • [POST] http request
    • A "prompt" key to pass via the request body
    • Call this path only for authorized and preemium user

    Implement the view to allow a user to upload a profile picture on ios

    The goal of this task is to allow a user to upload his profile picture on a IOS device.

    • A user can pick a profile picture by clicking on a "add" icon
    • And upload the icon by clicking on a "upload" button
    • The picture will be stored an Firebase Cloud Storage service

    The image_picker package will be used.

    Implement the view to allow a user to upload a profile picture on android

    The goal of this task is to allow a user to upload his profile picture on a ANDROID device.

    • A user can pick a profile picture by clicking on a "add" icon
    • And upload the icon by clicking on a "upload" button
    • The picture will be stored an Firebase Cloud Storage service

    The image_picker package will be used.

    Implement a summarise AI on a backend

    Implement the route api to summarise a text using an AI.

    • We need to choose the AI to used to summarise a text (Bard, Chat-gpt, Gemini)
    • The text to summarize will be sent to the backend by http POST request
    • The post data will have a "text" key that contains the text
    • A protection layer to this route is highly recommended (authorized user only with a valid token and a non empty text)
    • Writing a unit test to test the protection layer is a bonus

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.