Versions des dépendances

npm-package
v15.1.1

NextJs

npm-package
v19.0.0

React

npm-package
v3.4.1

Tailwindcss

npm-package
v4.24.11

NextAuth

npm-package
v5.6.3

Typescript

Le cockpit ridy.tn est construit avec Next.js, React 19, Tailwind CSS et TypeScript pour garantir des performances web et mobile.

Chaque module (org owner, chauffeur, passager, super admin) est personnalisable via les fichiers indiqués sur cette page.

Pour aller plus loin, une connaissance de NextAuth, de la structure App Router et de Tailwind facilitera vos extensions.

Structure du projet

Structure SaaS ridy.tn
  • |—

    packages
        • |—

          markdown
        • |—

          public
        • |—

          src

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          • |—

            app

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            • |—

              (site)(Contains all the pages)

              |

              |

              |

              |

              |

              |

              |

              |

              |

              |

              • |—

                (auth)

                |

                |

                • |

                  |—

                  signin
                • |

                  |—

                  signup
              • |—

                blog
              • |—

                contact
              • |—

                documentation
              • |—

                pricing
              • |—

                services
            • |—

              api

              |

              |

              • |

                |—

                auth
              • |

                |—

                contex
            • |—

              Context

              |

              • |

                |—

                authDialogContext.tsx

            • |—

              global.css
            • |—

              layout.tsx
            • |—

              not-found.tsx
            • |—

              page.tsx
          • |—

            components(All the Components of this template.)
          • |—

            styles
          • |—

            types
          • |—

            utils
        • |—

          next.config.mjs
        • |—

          postcss.config.mjs
        • |—

          package.json
        • |—

          tailwind.config.ts
        • |—

          tsconfig.json

Démarrage rapide

1. Prérequis

Installez la dernière version stable de Node.js pour compiler le workspace ridy.tn.

Environnement recommandé :
  • node js 20+
  • npm js 10+
2. Installation

Depuis la racine du projet, installez les dépendances (npm ou yarn).

1) Avec npm :

cd project-folder

npm install

2) Avec yarn :

cd project-folder

yarn install

3. Lancer le projet

Après installation, démarrez l'app pour travailler sur les modules Ridy.

npm run dev or yarn run dev

La commande lance un serveur local sur http://localhost:3000.

> nicktio_project@1.0.1 dev

> next dev

-Next.js 15.1.1

-Local: http://localhost:3000

4. Build / Deployment

Pour préparer votre mise en production (Vercel, Docker ou infra interne), générez le build :

npm run build or yarn build

Votre portail ridy.tn est prêt à être déployé.🥳

Configuration du projet

Couleurs

1. Palette principale
Modifiez les teintes ridy.tn dans /src/utils/extendedConfig.ts.

primary: "#2F73F2",danger: "#DC3545",danger_text: "#FF3C78",green: "#3CD278",grey: "#8E8E8E",muted: "#547593",midnight_text: "#102D47",border: "#DFEBFC",darkmode: "#08162B",heroBg: "#F3F9FD",darkHeroBg: "#121C2E",darkheader: "#141D2F",dark_border: "#253C50",foottext: "#668199",search: "#163858",dark_b: "#1B2C44",

2. Mode sombre
Ajustez les couleurs spécifiques au mode sombre dans le même fichier.

primary: "#2F73F2",darkmode: "#08162B",

Typographie

1. Changez la police globale dans src/app/layout.tsx.

import { DM_Sans } from "next/font/google";

const dmsans = DM_Sans({ subsets: ["latin"] });

Logo

1. Remplacez le logo depuis src/components/Layout/Header/Logo/index.tsx

<Link href="/" className="flex flex-col">

<span className="text-[28px] font-black text-primary">ridy</span>

<span className="text-[12px] text-muted uppercase">mobilité partagée</span>

</Link>

Remplacez les spans par vos propres SVG ou images si nécessaire.