Task Connect

Français

Task Connect

Task Connect est une plateforme web collaborative qui met en relation des particuliers avec des prestataires de services du quotidien (bricolage, ménage, jardinage, aide à domicile, etc.).
L'application permet de publier des tâches/missions, d'y répondre via des offres, de consulter des avis et de gérer les profils utilisateurs dans un environnement sécurisé.

Projet personnel réalisé en suivant une architecture MVC propre et modulaire.

Ce projet repose sur une stack moderne et une base de données relationnelle robuste avec des contraintes d’intégrité (clés étrangères, CHECK, ON DELETE CASCADE), permettant d’assurer la fiabilité des données et la scalabilité de l’application.

🔗 Découvrez le projet en ligne : www.taskconnect.fr

💬 Vos avis m'intéressent - n'hésitez pas à me faire part de vos retours ou suggestions !

Ce projet est basé sur le monorepo JS proposé par la Wild Code School (v7.1.7), pré-configuré avec des outils de qualité industrielle :

Concurrently : Exécution simultanée de plusieurs commandes dans un seul terminal
Husky : Exécution de commandes spécifiques déclenchées par des événements Git
Vite : Alternative performante à Create-React-App
Biome : Alternative à ESLint et Prettier pour la qualité du code
Supertest : Tests des serveurs HTTP en Node.js

Schéma visuel de l'architecture du projet (MVC)

sequenceDiagram
    box Web Client
    participant React as React
    participant Fetcher as Fetcher
    end
    box Web Server
    participant Express as Express
    participant Module as Module
    end
    box DB Server
    participant DB as MySQL Server
    end

    React-)Fetcher: event
    activate Fetcher
    Fetcher-)Express: requête (HTTP)
    activate Express
    Express-)Module: appel
    activate Module
    Module-)DB: requête SQL
    activate DB
    DB--)Module: données
    deactivate DB
    Module--)Express: json
    deactivate Module
    Express--)Fetcher: réponse HTTP
    deactivate Express
    Fetcher--)React: render
    deactivate Fetcher

Stack

Client : React + TypeScript + Vite
Serveur : Node.js + Express + MySQL
CSS3 : Styling avec CSS
Upload : Gestion d’image via Multer
Authentification sécurisée via JWT (cookie httpOnly + SameSite) et hashage argon2 (à implémenter bientôt)
Hébergement : Frontend sur Netlify, Backend (API & base de données) sur Railway

Fonctionnalités principales

Création, consultation, modification et suppression de tâches/tasks
Upload d’image lors de la création de tâches
Interface responsive adaptée aux écrans mobile et desktop
Authentification sécurisée avec gestion de session (à implémenter bientôt)
Système d’offres (un tasker peut répondre à une mission) (à implémenter bientôt)
Avis et notation (avec contraintes de validité et protections anti-abus) (à implémenter bientôt)
Accès restreint aux utilisateurs connectés (à implémenter bientôt)

Démarrer le projet

Utilisateurs Windows

Assurez-vous de lancer ces commandes dans un terminal Git pour éviter les problèmes de formats de nouvelles lignes :

git config --global core.eol lf
git config --global core.autocrlf false

Installation

Installez le plugin Biome dans VSCode et configurez-le

Cloner le dépôt :

git clone git@github.com:nadir-ammisaid/Task-Connect.git
cd task-connect

Installer les dépendances :
```
npm install
```

Configurer les fichiers .env :

Vous pouvez copier les fichiers .env.sample comme modèles (ne les supprimez pas)
client/.env
```
VITE_API_URL=http://localhost:3310/api
```

server/.env

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=motdepasse
DB_NAME=task_connect
JWT_SECRET=supersecretkey
FRONT_URL=http://localhost:5173

Lancer le projet :
```
npm run dev
```

Arborescence du projet (monorepo)

task-connect/
├── client/
│   ├── public/
│   └── src/
│       ├── assets/
│       ├── components/
│       ├── context/
│       ├── pages/
│       ├── services/
│       └── types/
│   ├── App.tsx
│   ├── main.tsx
│   ├── vite.config.ts
│   └── tsconfig.json
│
├── server/
│   ├── bin/
│   ├── database/
│   │   ├── fixtures/
│   │   ├── client.ts
│   │   └── schema.sql
│   ├── public/
│   │   ├── assets/
│   │   └── uploads/
│   ├── src/
│   │   ├── modules/
│   │   │   ├── task/
│   │   │   ├── user/
│   │   │   ├── offer/
│   │   │   ├── review/
│   │   │   └── category/
│   │   ├── types/
│   │   ├── app.ts
│   │   ├── main.ts
│   │   └── router.ts
│   ├── tests/
│   ├── jest.config.js
│   └── tsconfig.json

Routes principales de l'API

Méthode	Route	Description
GET	`/api/tasks`	Récupérer la liste des tâches
POST	`/api/tasks`	Créer une tâche (avec image)
GET	`/api/tasks/:id`	Détail d’une tâche
PUT	`/api/tasks/:id`	Modifier une tâche existante
DELETE	`/api/tasks/:id`	Supprimer une tâche existante
DELETE	`/api/tasks/:id`	Suppression d’une tâche
GET	`/api/categories`	Liste des catégories disponibles
---	---	---
bientôt:	---	---
---	---	---
POST	`/api/login`	Connexion utilisateur
GET	`/api/me`	Profil connecté
POST	`/api/offers`	Envoi d’une offre
GET	`/api/reviews/tasker/:id`	Avis pour un tasker
POST	`/api/reviews`	Création d’un avis

Variables d'environnement

client/.env

VITE_API_URL=http://localhost:3310/api

server/.env

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=root
DB_NAME=task_connect
JWT_SECRET=supersecretkey
CLIENT_URL=http://localhost:3000

Sécurité

Requêtes SQL préparées via mysql2/promise
Authentification JWT stockée en cookie httpOnly avec SameSite=Strict (à implémenter bientôt)
Hashage sécurisé des mots de passe avec argon2 (à implémenter bientôt)
Middleware verifyToken pour protéger les routes sensibles (à implémenter bientôt)
Vérifications côté client et serveur (à implémenter bientôt)

Auteur

Projet personnel développé en autonomie par Nadir AMMI SAID, pour approfondir mes compétences en développement full-stack.
🔗 Découvrez le projet en ligne : www.taskconnect.fr

💬 Vos avis m'intéressent - n'hésitez pas à me faire part de vos retours ou suggestions !
📩 Vous pouvez me contacter directement sur LinkedIn : https://www.linkedin.com/in/nadir-ammisaid/

Contribution

Pour contribuer au projet :

Fork le dépôt
Clone votre fork sur votre machine locale
Créez une nouvelle branche pour votre fonctionnalité (git switch -c feature/votre-fonctionnalite)
Commit vos modifications (git commit -m 'Ajout de fonctionnalité')
Push vers votre branche (git push origin feature/votre-fonctionnalite)
Créez une Pull Request sur le dépôt principal

Bonnes pratiques :

Exécutez npm run check avant de pousser vos modifications
Ajoutez des tests pour toute nouvelle fonctionnalité
Suivez les principes SOLID pour une architecture de code propre et maintenable

English

Task Connect

Task Connect is a collaborative web platform that connects individuals with everyday service providers (handyman, cleaning, gardening, home assistance, etc.).
The application allows users to post tasks/missions, respond to them via offers, consult reviews, and manage user profiles in a secure environment.

Personal project built following a clean and modular MVC architecture.

This project relies on a modern stack and a robust relational database with integrity constraints (foreign keys, CHECK, ON DELETE CASCADE), ensuring data reliability and application scalability.

🔗 Discover the project online: www.taskconnect.fr

💬 Your feedback matters - don't hesitate to share your thoughts or suggestions!

This project is based on the JS monorepo proposed by Wild Code School (v7.1.7), pre-configured with industrial quality tools:

Concurrently: Simultaneous execution of multiple commands in a single terminal
Husky: Execution of specific commands triggered by Git events
Vite: High-performance alternative to Create-React-App
Biome: Alternative to ESLint and Prettier for code quality
Supertest: Testing of HTTP servers in Node.js

Visual diagram of the project architecture (MVC)

sequenceDiagram
    box Web Client
    participant React as React
    participant Fetcher as Fetcher
    end
    box Web Server
    participant Express as Express
    participant Module as Module
    end
    box DB Server
    participant DB as MySQL Server
    end

    React-)Fetcher: event
    activate Fetcher
    Fetcher-)Express: requête (HTTP)
    activate Express
    Express-)Module: appel
    activate Module
    Module-)DB: requête SQL
    activate DB
    DB--)Module: données
    deactivate DB
    Module--)Express: json
    deactivate Module
    Express--)Fetcher: réponse HTTP
    deactivate Express
    Fetcher--)React: render
    deactivate Fetcher

Stack

Client: React + TypeScript + Vite
Server: Node.js + Express + MySQL
CSS3: Styling with CSS
Upload: Image management via Multer
Secure authentication via JWT (httpOnly cookie + SameSite) and argon2 hashing (to be implemented soon)
Hosting: Frontend on Netlify, Backend (API & database) on Railway

Main Features

Create, view, edit, and delete tasks
Image upload when creating tasks
Responsive interface adapted for mobile and desktop screens
Secure authentication with session management (to be implemented soon)
Offer system (a tasker can respond to a mission) (to be implemented soon)
Reviews and ratings (with validity constraints and anti-abuse protections) (to be implemented soon)
Restricted access for logged-in users (to be implemented soon)

Getting Started

Windows Users

Make sure to run these commands in a Git terminal to avoid line ending issues:

git config --global core.eol lf
git config --global core.autocrlf false

Installation

Install the Biome plugin in VSCode and configure it

Clone the repository:

git clone git@github.com:nadir-ammisaid/Task-Connect.git
cd task-connect

Install dependencies:
```
npm install
```

Configure .env files:

You can copy the .env.sample files as templates (do not delete them)
client/.env
```
VITE_API_URL=http://localhost:3310/api
```

server/.env

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=password
DB_NAME=task_connect
JWT_SECRET=supersecretkey
FRONT_URL=http://localhost:5173

Launch the project:
```
npm run dev
```

Arborescence du projet (monorepo)

task-connect/
├── client/
│   ├── public/
│   └── src/
│       ├── assets/
│       ├── components/
│       ├── context/
│       ├── pages/
│       ├── services/
│       └── types/
│   ├── App.tsx
│   ├── main.tsx
│   ├── vite.config.ts
│   └── tsconfig.json
│
├── server/
│   ├── bin/
│   ├── database/
│   │   ├── fixtures/
│   │   ├── client.ts
│   │   └── schema.sql
│   ├── public/
│   │   ├── assets/
│   │   └── uploads/
│   ├── src/
│   │   ├── modules/
│   │   │   ├── task/
│   │   │   ├── user/
│   │   │   ├── offer/
│   │   │   ├── review/
│   │   │   └── category/
│   │   ├── types/
│   │   ├── app.ts
│   │   ├── main.ts
│   │   └── router.ts
│   ├── tests/
│   ├── jest.config.js
│   └── tsconfig.json

Routes principales de l'API

Method	Route	Description
GET	`/api/tasks`	Get task list
POST	`/api/tasks`	Create a task (with image)
GET	`/api/tasks/:id`	Task details
PUT	`/api/tasks/:id`	Edit an existing task
DELETE	`/api/tasks/:id`	Delete an existing task
DELETE	`/api/tasks/:id`	Task deletion
GET	`/api/categories`	List of available categories
---	---	---
soon :	---	---
---	---	---
POST	`/api/login`	User login
GET	`/api/me`	Connected profile
POST	`/api/offers`	Submit an offer
GET	`/api/reviews/tasker/:id`	Reviews for a tasker
POST	`/api/reviews`	Create a review

Environment variables

client/.env

VITE_API_URL=http://localhost:3310/api

server/.env

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=root
DB_NAME=task_connect
JWT_SECRET=mySuperSecret
CLIENT_URL=http://localhost:3000

Sécurité

Prepared SQL queries via mysql2/promise
JWT authentication stored in httpOnly cookie with SameSite=Strict (to be implemented soon)
Secure password hashing with argon2 (to be implemented soon)
verifyToken middleware to protect sensitive routes (to be implemented soon)
Client and server-side validations (to be implemented soon)

Author

Personal project independently developed by Nadir AMMI SAID to deepen my full-stack development skills.
🔗 Discover the project online: www.taskconnect.fr

💬 Your feedback matters - don't hesitate to share your thoughts or suggestions!
📩 You can contact me directly on LinkedIn: https://www.linkedin.com/in/nadir-ammisaid/

Contribution

To contribute to the project:

Fork the repository
Clone your fork to your local machine
Create a new branch for your feature (git switch -c feature/your-feature)
Commit your changes (git commit -m 'Add feature')
Push to your branch (git push origin feature/your-feature)
Create a Pull Request on the main repository

Best practices:

Run npm run check before pushing your changes
Add tests for any new feature
Follow SOLID principles for clean and maintainable code architecture

Name		Name	Last commit message	Last commit date
Latest commit History 182 Commits
.github/workflows		.github/workflows
.husky		.husky
bin		bin
client		client
server		server
.gitignore		.gitignore
.validate-branch-namerc		.validate-branch-namerc
Dockerfile		Dockerfile
LICENSE.md		LICENSE.md
README.md		README.md
biome.json		biome.json
commitlint.config.js		commitlint.config.js
database-setup.sh		database-setup.sh
docker-compose.prod.yml		docker-compose.prod.yml
docker-compose.yml		docker-compose.yml
manifest.json		manifest.json
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Task Connect

Schéma visuel de l'architecture du projet (MVC)

Stack

Fonctionnalités principales

Démarrer le projet

Utilisateurs Windows

Installation

Arborescence du projet (monorepo)

Routes principales de l'API

Variables d'environnement

client/.env

server/.env

Sécurité

Auteur

Contribution

Task Connect

Visual diagram of the project architecture (MVC)

Stack

Main Features

Getting Started

Windows Users

Installation

Arborescence du projet (monorepo)

Routes principales de l'API

Environment variables

client/.env

server/.env

Sécurité

Author

Contribution

About

Uh oh!

Releases

Packages

Languages

License

nadir-ammisaid/Task-Connect

Folders and files

Latest commit

History

Repository files navigation

Task Connect

Schéma visuel de l'architecture du projet (MVC)

Stack

Fonctionnalités principales

Démarrer le projet

Utilisateurs Windows

Installation

Arborescence du projet (monorepo)

Routes principales de l'API

Variables d'environnement

client/.env

server/.env

Sécurité

Auteur

Contribution

Task Connect

Visual diagram of the project architecture (MVC)

Stack

Main Features

Getting Started

Windows Users

Installation

Arborescence du projet (monorepo)

Routes principales de l'API

Environment variables

client/.env

server/.env

Sécurité

Author

Contribution

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages