Establish the Project File/Folder Structure

[JeanSanchezFelix]

Description:

We are transitioning the project to use Svelte for building the web application. The project needs to be organized following standard Svelte practices, which involve a clear separation of components, assets, and reusable libraries. The root structure should be Svelte-friendly and include necessary files like index.html, a src folder containing the application code, and structured subfolders for organization.

Requirements:

1. Svelte Project Setup:

   • The root folder should contain index.html for the main entry point.
   • A src folder will house all application files, including Svelte components, assets, libraries, and entry point scripts.

2. Components, Assets, and Lib Folders:

   • Components folder will store individual .svelte components.
   • Assets folder will store shared static assets like images and fonts.
   • Lib folder will contain reusable utilities or helper libraries.

3. App Structure:

   • The root of the src folder will contain App.svelte as the main component, and main.js will handle the entry point to bundle the app.

4. Flask Backend:

   • There shall be a folder on the root of the project called api/ and it shall contain a main.py file with a barebones flask server.

Expected Folder Structure:

/project-name
├── index.html                      # Main HTML entry point
├── /src                            # Source files folder
│   ├── /assets                     # Static assets like images, fonts, etc.
│   │   └── logo.png
│   ├── /components                 # Svelte components
│   │   ├── Header.svelte           # Header component
│   │   ├── Footer.svelte           # Footer component
│   │   └── Home.svelte             # Home component
│   ├── /lib                        # Utility libraries or helper functions
│   │   └── api.js                  # Example utility file
│   ├── App.svelte                  # Main application component
│   └── main.js                     # JavaScript entry point
├── package.json                    # Project dependencies and scripts
└── /api 
    └──  main.py                    # Main backend entry point

Additional Details:

• index.html: The main HTML file that serves the Svelte application.
• src folder: Contains all the source code for the project, including components, assets, and utilities.
• App.svelte: The main Svelte component that acts as the root of the application.
• main.js: The entry point JavaScript file that initializes the Svelte app, mounts it to the DOM, and handles the bundling.
• Components folder: Stores reusable Svelte components (like Header.svelte, Footer.svelte).
• Assets folder: Used for images, fonts, or other static files.
• Lib folder: Contains helper libraries or reusable utilities, such as API functions or other JS utilities.

Example Linkage in main.js:

import App from './App.svelte';

const app = new App({
    target: document.body
});

export default app;

Python flask backend setup

A test flask api endpoint that the frontend can access should be set up.

Acceptance Criteria:

• The project folder structure matches the one outlined above.
• All assets and components are properly separated in their respective folders.
• App.svelte and main.js are correctly linked to build and run the Svelte app.
• The structure follows Svelte best practices and supports future scalability as new components or assets are added.

This structure will help organize the Svelte-based project in a modular and scalable way, making it easier for team collaboration and future development.

[Ojani]

i replaced the difficulty from 3 to 2. It was a 3 to be honest, but I don't want to create a big point imbalance.