# Gallery of file-based apps*

> A gallery of file-based apps built with TagSpaces — showcasing real workflows for photo management, note-taking, Kanban boards, bookmarks, and more, all working offline.

export default function Page() {
  const [open, setOpen] = React.useState(false);
  const [currentFileApp, setFileApp] = React.useState(undefined);

  const items = [];
  if (currentFileApp?.videoUrl) {
    items.push(
      
        <CenteredVideo
          src={currentFileApp.videoUrl}
          posterUrl={currentFileApp.posterUrl || ""}
          showShadow={false}
          controls={true}
          autoPlay={true}
          showCaption={false}
        />
      
    );
  }
  if (currentFileApp?.screenshots) {
    currentFileApp?.screenshots.map((item) =>
      items.push(
        
      )
    );
  }

  return (
    <>
      <WebPageSD />
      
        Gallery of file-based apps*
        A gallery of file-based apps built with TagSpaces — showcasing real workflows for photo management, note-taking, Kanban boards, bookmarks, and more, all working offline.
      

      
        <Spacer height={50} />
        <Box
          sx={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, 400px)",
            gap: 2,
            justifyContent: "center",
          }}
        >
          {Object.keys(fileapps).map(
            (index) =>
              fileapps[index].description && (
                <FileAppCard
                  key={index}
                  fileApp={fileapps[index]}
                  onClick={() => {
                    setFileApp(fileapps[index]);
                    setOpen(true);
                  }}
                />
              )
          )}
        </Box>
        <Spacer height={50} />
        Foundations of the file-based apps
        
          *️⃣ File-based apps offer a privacy-focused, flexible, and efficient alternative to cloud-based services or
          centralized database apps, ideal for users who prioritize local control and offline accessibility. Here are
          their key properties:
        
        
          
            Privacy and Control
          
          
            
              Full Ownership of Data: In a file-based app, users store data locally, which gives them
              complete control over where and how their files are stored. There's no need to trust third-party cloud
              providers with sensitive information.
            
            
              No Data Harvesting: Since the app operates locally, there's no risk of third-party
              tracking or data being harvested by cloud providers.
            
          
          
            Offline Functionality
          
          
            
              Access Without Internet: File-based apps typically function fully offline, allowing
              users to work in environments with limited or no internet connectivity.
            
            
              Resilience to Outages: Files are stored locally, so the app remains accessible even if
              the cloud or remote servers go down.
            
          
          
            Portability
          
          
            
              Easy to Move Data: Files can be easily copied, backed up, or moved between devices.
              Users can take their data on external drives or cloud sync services without relying on any specific
              platform or app ecosystem.
            
            
              Cross-Platform Compatibility: Files managed by a file-based app can be accessed across
              operating systems or devices, making it easier to switch platforms or manage files in different
              environments.
            
          
          
            No Vendor Lock-In
          
          
            
              Open Formats and Flexibility: File-based apps often use standard, open file formats
              (e.g., text files, images, PDFs) that can be opened and edited with other software. This minimizes the
              risk of being locked into a specific app or service.
            
            
              Self-Hosting Options: Users can self-host their files or share them through their
              preferred storage solution, avoiding dependency on a particular vendor.
            
          
          
            Security
          
          
            
              Local Storage Security: Users can apply their own encryption methods or use native
              encryption features on their device to secure their data without relying on cloud encryption methods.
            
            
              Reduced Attack Surface: Since the app is often offline and doesn't require
              communication with external servers, there's less exposure to hacking, breaches, or data leaks.
            
          
          
            Speed and Efficiency
          
          
            
              Local Performance: File-based apps read and write data directly from the local system,
              often resulting in faster performance compared to web-based apps or cloud services, which depend on
              network speed and latency.
            
            
              No Sync Issues: Users don't have to deal with delays or conflicts that sometimes occur
              in cloud-syncing apps.
            
          
          
            Customization and Flexibility
          
          
            
              Custom File Organization: Users have the freedom to organize their files in the way
              they prefer, using folders, tags, or custom file naming systems without being constrained by a specific
              app's structure.
            
            
              Integration with Existing Tools: Users can integrate file-based apps with their
              existing file management tools, backup solutions, or cloud sync services (e.g., Dropbox, Google Drive)
              if they choose to.
            
          
          
            Transparency and Auditing
          
          
            
              Direct Access to Files: Users can directly view, inspect, and modify the files created
              by the app without needing specialized software or access to a database. This transparency is useful for
              auditing or making manual changes.
            
            
              Easy Backups: Users can easily create backups by copying their files to external
              drives, cloud services, or other devices without needing a specialized backup system.
            
          
          
            Resilience to Company Shutdowns
          
          
            
              No Dependency on Provider's Longevity: If we as TagSpaces developers go out of business
              or stops maintaining the app, users retain access to their files and can continue managing them with
              other software.
            
            
            
            
            
            
            
            
          
        
        <Spacer height={150} />
        {currentFileApp && (
          <Dialog open={open} onClose={() => setOpen(false)} fullWidth={true} maxWidth={"lg"}>
            <DialogTitle sx={{ position: "relative" }}>
              <Typography variant="h5">{currentFileApp.title}</Typography>
              <Typography variant="subtitle2">{currentFileApp.description}</Typography>
              <Box sx={{ position: "absolute", top: 10, right: 25 }}>
                {currentFileApp.tags?.map((tag, i) => (
                  <Tag title={tag} />
                ))}
                <IconButton style={{ marginLeft: 5 }} onClick={() => setOpen(false)}>
                  <HighlightOff />
                </IconButton>
              </Box>
            </DialogTitle>
            <DialogContent style={{ paddingTop: 10 }}>
              <Swiper
                modules={items.length > 1 ? [Navigation] : []}
                navigation={items.length > 1}
                autoHeight={true}
                loop={items.length > 1}
                className="img-rounded"
              >
                {items.map((item, index) => (
                  <SwiperSlide key={index}>{item}</SwiperSlide>
                ))}
              </Swiper>
            </DialogContent>
            <DialogActions style={{ justifyContent: "space-between" }}>
              <Typography variant="overline" style={{ marginLeft: 15 }}>
                by {currentFileApp.author}
              </Typography>
              <Box>
                {/* <Button variant="solid" color="primary" onClick={() => setOpen(false)}>
                  Close
                </Button> */}
                {currentFileApp.link && (
                  
                    <Link to={currentFileApp.link}>
                      <button class="button button--outline button--primary">Learn more</button>
                    </Link>
                  
                )}
                {currentFileApp.demoLink && (
                  
                    <button class="button  button--primary" style={{ height: 35, marginLeft: 10 }}>
                      Demo
                    </button>
                  
                )}
              </Box>
            </DialogActions>
          </Dialog>
        )}
      
    </>
  );
}