Phil Choi walks through a production-ready folder structure for a Vite app, organizing components by atomic design (atoms, molecules, organisms) and separating concerns across services, hooks, contexts, and types. The setup makes codebases readable and lets other developers contribute without confusion.
Chapters
Really good when someone can look into your code and know exactly what's happening through like the file names and the folder structure. Super important. It helps other people want to work with you. So this is my folder structure I use to help my mentees who are in my mentorship program. This was an app called Harmony Hive. It was like a playlist creating app. You could search Spotify API and then make your. Make your playlist that you want to use. And it would be kind of. It would be kind of cool to go over. This was done like a month, couple months ago. So I have the IT running here it is on this Harmony Hive Pro. But I think we'll just do it from here real quick. So this is the app it's. You get. It's called Harmony Hive. This. It's using some cool stuff like usememo and stuff. But then you can log in and this person does not have any playlists yet. So then you go to create playlist. Maybe you can add an image there. Nice photo of me. This will get uploaded into the storage let fill playlist Playlist Beast of Burden and you can add this and it gets added into your songs and then another, another song maybe hello by Adele. It's a great song. Alright, so you can just add these and. And then you can add the playlist and the playlist gets created successfully and then you can look over here in the dashboard and my playlist will be here. So it gives you the YouTube links and you can listen and then you can share it and it'll get. Okay and then it'll. It'll give you a link and then it'll. You can see that it's the playlist here. It's pretty cool. So I'll show you how we created that. So basically it's just a vite project. Real quick. I have my GitHub workflows here. It's the dot GitHub and the workflows and then the steps for the GitHub action. Here's the AWS stuff and then make this a little bigger. Basically I have some kind of like files that help like docker compose docker file here and all this kind of stuff that you kind of need anyways. But the real magic really happens in the SRC folder. Right here's like the readme of like what we actually used. So basically here you have folder structure. Atomic design. This is a cool guy. Brad Frost. It's a good blog. Atomic design is you sleep split up your components into atoms which are the smallest elements like primitives like text, image and button. Then you have molecules, two or more atoms put together. Then your organisms, multiple, multiple molecules with atoms. So and then you have your configurations of the app, your templates for your layouts and your pages. So and then you have your services which are in your API, which are your API calls and your utility functions. So in the src, I have my assets which hold like the assets, like the images that are used in the code, the components that are split up into atoms, molecules and organisms. Molecule will be like a back button, kind of like an image and a button put together. And then you have your organisms which are like kind of big, like edit, profile, form and your auth button you have your config. So this is a big thing that I do in all my apps. I have like my app config JSON. I probably have more things here later. And then you have your index that controls those configurations. And I usually have an app config and an index, like a class config that controls all like the local storage and all that kind of stuff. And then you have your constants, so whatever collection names you're using and, and then like your local storage keys, and then your contexts which are like your user context or like the context, whatever providers you have within your code. And then your global state, which we're using Recoil here. So Recoil is pretty cool. It's made by Facebook. It's. I don't think it's maintained anymore, but it was a lot easier to use than Redux or zeusyn. So I just stored the profile inside of the Recoil state, which is pretty cool. And then you have your hooks, so like use, debounce, use, get, Spotify, token, all this kind of stuff. And then the models, so like what kind of data you're storing into the database. And you have your pages which, like your admin view page, your app page, so like your dashboard and all this kind of stuff. And. And then your pages get hooked up into your routes. So I have the app router here and then the auth router and the services, like whatever endpoints that you end up using, I kind of just like try to put it into like a function to be easily done. And then inside of there you have like your types, so you can, you can use your typescript here. And then your endpoints should all be set either in your config or in a file like this. And basically also you have like your maybe YouTube stuff here and then your API ts not set that up actually. And then your templates, so this is like a layout here. So this is the layout that, that is always being used within the code. And somewhere in here I have my routes being put into the layout and that's about it. And I'm sure like there's a lot more that you can put, but basically just like, it's very simple, like separation of logic. Your API call should make your API calls, your UI should show your ui and then anything like anything that you need to put like in the global state, you should kind of separate that out and all that kind of stuff. It's really good when someone can look into your code and know exactly what's happening through like the file names and the folder structure. Super important. It helps other people want to work with you. If you have any questions about like how to set up a project, there are like many different ways. There's like FSD feature slice design, the atomic, atomic pattern and a lot of things. I like to go with more like atomic and the FSD is like usually like new recently, but they're all really good, they're all valid. But you know, separating my screens and separating like the, the layouts and separating the hooks and separating the utility functions and the contexts, it's all really important to kind of have manageable, manageable code and you know, if you have any questions, please comment below. Thank you for making us a part of your day. Remember, if I can do it, you can do it too. Coding saves lives.
