🔥 TS / REACT / TAILWIND / CYPRESS 🔥

Homepage

---

Authentification

---

Shop Page

---

Cart

---

Unit Test

---

React Router Dom V6

• Routes

    <Routes>
        <Route path="*" element={<NotFound />} />
        <Route path="check-email" element={<CheckEmail />} />
        <Route path="forgot-password" element={<ForgotPassword />} />
        <Route path="/" element={<PrivateRoute component={Users}/>} />
    </Routes>

• UseNavigate

    const navigate = useNavigate();
    <IconButton size="small" onClick={() => navigate(edit)}>

• Navigate

    return !isObject ? <Component /> : <Navigate to="/" />

100% Safe Code with type

    export type Role = 'user' | 'admin' | 'pro'

   export type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'

    export type Header = {
        Authorization?: string,
        jwtToken?: string,
        "Content-Type"?: string,
    }

    export type User = {
        id : UUID,
        firstname: string,
        lastname: string,
        created_at: Date,
        Email: string,
        Role: Role
    }

Props is strongly typed

    const resetPassword = async ({email, password, code, confirm_password}:ResetPasswordProps):Promise<SuccessResult> => {}

Variable are safe too

    const [data, setData] = useState<DisplayProduct[] | null>(null);
    const [order, setOrder] = useState<'asc' | 'desc'>('asc');
    const [orderBy, setOrderBy] = useState<string>('name');
    const [rowsPerPage, setRowsPerPage] = useState<5 | 10 | 25>(10);

For more detail about React:

• Starter Pack React JS

For more detail about Golang:

• Starter Pack Golang