DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for I wrote a fully-functioning File Explorer, using TypeScript.
Justin Maximillian Kimlim
Justin Maximillian Kimlim

Posted on • Updated on

I wrote a fully-functioning File Explorer, using TypeScript.

I am very happy to introduce Xplorer to help you organize your files and/or folders.
Xplorer win

Features

Designed Out Of The Box

Xplorer is not written on traditional language like C, C++ or C#. It is written on TypeScript, HTML and SCSS, using the Electron framework, this makes Xplorer looks much more modern, and it will support theme customization in the future release. There are four available default themes for now.

Cross Platform

As I mentioned, Xplorer is powered by the web because it's written with the Electron framework, this makes it possible to run Xplorer from any platform.

Windows Garuda Linux macOS Catalina
Xplorer win Xplorer linux Xplorer mac

File Preview

preview

I know it's quite annoying to open a file and close to search for the correct file users are searching for. Hence, I've implemented this native file preview feature, see available file types to preview here

Supports Multiple Tabs

support-tabs

Xplorer helps you organize your files easier by supporting multiple tabs :)

and many others more

Installation

You can reach the installer on GitHub release section

About

Xplorer is a File Explorer built on TypeScript, focused on modernization and customization. It will support extension just like VSCode does. (thought by the time I write this documentation, the feature to user to auto generate their theme is not done yet, but it will be ASAP).

Contributors in need.

Links

GitHub link: https://github.com/kimlimjustin/xplorer
Documentation site: https://xplorer.vercel.app

Why it was built using TypeScript?

  • Typed Secured
  • TypeScript/JavaScript has became the most used language.
  • TypeScript has a very strong community.
  • Can be run in various OSes.
  • You can easily write plugin using TypeScript/JavaScript
  • Modern layouts can be built using the HTML and CSS via Electron.
  • I'm bad at C/C++ xD

Any comments will be appreciated :) Thanks

Happy coding! πŸŽ‰

Top comments (108)

Collapse
 
hb1998 profile image
Habeeb

Electron is ram hungry. You should consider tauri github.com/tauri-apps/tauri
It uses edge view and is very light weight.
It will definitely suit your needs. Although watch out for some incompatibilities, it's still in beta.

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Migrated to Tauri! Wrote a blog about it, check it out!
dev.to/kimlimjustin/xplorer-a-mode...

Collapse
 
urielsouza29 profile image
Uriel dos Santos Souza
Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

I'll try it when I got time :) Thanks

Collapse
 
posandu profile image
Posandu

And please remove that tilt effect

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Removed, you can try the master branch if you want to

Collapse
 
piperunner profile image
Pipe Runner

Recently came across tauri. Definitely planning to use it soon. As compared to other UI libraries for rust, do you think tauri consumes more resources?

Collapse
 
hb1998 profile image
Habeeb • Edited on

Definitely no. It consume less resources and its almost 1/50th of the storage space compared to electron for a hello world app. My only problem was its still in beta and I was stuck in places where I couldn't find any solution or libraries.. So i was forced back to electron.

Thread Thread
 
piperunner profile image
Pipe Runner

Aah. I see. Thanks for the heads-up.

Collapse
 
mohithgupta profile image
K.Mohith Gupta

Impressive Justin!! Will try to contribute if I can....
Keep up the good work, you are an inspiration....

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks! Any PRs will be welcomed :) Also, please drop a star if you like to haha

Collapse
 
alfredbaudisch profile image
Alfred Reinold Baudisch • Edited on

As much as this drives me insane - the case of trying to fit Javascript and Electron everywhere - I see all the merit of your creation, that this is a very good portfolio piece and learning exercise for you and a very good use case for those interested in trying to learn the stack, so good work, Justin! Impressive considering your profile says you are junior from high school! With a piece of work like this, you are ready to be hired for frontend development work!

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

TYSM for your feedback :)

Collapse
 
djekanovic profile image
Dimitrije Djekanovic

Just checked it.
First few things i noticed:

  • On resize, windows are slow and buggy.
  • Icon spacing is really low, doesn't feel right.
  • Design needs more work but it's a good path.

In terms of stability, I am wondering, is it possible to happen that some file gets corrupted or lost?

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks for your feedback, I'll try my best to improve it.

For the stability, I've never experienced nor got report about files getting corrupted.

Collapse
 
halimsamy profile image
Halim Samy

I would say that the word "AWESOME" isn't expressive enough! Keep going!

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks haha

Collapse
 
ledmirage profile image
ledmirage

impressive work, just some quick feedback

  • need better support of shortcut key, preferably similar to existing windows explorer, just personal preference, but should not matter if its configurable
  • if aiming to be a productivity tool, i would suggest to cut down on the animation and focus more on getting the feature to work fast (memory not so big a concern for me tho, but good if we can reduce memory usage)
Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks for your feedback, if could, could you please list the shortcut keys and the features you want to add into? (you can open github issue/discussion if you want to).

Collapse
 
javanani profile image
JAVA NANI

Cool app but I am a noob, can you tell me how you get the information of files and directories using typescript πŸ€”πŸ€”πŸ˜…

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

You can do this by using the node js fs module, note that this only can be done the node process

Collapse
 
javanani profile image
JAVA NANI

Thanks and any resource for learning ts I didn't find one

Collapse
 
dkhd profile image
Diky Hadna πŸ’‘

Ah, totally forgot to drop a comment on this post πŸ˜…

Great job, @kimlimjustin !

I never realize that you're still JHS right now. This is amazing.

Keep up the good work! πŸ”₯πŸ”₯πŸ”₯

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

TYSM, actually I went to Senior High School just this June haha, is there any place I forgot to update my bio or smth? (though I'm feel I'm still a JHS bcuz of the covid xD)

Collapse
 
dkhd profile image
Diky Hadna πŸ’‘

Man, your profile card just beside this post is still showing the junior high school πŸ˜„

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Ehhh, don't realize it lol, dev.to setting UX is quite confusing haha, and I rarely use dev.to xd.

Collapse
 
evyatarel profile image
evyatarel

Very impressive !!!! wow, gorgeous application.
I have one question; Does it support column view like mac file explorer does?

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

You can change layout by right clicking -> click on Layout -> select one of four default layouts. (Will add more in future release)

Collapse
 
evyatarel profile image
evyatarel

Thank you Justin

Collapse
 
codewithpom profile image
Padmashree Jha

I am on windows-7 I liked the graphics in the images but I cannot use it on my computer when I start it it does not open and the task manager shows that it's processes are running. Please help I want to use it.

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Does your windows 7 on 32 bit? If your computer use 64 bit and the processes are running, try restart your computer and open it again, if you use 32 bit, actually Xplorer doesn't officially support it for now, but I can build it for you (Please note that it will crash everytime Xplorer release a new version that you have to ask the latest 32 bit binary installer from me, this is because Xplorer use electron-updater which will automatically fetches the latest update and if I enable this for 32 bit, the installer will go as bigger as twice, hence I decided to not offcially support it for now, but I will try my best to support 32 bit officially)

Collapse
 
zayidu profile image
Zayidu A

Wow, its very nice, Tried it! Keep up the great work!

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks!

Collapse
 
martin2844 profile image
martin2844

This is amazing! Great work!

Collapse
 
jzombie profile image
jzombie

I like this, on several levels. The Gitpod integration is cool as well, and something that I want to look into more. I'm a huge Docker fan and will be taking some notes from this repo.

Collapse
 
danaharley profile image
danaharley

how old are u justin?
im indonesian too..
great work!

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim Author

I'm on senior high school rn (SMA), 15 yo. Thanks!

Collapse
 
ben profile image
Ben Halpern

Wow

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›