Maticas Tech app

This is the version 2 from the app of Maticas Tech, the initial one was parcialy built with Dart and Flutter, yet we decided that in order to be agile and take this faster to a product would be better to work on Typescript + React.

This App will contain capability for visualizing different ambient variables in one or different plots, so that any agricultor or agronomic engineer can get a better idea of the conditions the plants are exposed to.

Then after a bit more of development we expect to add the following features to the app:

1. Add custom valid or optimal intervals for the enviromental conditions, so that new more insight rich visualizations can be done.

2. Incorporate predictions with Maticas AI models, for the farmer to get to know how the temperature is expected to change up to the next 5h, and prepare in advance if any important action needs to be taken.

Folder Structure

Organizing our TypeScript and React project efficiently is crucial for maintainability and scalability. Let's clarify and propose a more structured approach to organizing our project.

Proposed Folder Structure

For larger projects, especially those involving multiple pages (views) and possibly a complex state management architecture, a more refined folder structure could significantly improve the project's organization. Here's a structure we might consider:

/public
  /assets
    /images
    /styles
/src
  /components
    /common
    /layout
    /ui
  /pages
    Home.tsx
    Login.tsx
    Signup.tsx
    Analytics.tsx
  /services
    authentication.service.ts
    data.service.ts
  /hooks
    useAuth.ts
    useDataFetch.ts
  /context
    AuthContext.tsx
    DataContext.tsx
  /utils
    helperFunctions.ts
  /types
    index.d.ts
  App.tsx
  index.tsx

Explanation

• /assets: Store static files like images, icons, and global stylesheets.

• /components: For reusable UI elements. This can be further subdivided as needed:

  • /common: For very generic components like buttons, inputs, or modals.
  • /layout: For layout components such as headers, footers, sidebars, and any layout wrappers.
  • /ui: For more specialized UI components that are still reusable but more specific than those in /common.

• /pages: Contains components that represent entire pages or views in your application. Each component in this folder typically corresponds to a route in your application.

• /services: Holds services or APIs for handling external communications, like fetching data from a server or handling authentication.

• /hooks: Custom React hooks for shared logic across components or pages.

• /context: For React context files, useful for global state management or deeply nested component communication.

• /utils: Utility functions and helpers that can be used across the application.

• /types: TypeScript type definitions and interfaces that are used across the application.

Benefits

• Clarity: This structure makes it clear where to find specific parts of the application, improving navigability for developers.

• Reusability: By separating UI components and hooks, you make it easier to reuse logic and UI elements across your application.

• Maintainability: Organized codebase helps in maintaining the application, especially as it grows in size and complexity.

• Scalability: This structure supports scaling, as new components, services, or pages can be added in their respective directories without cluttering the application.

This is just one way to organize a React + TypeScript project. The best structure depends on the project's size, complexity, and the team's preferences. It's also flexible; feel free to adjust it as your project evolves.

---

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list