DEV Community

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! πŸŽ‰

Discussion (104)

Collapse
hb1998 profile image
Habeebur Rahman

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
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
Aakash Mallik

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
Habeebur Rahman • Edited

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
Aakash Mallik

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

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
sentinel1909 profile image
Jeff Mitchell

Hi Justin,
Super impressed with what you've achieved here. Unfortunately, it's a bit of a pig performance wise, can't see myself using it as a daily driver just yet :) Excellent job though! I'll be following along with your project for sure.

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim Author

TYSM for the 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
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
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
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
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
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
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
gillarohith profile image
Rohith Gilla

Very impressive!!

Collapse
aldine_ruturi profile image
Aldine Ruturi • Edited

Impressive work Justin really loving the UI. I'm curious to see how well it performs though cz Electron isn't the most efficient framework out there. Well done

Collapse
ndh103 profile image
NDH103

So coool

Collapse
maximvdw profile image
Maxim Van de Wynckel

Impressive, nicely done. Looking forward to see what future plugins will bring!

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

Collapse
abdurrahmaanj profile image
Abdur-Rahmaan Janhangeer

Its great for a high school student!

Collapse
drumnickydrum profile image
Nick Carbone

This is phenomenal. I’m a fan of squeezing every drop out of web tech. Pure coding fun. You have a bright future!

Collapse
hunter55 profile image
Nafi

Oh this is sick man!
I just started building a file explorer with Node.Js.
Great inspiration!!

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks!

Collapse
lohnsonok profile image
lohnsonok

It's amazing great work πŸ‘ !

Collapse
adgamerx profile image
Aman Dutt

bro that last point is relatable af πŸ˜‚

Collapse
lordsmurf profile image
LordSmurf

This looks awesome. Can't wait to test it out!

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks, any feedback will be appreciated :)

Collapse
mightycoderx profile image
MightyCoderX • Edited

I think that the icons on the left are a bit too crammed, but everything else it's awesome (in my opinion)!

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim Author

Will refactor it, thanks!

Collapse
mightycoderx profile image
MightyCoderX • Edited

Completing this project must have been so rewarding, that's very cool. That's also plenty inspiring! And a fantastic thing for your resume

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks!

Collapse
abhijithganesh profile image
Abhijith Ganesh

This is wonderful Justin, I am throughly impressed by this, thank you for this

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks!

Collapse
zplusfour profile image
zplusfour

This is very cool!

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim Author

Thanks!