caedes/sales-web-app

Sales Web App

Created and maintained by the mega poerful team: Referential Canal de Vente

---

Getting Started

Install dependencies:

yarn

Run the server:

yarn dev

Maybe you'll want a dev API:

yarn dev:api

Develop your feature. 👩🏼‍💻

Test it!

yarn test

Commit your changes:

yarn commit

Enjoy!🎉

Design

Homepage

Product Slug

Favorites

Powered by React + 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

Folder Structure

Designers talk about screen, developers tend to use router. We will use a naming nomenclature as follow:

/src
    /ds                             # Atomic Design approach
       /atoms
            index.js                # Should only be use as an indexation file
            /Price                  # Component to be reused
    /home
        /HomePage
            index.js                # The indexation file
            HomePage.jsx            # The component
            HomePage.test.jsx       # Test the component
            styles.css              # The CSS file for HomePage
            useNews.js              # A hook that it only use once in HomePage
            useNews.test.js         # The test of the hook
    /contacts
        /ContactsPage
        /ContactPage
    /counters
        /CountersPage
    /hoc
        index.js                    # Should only be use as an indexation file
        /withRow
    /hooks
        index.js                    # Should only be use as an indexation file
        /useCounter

Import Aliases

We use Vite import aliases on this app, check the vite.config.js.

Please do NOT use a global @ for all our `/src`` subfolders, it will bloated all the reative import interest.

Requests

To handle all our requests we use a proxy over Axios named salesHttpClient.

And of course to add/manipulate the response on our components we use ReactQuery.

Project Managament Triangle

Simplified.

• Scope + : Cost +
• Scope - : Time -
• Cost - : Scope -
• Cost + : Time +
• Time - : Scope -
• Time + : Scope +