Project File Structure

[ascasson]

Basic apps always need some attention; let's organize this project a little. The project files should be structured by type, such as:

components/
    button/
        Button.js
        index.js
        style.css
    header/
    footer
pages/

[bhefty]

I'm interested in tackling this one!

[ascasson]

Sweet! Go for it, @bhefty! Obviously the above is just an example; I'm open to ideas.

[bhefty]

Thanks! What's your opinion on swapping pages for containers?

My thinking there:

components/
    button/
        Button.js
        index.js
        style.css
    header/
    footer
containers/
    App/
        index.js
        App.css
        tests/
            index.test.js
    Dashboard/
        index.js
        Dashboard.css
    ...

[ascasson]

@bhefty Do you find it feels like a clearer abstraction than Pages? I could go either way - sometimes good to voice the details.

[bhefty]

@ascasson I think pages certainly signify a clear message of "whatever is in this directory is a page view", which to me means route based. However I'm wondering about the "container" type components which don't necessarily have anything to do with a particular page view. Like App, which may be the route management and overall main entry point of the application.

Do you anticipate the majority of larger "container" type components being tied to routes? If so I'm good with keeping pages. Calling them containers I think just sets it up a bit more for future cases where something like Redux is generally connected to a "container" not necessarily a "page".

Honestly the only reason I had this question is because of a rather large app I'm working on went with pages and we have several components within that aren't specifically "page" based so it's been a semantic battle trying to remember which directory contains the thing I'm wanting to change 😛

[bhefty]

Or we can even take a step back and rather than having two primary directories (components/pages), it could be more feature based. Something like:

components/
    button/
        Button.js
        index.js
        style.css
    header/
    footer
App/
    index.js
    App.css
    tests/
        index.test.js
Dashboard/
    index.js
    Dashboard.css
    JobMetrics/
        index.js
        JobMetrics.css
    PostJob/
        index.js
        PostJob.css
    ...

I think this approach can result in deeper nesting, but it may also allow for things to become whatever they want to be (page view, smart container, helper functions, etc)

[ascasson]

@bhefty Seriously good points. Honestly, I say roll with the container structure. This app will be so small, even with future goals of incorporating payments. (Famous last words! Ha!)

At the end of the day, refactoring is always a thing haha

[bhefty]

Haha, completely understand those sentiments! I'll get a basic structure over soon!

[ascasson]

@bhefty You rock! The help and thoughtful opinions are incredibly appreciated 💯

[ascasson]

@bhefty Just a heads up, a new contributor just dropped a PR with actual components, routers, and testing. I envision some merge conflicts headed your way...want some assistance? I think it should generally work with the basic structure you're creating.

[bhefty]

@ascasson I saw this as soon as I submitted mine haha. Let me know how you want to proceed though and I can rebase mine to the new PR if conflicts arise.

[ascasson]

@bhefty lol the joys of community dev! I merged his PR, so there are now some conflicts. Those mods were looking great :)

[ascasson]

@bhefty Good stuffs, man! Thank you