X:/OS

X:/OS is a self-hosted cloud storage website that uses HTML, CSS, and JavaScript (+jQuery) for the front-end, and PHP for the back-end. It simulates an operating system while offering a lot of functionality. Users can upload multiple files at a time, rename the files before upload, upload larger files in chunks, create nested and complicated folder structures with ease, delete files, delete folders etc. The image above shows the login page of X:/OS. It display's the account's username, along with a button that remembers the user for a month, an input field for the password, and a button for submitting said password. The "remember me" feature works by generating a unique token, and then setting a cookie on the user's browser with the token's value. If the cookie matches the generated token, then the user is considered as logged in. The cookie expires in a month, but for extra security, the token also changes every month (and every time the user logs out), so if a hacker were to steal the cookie, they wouldn't be able to hijack the user's account completely. The user's password is hashed with BCrypt and stored in a configuration file. X:/OS has some settings for customization. The user can switch between a light or dark theme, change the background color, hide the dock, change the dock's size, or view their files as a list rather than icons. Hiding the dock speeds up loading times as the website won't need to fetch any dock icons. The image above shows what the light theme looks like. This image shows the file uploader that can be accessed by clicking the cloud icon at the top right of the website. Files can be added to the upload queue using drag and drop or by clicking on the uploader. Files can then be previewed, where the user is shown the file size, file name, and file extension. They can change the latter two. There is also a "remove" button under each file that can be used to remove that file from the queue. At the bottom of the uploader, there's a cancel button to remove all the files from the queue, a file counter, and a button to submit the files and begin the upload. Each file has a progress bar that fills up as they are uploaded. When a file is uploaded, the user can find it using the "NavMod". NavMod stands for "Navigation Module", and is X:/OS' file browser. Left-clicking or right-clicking on a file brings up a menu that lets the user download, rename, move, or delete the file, with a final option which fetches any relevant information about the file, such as the date it was created, its name, extension, size, location, and type. What the NavMod looks like in light mode. On desktop, files and folders can be dragged and dropped on different elements in order to move them. For example, in the image above, the file "Forest.jpg" is being dragged. When a drag event starts, areas where the item can be dropped are highlighted in orange. While the item is hovering over an orange area, it turns red to signify the fact that dropping the item would move it into the area it's being dropped on. So in the image above, the file "Forest.jpg" is being dropped on a folder called "Folder", so it turns red to show that. Similarly, the item can be dropped onto any of the main folders (NavMod, Movies, Songs, Pictures, Applications, Documents, and Uploads). Once the item is dropped, its location is changed in the file system configuration file to reflect the new location. The image above shows what the file system looks like to the API. Files are kept track of using a JSON array that is saved to a configuration file. Each file has a unique ID. All files are, in reality, stored inside the same folder on the server, a folder called "uploads". But, X:/OS doesn't treat them that way. Just as with a real OS, there are no folders or directories, all the data on a hard drive is stored in sectors, and there are file headers that point to the sector on the hard drive in which the data is stored. Folders and directories are merely simulated to make it easier for humans to organize and manage files. When a directory is deleted on X:/OS, the PHP script goes through the file system and removes any file that had that folder as its location, thereby allowing users to delete folders full of files. In case the user messes up or something goes wrong, there is a function in the settings page that allows users to move all their files to the "Uploads" folder, so no files get permanently lost if the user doesn't have access to the server files. When a folder is opened, a green back button appears at the top of the window. The sidebar items also all become clickable (as opposed to being grayed out if they are already open in a window). If the user tries to have two files with the same name in the same location, the notification pane is shown with an error telling the user they cannot do that. Here's what the notification center looks like with the light theme on. X:/OS also has a mobile version. The image above is of the login page. The dock items are removed one at a time in order of importance as the screen size gets smaller. The same holds true for the navigation bar. The NavMod window on mobile has much larger buttons at the top, and the user can set their NavMod view on "list" to view more items at a time. The code for this project can be viewed on GitHub using the "Download" button below.