StoreIt 📦

A Modern Cloud Storage Management Platform

Built with Next.js 15 | Powered by Appwrite | Styled with Tailwind CSS

View Demo • Report Bug • Request Feature

📸 Screenshots

Dashboard View

Modern dashboard with storage analytics and recent files

Images Gallery

Browse and manage your images

File Actions

Rename, share, download, and delete files

File Sharing

Share files with other users via email

File Details

View detailed information about your files

Search Functionality

Quickly find files with real-time search

🎯 About The Project

StoreIt is a feature-rich cloud storage management platform that enables users to securely upload, organize, and share files. With an intuitive interface and powerful features, StoreIt provides a seamless experience for managing your digital assets.

Why StoreIt?

🔒 Secure Storage - Your files are stored securely with Appwrite's robust backend
📊 Storage Analytics - Real-time insights into your storage usage by file type
🤝 Easy Sharing - Share files with others via email with granular permissions
🎨 Beautiful UI - Modern, responsive design that works on all devices
⚡ Fast Performance - Built with Next.js 15 for optimal speed and performance

✨ Features

Core Features

📤 File Upload & Storage
- Support for multiple file types (Documents, Images, Videos, Audio)
- Drag-and-drop interface
- Bulk file uploads
- File size validation
📁 File Management
- Organize files by type
- Rename files
- Delete files
- Search functionality
- Sort by date, name, or size
👥 File Sharing
- Share files with multiple users via email
- Manage shared file permissions
- Track who has access to your files
📊 Storage Analytics
- Visual storage breakdown by file type
- Storage usage charts
- Track storage consumption in real-time
- 2GB storage limit per user
🕐 Recent Activity
- Quick access to recently uploaded files
- File thumbnails and previews
- Timestamp information
🔐 Authentication
- Secure user authentication via Appwrite
- Protected routes
- Session management

🛠️ Tech Stack

Frontend

Next.js 15 - React framework with App Router
TypeScript - Type-safe JavaScript
Tailwind CSS - Utility-first CSS framework
Shadcn/ui - Re-usable component library
Lucide React - Icon library

Backend

Appwrite - Backend-as-a-Service
- Authentication
- Database
- Storage
- Real-time capabilities

Additional Tools

React Hook Form - Form handling
Zod - Schema validation
ESLint - Code linting
PostCSS - CSS processing

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18.0.0 or higher)
npm or yarn or pnpm
An Appwrite account (Sign up here)

Installation

Clone the repository

git clone https://github.com/nikhil-marne/StoreIt.git
cd StoreIt

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Set up Appwrite

a. Create a new project in your Appwrite Console

b. Create a new Database and note the Database ID

c. Create the following collections:
- users collection with these attributes:
  - fullName (string)
  - email (string)
  - avatar (string)
  - accountId (string)
- files collection with these attributes:
  - type (string)
  - name (string)
  - url (string)
  - extension (string)
  - size (number)
  - owner (string)
  - accountId (string)
  - users (array)
  - bucketFileId (string)
d. Create a Storage Bucket and note the Bucket ID

e. Set up appropriate permissions for collections and storage

f. Add platform for localhost:
- Go to Settings → Platforms → Add Platform → Web App
- Hostname: localhost

Configure environment variables

Create a .env.local file in the root directory and add the following:

NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT=your_project_id
NEXT_PUBLIC_APPWRITE_DATABASE=your_database_id
NEXT_PUBLIC_APPWRITE_USERS_COLLECTION=your_users_collection_id
NEXT_PUBLIC_APPWRITE_FILES_COLLECTION=your_files_collection_id
NEXT_PUBLIC_APPWRITE_BUCKET=your_bucket_id
NEXT_APPWRITE_KEY=your_api_key

Run the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser

Navigate to http://localhost:3000

🌐 Deployment

Deploy to Vercel

This project is deployed on Vercel. Follow these steps to deploy your own instance:

Push your code to GitHub

git add .
git commit -m "Ready for deployment"
git push origin main

Import to Vercel
- Go to vercel.com
- Click "New Project"
- Import your GitHub repository
- Vercel will auto-detect Next.js settings
Add Environment Variables

In Vercel project settings, add all environment variables from your .env.local:
- NEXT_PUBLIC_APPWRITE_ENDPOINT
- NEXT_PUBLIC_APPWRITE_PROJECT
- NEXT_PUBLIC_APPWRITE_DATABASE
- NEXT_PUBLIC_APPWRITE_USERS_COLLECTION
- NEXT_PUBLIC_APPWRITE_FILES_COLLECTION
- NEXT_PUBLIC_APPWRITE_BUCKET
- NEXT_APPWRITE_KEY
Configure Appwrite for Production

In your Appwrite Console:
- Go to Settings → Platforms → Add Platform → Web App
- Add your Vercel domain (e.g., your-app.vercel.app)
- Add wildcard for previews: *.vercel.app
Deploy
- Click "Deploy"
- Your app will be live in minutes!

Live Demo: https://store-it-alpha-topaz.vercel.app/

📁 Project Structure

StoreIt/
├── app/
│   ├── (auth)/              # Authentication pages
│   │   ├── sign-in/         # Sign in page
│   │   └── sign-up/         # Sign up page
│   ├── (root)/              # Main application pages
│   │   ├── [type]/          # Dynamic file type pages
│   │   └── page.tsx         # Dashboard
│   ├── globals.css          # Global styles
│   └── layout.tsx           # Root layout
├── components/
│   ├── ui/                  # Shadcn UI components
│   ├── ActionDropdown.tsx   # File actions menu
│   ├── Chart.tsx            # Storage usage chart
│   ├── FileUploader.tsx     # File upload component
│   ├── FormattedDateTime.tsx
│   ├── Header.tsx
│   ├── MobileNavigation.tsx
│   ├── OTPModal.tsx
│   ├── Search.tsx
│   ├── Sidebar.tsx
│   ├── Thumbnail.tsx
│   └── ...
├── constants/
│   └── index.ts             # App constants and config
├── hooks/
│   └── ...                  # Custom React hooks
├── lib/
│   ├── actions/
│   │   ├── file.action.ts   # File CRUD operations
│   │   └── user.action.ts   # User operations
│   ├── appwrite/
│   │   ├── config.ts        # Appwrite configuration
│   │   └── index.ts         # Appwrite client setup
│   └── utils.ts             # Utility functions
├── public/
│   ├── assets/              # Static assets (icons, images)
│   └── screenshots/         # App screenshots
├── types/
│   └── index.d.ts           # TypeScript type definitions
├── .env.local               # Environment variables (create this)
├── .gitignore
├── next.config.ts
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md

💡 Usage

Uploading Files

Click the "Upload" button in the header
Select files from your device or drag and drop
Files will be automatically categorized by type
View uploaded files in the dashboard or respective type pages

Managing Files

Rename: Click the three-dot menu → Select "Rename"
Share: Click the three-dot menu → Select "Share" → Enter email addresses
Download: Click the three-dot menu → Select "Download"
Delete: Click the three-dot menu → Select "Delete" → Confirm
Details: Click the three-dot menu → Select "Details" to view file information

Viewing Storage Analytics

Dashboard displays storage breakdown by file type
Visual chart shows percentage of storage used
Click on any file type card to view files of that category

Searching Files

Use the search bar in the header
Search works across all file names
Results update in real-time as you type

File Categories

Documents - PDF, DOC, DOCX, TXT, XLS, XLSX, CSV
Images - JPG, JPEG, PNG, GIF, SVG, WEBP
Media - MP4, AVI, MOV, MKV, WEBM
Audio - MP3, WAV, OGG, M4A
Others - All other file types

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

Distributed under the MIT License. See LICENSE file for more information.

📧 Contact

Nikhil Marne - @nikhil-marne

Project Link: https://github.com/nikhil-marne/StoreIt

Live Demo: https://store-it-alpha-topaz.vercel.app/

🙏 Acknowledgments

⭐ If you find this project useful, please consider giving it a star!

Made with ❤️ by Nikhil Marne

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
app		app
components		components
constants		constants
hooks		hooks
lib		lib
public		public
types		types
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

nikhil-marne/StoreIt

Folders and files

Latest commit

History

Repository files navigation

StoreIt 📦

StoreIt 📦

A Modern Cloud Storage Management Platform

📸 Screenshots

Dashboard View

Images Gallery

File Actions

File Sharing

File Details

Search Functionality

📋 Table of Contents

🎯 About The Project

Why StoreIt?

✨ Features

Core Features

🛠️ Tech Stack

Frontend

Backend

Additional Tools

🚀 Getting Started

Prerequisites

Installation

🌐 Deployment

Deploy to Vercel

📁 Project Structure

💡 Usage

Uploading Files

Managing Files

Viewing Storage Analytics

Searching Files

File Categories

🤝 Contributing

📝 License

📧 Contact

🙏 Acknowledgments

⭐ If you find this project useful, please consider giving it a star!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages