How to make Trello system clone whit React, Firebase, Redux.

src 
  └──app
     └── components 
        ├── Home.js
        ├── InProject.js
        ├── ShowCards.js
  └──store
     ├── store.js
     ├── ProjectSlice.js

   ├── app(router).js

🤘 Redux 
    "@reduxjs/toolkit": "^1.6.2"
    "react-redux": "^7.2.6"

🔥 Firebase
    "firebase": "^9.5.0"
    "react-firebase-hooks": "^4.0.1"

⬅⬇➡ Router 
"react-router": "^5.2.1"
"react-router-dom": "^5.3.0"

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import home from './Home'
import project from './InProject'
<Router>
         <Switch>
          <Route exact path="/" component={home} />
          <Route exact path="/project" component={project} />
        </Switch>
        </div>
</Router>

const inputTitleProject = useRef(""); 

    const db = firebase.firestore();
    const createProject = useCallback(async event => {
        event.preventDefault();
        if (inputTitle.current.value !== "") {
            db.collection("project").add({
              timestamp: firebase.firestore.FieldValue.serverTimestamp(),
              titleProject: inputTitle.current.value,
            }); 
        }
    })

    return (
/* the onSubmit will execute the "createProject" function. */    
   <form onSubmit={createProject}>
    <input
    ref={inputTitleProject}
    placeholder="Your title project"
    >
    <button type="submit">
    Create the project !
    </button>
    </form>
    )

import { useCollection } from "react-firebase-hooks/firestore"
import ShowProject from './ShowProject.js'
    const db = firebase.firestore();
    const [listproject] = useCollection(
      db
      .collection("project")
      );  

return( 

/* Don't forget to keep the key and the id, it will be important for the future. */

       {projectlist?.docs.map((doc) => (

  <ShowProject
  key={doc.id}
  id={doc.id}
  titleProject={doc.data().titleProject}
  />
))}
)

function ShowProject({id, titleProject}) {

return (
<div>
<p>{titleProject}</p>
</div>
)

/* We import the configureStore from redux */
import { configureStore } from "@reduxjs/toolkit";
import projectSlice from "./ProjectSlice";
export const store = configureStore({
  reducer: {
    project: projectSlice,
  },
});

import { createSlice } from "@reduxjs/toolkit";

/* We define the initial state */
const initialState = {
  projectId: null,
};

export const projectSlice = createSlice({
  name: "project",
  initialState,
  reducers: {
    setProject: (state, action) => {
      state.projectId = action.payload.projectId;
      state.projectName = action.payload.projectName;
    },
  },
});

export const { setProjectInfo } = projectSlice.actions;

export const selectProjectId = (state) => state.project.projectId;
export const selectProjectName = (state) => state.project.projectName;

export default projectSlice.reducer;

/* We import our redux tools */

import { Provider } from "react-redux"
import { store } from "./store/Store"

/* We add a provider */

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

function ShowProject({id, title, name, photoURL}) {
 const setProject = () => {
        dispatch(
          setProjectInfo({
            projectId: id,
          })
        );

        history.push(`/project/{$id}`);
      };
return (

/* We modify our div, and when we click on it, it executes the 'setProject' function
We also define the cursor as a pointer
*/

<div onClick={setProject} style={{cursor: 'pointer'}}>
<p> {title} </p>
</div>
)

/* You just add these two little lines.
We can  put the id in the router. When it is on the url /project/{id}/, it will display the component 'InProject.js'
*/

import InProject from './InProject.js'
return ( 
          <Route exact path="/project/:id" component={InProject} />
)

import { useCollection } from "react-firebase-hooks/firestore"
import { selectProjectId } from  './store/ProjectSlice.js'
import { useSelector } from "react-redux";

    const inputTitleCard = useRef(""); 
    const db = firebase.firestore();
    const projectId  = useSelector(postId);
    const createCard = useCallback(async event => {
        event.preventDefault();
        if (inputTitle.current.value !== "") {
            db.collection("project").doc(projectId).collecton("card").add({
              timestamp: firebase.firestore.FieldValue.serverTimestamp(),
              titleProject: inputTitle.current.value,
            }); 
        }
    })

    return (
/* the onSubmit will execute the "createCard" function. */    
   <form onSubmit={createCard}>
    <input
    ref={inputTitleCard}
    placeholder="Title of your card"
    >
    <button type="submit">
    Create the Card !
    </button>
    </form>
    )

import { useCollection } from "react-firebase-hooks/firestore"
    const db = firebase.firestore();
    const [listcard] = useCollection(
      db
      .collection("project")
      .doc(projectId)
      .collection("card")
      );  

return( 

         {frontmessagez?.docs.map((doc) => {
         const { titleCard} = doc.data()
       return (            
<>
<div>
   <p>  {titleCard} </p>
</div>
</>

  );
})}