New project structure

[mikenikles]

The current structure with pages, src and components folders in the root is confusing. Over time, the components folder will become unmanageable. The project is structured around technical behaviour, such as:

• src: Deals with GraphQL, form submission handlers, loading states
• components: Contains components for all pages. This will get complex as more components get added.

In order to simplify things and follow a component-driven development approach, @Mahongru and I discussed the following new structure:

├── components                    # Required. Components used globally (header, footer, h1, etc.)
├── pages                         # Required. Defines the URL structure. Required by Next.js
└── src
    └── projects
        ├── components            # Optional. Components shared across all projects (details, list, create)
        ├── create                # Same structure as the "details" folder below
        ├── details
        │   ├── __tests__
        │   │   ├── index.js      # Required. Tests the project details view
        │   │   └── gq.js         # Optional. GraphQL tests
        │   ├── components        # Required. Functional components (wherever possible) specific for the project detail view
        │   ├── gq.js             # Optional. GraphQL code if required
        │   ├── index-stories.js  # Required. Storybook stories for the project details
        │   └── index.js          # Required. Deals with loading state, parses GraphQL queries. Uses components to render the full page
        └── list                  # Same structure as the "details" folder above

The src/projects folder is an example of a feature (projects in this case) that is complex, with sub-features (details, create, and list). Other features may only have a src/[feature] folder that follows the pattern of src/projects/details above.

Before I go ahead and make the changes to the project, I'd like to see if this makes sense. @Magitron @Mahongru what do you think? Did I miss anything?