QuickFlow is a collaborative decision-making platform designed to help organizations manage ideas and votes. Users can submit ideas, comment, vote, and follow the status of various proposals within their organization.
This project is built using the "Wild Code School" JS Fullstack Template, following a Monorepo structure containing both client and server applications.
- Framework: React (Vite)
- Styling: Tailwind CSS
- State/Routing: React Router DOM, React Context
- HTTP Client: Axios
- Form Handling: React Hook Form
- Runtime: Node.js
- Framework: Express.js
- Database: MySQL (using
mysql2driver) - Authentication: JWT (
jsonwebtoken) + Argon2 hashing - File Uploads: Multer
Install dependencies for both frontend and backend from the root directory:
npm installCreate .env files in both backend and frontend directories based on the samples:
backend/.env(frombackend/.env.sample) - Configure DB credentials (DB_HOST,DB_USER,DB_PASSWORD,DB_NAME=quickflow_db) andAPP_PORT.frontend/.env(fromfrontend/.env.sample) - ConfigureVITE_BACKEND_URL.
Ensure your MySQL server is running, then execute the migration script to create the schema and seed data:
npm run migrateNote: This runs backend/migrate.js, which executes backend/database.sql.
Start both backend and frontend concurrently in development mode:
npm run dev- Frontend: http://localhost:3000 (default Vite port)
- Backend: http://localhost:5000 (or as defined in .env)
npm run dev-front: Start only frontend.npm run dev-back: Start only backend.
backend/: Server-side application code.frontend/: Client-side React application.package.json: Orchestration scripts for the monorepo.
app.js: Express application configuration.controllers/: Request handlers (e.g.,idee.controller.js,user.controller.js).models/: Database interaction layer (Managers).routes/: API route definitions.auth/: Authentication middleware.
pages/: Main views (e.g.,Dashboard.jsx,NewIdea.jsx).components/: Reusable UI components.contexts/: React Context providers (UserContext,OrgaContext).services/: API calls and utilities.
- user: Users with hashed passwords and profile info.
- organisation: Organizations managing ideas.
- idee: The core entity (Ideas) with status, content, and dates.
- vote / like_idee: Tracking user engagement.
- commentaire: Discussions on ideas.
- role: User roles within the system (admin, decisionnaire, etc.).
- Linting: The project uses ESLint and Prettier.
- Run
npm run lintto check code quality. - Run
npm run fixto auto-fix issues.
- Run
- Commit Hooks: Husky is configured to run checks on commit.