Notes App

A versatile notes application built with React, Google Firebase, Tailwind CSS, and Material Icons.

Description

The Notes App offers a comprehensive solution for organizing and managing your documents effectively. It combines the power of React for a smooth user experience, Google Firebase for secure data storage, Tailwind CSS for responsive design, and Material Icons for intuitive visual elements.

Features

• Sign Up and Login: Utilize React-Toastify for user authentication.
• Google Login: Enable users to log in with their Google accounts.
• Preloader: Enhance user experience with a loading indicator.
• Document Management: Seamlessly store files and folders in a dedicated Document section.
• Real-time Updates: Fetch user files in real-time based on user data.
• File Type Recognition: Identify file types with the FileIcon function.
• Browser Rendering: View PDFs, images, and videos directly on the dashboard without downloading.
• Download Functionality: Allow users to download files/documents from the dashboard.
• Upload Progress Bar: Display a progress bar for file uploads.
• FileReader Integration: Enable file reading across the dashboard.
• Folder Creation: Allow users to create folders for better organization.
• Subfolder Support: Create subfolders and upload files within them.
• Breadcrumb Navigation: Dynamically update breadcrumbs to facilitate folder navigation.
• Folder Options Dropdown: Access various options including download, rename, color coding, and more.
• Top Loading Bar: Enhance user experience with a loading bar at the top of the page.
• Starred Documents: Mark documents as favorites for quick access.
• Recent Page: Display recently opened files for easy retrieval.
• Scan Document Feature: Capture, crop, and filter images to upload as scan documents.
• Search Functionality: Search documents and related information.
• Keyword Extraction: Extract keywords from images for quick search on Google.
• Sorting Options: Sort files and folders based on various criteria.
• File URL Sharing: Copy file URLs for sharing purposes.

Technology Stack

• Technologies: React, Google Firebase, Tailwind CSS
• Notification: React-Toastify
• Icons: Material Icons

Installation

1. Clone the repository.
2. Install dependencies using npm install.
3. Configure Firebase credentials.
4. Start the development server with npm start.

Preview of Notes App

1. Login Page

2. Sign Up Page

3. Documents page

4. View Document

5. Camera page

6. Scan Documents page

7. Starred Documents page

8. Related Info page

9. Recent Documents page