StoreIt is a platform designed to simplify file management and sharing. With a modern, responsive interface and powerful features, it ensures a seamless experience for users to organize and share their files effectively.
- Secure OTP Authentication: Gain access with one-time password authentication powered by Appwrite for enhanced security.
- Quick File Uploads: Upload and store various file types like documents, images, and videos with ease.
- File Management: Organize your files by renaming, deleting, or opening them in new tabs directly from the dashboard.
- Download Files Instantly: Easily download files whenever you need them.
- Simple File Sharing: Share files effortlessly to enhance collaboration.
- Detailed Dashboard Insights: View total and used storage, recent uploads, and categorized file summaries at a glance.
- Robust Global Search: Quickly locate files or shared items using an intuitive search bar.
- Custom Sorting Options: Organize files by date, name, or size for better accessibility.
- Responsive Design: Enjoy a user-friendly interface that works seamlessly on both mobile and desktop.
StoreIt leverages the following tools and frameworks to deliver a robust user experience:
- React 19
- Next.js 15
- Appwrite
- TailwindCSS
- ShadCN
- TypeScript
Here is the high-level structure of the project:
.
├── .env.local
├── components.json
├── eslint.config.mjs
├── next.config.ts
├── next-env.d.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── README.md
├── src
│ ├── app
│ │ ├── (auth)
│ │ │ ├── layout.tsx
│ │ │ ├── sign-in
│ │ │ │ └── page.tsx
│ │ │ └── sign-up
│ │ │ └── page.tsx
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── (root)
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── [type]
│ │ └── page.tsx
│ ├── components
│ │ ├── ActionDropdown.tsx
│ │ ├── ActionsModalContent.tsx
│ │ ├── AuthForm.tsx
│ │ ├── Card.tsx
│ │ ├── Chart.tsx
│ │ ├── FileUploader.tsx
│ │ ├── FormattedDateTime.tsx
│ │ ├── Header.tsx
│ │ ├── MobileNavigation.tsx
│ │ ├── OTPModal.tsx
│ │ ├── Search.tsx
│ │ ├── Sidebar.tsx
│ │ ├── Sort.tsx
│ │ ├── Thumbnail.tsx
│ │ └── ui
│ │ ├── alert-dialog.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── chart.tsx
│ │ ├── dialog.tsx
│ │ ├── dropdown-menu.tsx
│ │ ├── form.tsx
│ │ ├── input-otp.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── select.tsx
│ │ ├── separator.tsx
│ │ ├── sheet.tsx
│ │ ├── toaster.tsx
│ │ └── toast.tsx
│ ├── constants
│ │ └── index.ts
│ ├── hooks
│ │ └── use-toast.ts
│ └── lib
│ ├── actions
│ │ ├── file.actions.ts
│ │ └── user.actions.ts
│ ├── appwrite
│ │ └── index.ts
│ └── utils.ts
├── tailwind.config.ts
├── tsconfig.json
└── types
└── index.d.ts
Follow these steps to set up the project locally on your machine.
Make sure you have the following installed on your machine:
git clone https://github.com/iamfitsum/store-it.git
cd store-itInstall the project dependencies using npm:
npm installCreate a new file named .env.local in the root of your project and add the following content:
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_SECRET=Replace the values with your actual Appwrite credentials. You can obtain these credentials by signing up and creating a new project on the Appwrite platform.
Start the development server:
npm run devOpen http://localhost:3000 in your browser to view the project.
Special thanks to Adrian from JSMastery for his insightful video tutorial that guided the development of this project. Check out the course video here.
This project is open-source and available under the MIT License.