├── .env
├── code.png
├── src
    ├── utls
    │   └── currencyFomrmatter.js
    ├── index.css
    ├── components
    │   ├── Footer.js
    │   ├── Navbar.js
    │   ├── ProjectDetails.js
    │   └── ProjectForm.js
    ├── hooks
    │   ├── useAuthContext.js
    │   ├── useProjectsContext.js
    │   ├── useLogout.js
    │   ├── useLogin.js
    │   └── useSignup.js
    ├── index.js
    ├── context
    │   ├── AuthContext.js
    │   └── ProjectContext.js
    ├── App.js
    └── pages
    │   ├── Home.js
    │   ├── Login.js
    │   └── Signup.js
├── tailwind.config.js
├── .gitignore
├── public
    └── index.html
├── package.json
└── README.md


/.env:
--------------------------------------------------------------------------------
1 | REACT_APP_BASE_URL=https://proxima-csb4.onrender.com


--------------------------------------------------------------------------------
/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sadrilamin1999/proxima-client/HEAD/code.png


--------------------------------------------------------------------------------
/src/utls/currencyFomrmatter.js:
--------------------------------------------------------------------------------
1 | export const currencyFormatter = (amount) => {
2 |   return amount?.toLocaleString("en-US", {
3 |     style: "currency",
4 |     currency: "USD",
5 |   });
6 | };
7 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 | 
6 | /* font-family: 'Inter', sans-serif; */
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
 4 |   theme: {
 5 |     extend: {
 6 |       fontFamily: {
 7 |         sans: ["Inter, sans-serif"],
 8 |       },
 9 |     },
10 |   },
11 |   plugins: [],
12 | };
13 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | const Footer = () => {
 2 |   return (
 3 |     <div className="border-t border-stone-400/40">
 4 |       <div className="footer container mx-auto h-20 flex items-center justify-center">
 5 |         <p>&copy;{new Date().getFullYear()} Proxima, All Rights Reserved</p>
 6 |       </div>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default Footer;
12 | 


--------------------------------------------------------------------------------
/src/hooks/useAuthContext.js:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { AuthContext } from "../context/AuthContext";
 3 | 
 4 | export const useAuthContext = () => {
 5 |   const context = useContext(AuthContext);
 6 | 
 7 |   if (!context) {
 8 |     throw new Error(
 9 |       "You must call useAuthContext inside a AuthContextProvider"
10 |     );
11 |   }
12 | 
13 |   return context;
14 | };
15 | 


--------------------------------------------------------------------------------
/src/hooks/useProjectsContext.js:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { ProjectContext } from "../context/ProjectContext";
 3 | 
 4 | export const useProjectsContext = () => {
 5 |   const context = useContext(ProjectContext);
 6 | 
 7 |   if (!context) {
 8 |     throw new Error(
 9 |       "You must call useProjectsContext inside a ProjectContextProvider"
10 |     );
11 |   }
12 | 
13 |   return context;
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <meta
 8 |       name="description"
 9 |       content="Web site created using create-react-app"
10 |     />
11 | 
12 |     <title>proxima</title>
13 |   </head>
14 |   <body>
15 |     <noscript>You need to enable JavaScript to run this app.</noscript>
16 |     <div id="root"></div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/hooks/useLogout.js:
--------------------------------------------------------------------------------
 1 | import { useAuthContext } from "./useAuthContext";
 2 | import { useProjectsContext } from "./useProjectsContext";
 3 | 
 4 | export const useLogout = () => {
 5 |   const { dispatch: logoutDispatch } = useAuthContext();
 6 |   const { dispatch: projectsDispatch } = useProjectsContext();
 7 | 
 8 |   const logout = () => {
 9 |     // clear ls
10 |     localStorage.removeItem("user");
11 | 
12 |     // dispatch logout
13 |     logoutDispatch({ type: "LOGOUT" });
14 |     projectsDispatch({ type: "SET_PROJECTS", payload: [] });
15 |   };
16 | 
17 |   return { logout };
18 | };
19 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | import { BrowserRouter } from "react-router-dom";
 6 | import { ProjectContextProvider } from "./context/ProjectContext";
 7 | import { AuthContextProvider } from "./context/AuthContext";
 8 | 
 9 | const root = ReactDOM.createRoot(document.getElementById("root"));
10 | root.render(
11 |   <React.StrictMode>
12 |     <BrowserRouter>
13 |       <ProjectContextProvider>
14 |         <AuthContextProvider>
15 |           <App />
16 |         </AuthContextProvider>
17 |       </ProjectContextProvider>
18 |     </BrowserRouter>
19 |   </React.StrictMode>
20 | );
21 | 


--------------------------------------------------------------------------------
/src/context/AuthContext.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useReducer } from "react";
 2 | 
 3 | const initialState = {
 4 |   user: localStorage.getItem("user")
 5 |     ? JSON.parse(localStorage.getItem("user"))
 6 |     : null,
 7 | };
 8 | 
 9 | export const authReducer = (state, action) => {
10 |   switch (action.type) {
11 |     case "LOGIN":
12 |       return {
13 |         ...state,
14 |         user: action.payload,
15 |       };
16 |     case "LOGOUT":
17 |       return {
18 |         ...state,
19 |         user: null,
20 |       };
21 |     default:
22 |       return state;
23 |   }
24 | };
25 | 
26 | export const AuthContext = createContext();
27 | 
28 | export const AuthContextProvider = ({ children }) => {
29 |   const [state, dispatch] = useReducer(authReducer, initialState);
30 | 
31 |   return (
32 |     <AuthContext.Provider value={{ ...state, dispatch }}>
33 |       {children}
34 |     </AuthContext.Provider>
35 |   );
36 | };
37 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { Routes, Route, Navigate } from "react-router-dom";
 2 | import Navbar from "./components/Navbar";
 3 | import Footer from "./components/Footer";
 4 | import Home from "./pages/Home";
 5 | import Login from "./pages/Login";
 6 | import Signup from "./pages/Signup";
 7 | import { useAuthContext } from "./hooks/useAuthContext";
 8 | 
 9 | function App() {
10 |   const { user } = useAuthContext();
11 |   return (
12 |     <div className="app bg-white text-gray-600 min-h-screen">
13 |       <Navbar />
14 |       <Routes>
15 |         <Route path="/" element={user ? <Home /> : <Navigate to="/login" />} />
16 |         <Route
17 |           path="/login"
18 |           element={!user ? <Login /> : <Navigate to="/" />}
19 |         />
20 |         <Route
21 |           path="/signup"
22 |           element={!user ? <Signup /> : <Navigate to="/" />}
23 |         />
24 |         <Route path="*" element={<Navigate to="/" />} />
25 |       </Routes>
26 |       <Footer />
27 |     </div>
28 |   );
29 | }
30 | 
31 | export default App;
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "moment": "^2.29.4",
10 |     "react": "^18.2.0",
11 |     "react-dom": "^18.2.0",
12 |     "react-router-dom": "^6.8.1",
13 |     "react-scripts": "5.0.1",
14 |     "web-vitals": "^2.1.4"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   },
40 |   "devDependencies": {
41 |     "tailwindcss": "^3.2.7"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/hooks/useLogin.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useAuthContext } from "./useAuthContext";
 3 | 
 4 | export const useLogin = () => {
 5 |   const [error, setError] = useState(null);
 6 |   const [loading, setLoading] = useState(false);
 7 | 
 8 |   const { dispatch } = useAuthContext();
 9 | 
10 |   const login = async (email, password) => {
11 |     setLoading(true);
12 |     setError(null);
13 | 
14 |     const res = await fetch(
15 |       `${process.env.REACT_APP_BASE_URL}/api/user/login`,
16 |       {
17 |         method: "POST",
18 |         headers: {
19 |           "Content-Type": "application/json",
20 |         },
21 |         body: JSON.stringify({ email, password }),
22 |       }
23 |     );
24 | 
25 |     const json = await res.json();
26 |     console.log(json);
27 |     // res.ok === false
28 |     if (!res.ok) {
29 |       setLoading(false);
30 |       setError(json.error);
31 |     }
32 | 
33 |     // res.ok === true
34 |     if (res.ok) {
35 |       // update auth context
36 |       dispatch({ type: "LOGIN", payload: json });
37 |       // save user to local storage
38 |       localStorage.setItem("user", JSON.stringify(json));
39 | 
40 |       setLoading(false);
41 |     }
42 |   };
43 | 
44 |   return { login, error, loading };
45 | };
46 | 


--------------------------------------------------------------------------------
/src/hooks/useSignup.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useAuthContext } from "./useAuthContext";
 3 | 
 4 | export const useSignup = () => {
 5 |   const [error, setError] = useState(null);
 6 |   const [loading, setLoading] = useState(false);
 7 | 
 8 |   const { dispatch } = useAuthContext();
 9 | 
10 |   const signup = async (email, password) => {
11 |     setLoading(true);
12 |     setError(null);
13 | 
14 |     const res = await fetch(
15 |       `${process.env.REACT_APP_BASE_URL}/api/user/signup`,
16 |       {
17 |         method: "POST",
18 |         headers: {
19 |           "Content-Type": "application/json",
20 |         },
21 |         body: JSON.stringify({ email, password }),
22 |       }
23 |     );
24 | 
25 |     const json = await res.json();
26 |     console.log(json);
27 |     // res.ok === false
28 |     if (!res.ok) {
29 |       setLoading(false);
30 |       setError(json.error);
31 |     }
32 | 
33 |     // res.ok === true
34 |     if (res.ok) {
35 |       // update auth context
36 |       dispatch({ type: "LOGIN", payload: json });
37 |       // save user to local storage
38 |       localStorage.setItem("user", JSON.stringify(json));
39 | 
40 |       setLoading(false);
41 |     }
42 |   };
43 | 
44 |   return { signup, error, loading };
45 | };
46 | 


--------------------------------------------------------------------------------
/src/context/ProjectContext.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useReducer } from "react";
 2 | 
 3 | const initialState = {
 4 |   projects: [],
 5 | };
 6 | 
 7 | export const projectReducer = (state, action) => {
 8 |   switch (action.type) {
 9 |     case "SET_PROJECTS":
10 |       return {
11 |         projects: action.payload,
12 |       };
13 |     case "CREATE_PROJECTS":
14 |       return {
15 |         projects: [action.payload, ...state.projects],
16 |       };
17 |     case "DELETE_PROJECT":
18 |       return {
19 |         ...state,
20 |         projects: state.projects.filter(
21 |           (project) => project._id !== action.payload._id
22 |         ),
23 |       };
24 |     case "UPDATE_PROJECT":
25 |       const [existingProject] = state.projects.filter(
26 |         (project) => project._id === action.payload._id
27 |       );
28 |       return {
29 |         ...state,
30 |         projects: [
31 |           action.payload,
32 |           ...state.projects.filter(
33 |             (project) => project._id !== existingProject._id
34 |           ),
35 |         ],
36 |       };
37 |     default:
38 |       return state;
39 |   }
40 | };
41 | export const ProjectContext = createContext();
42 | 
43 | export const ProjectContextProvider = ({ children }) => {
44 |   const [state, dispatch] = useReducer(projectReducer, initialState);
45 | 
46 |   return (
47 |     <ProjectContext.Provider value={{ ...state, dispatch }}>
48 |       {children}
49 |     </ProjectContext.Provider>
50 |   );
51 | };
52 | 


--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import ProjectDetails from "../components/ProjectDetails";
 3 | import ProjectForm from "../components/ProjectForm";
 4 | import { useProjectsContext } from "../hooks/useProjectsContext";
 5 | import { useAuthContext } from "../hooks/useAuthContext";
 6 | 
 7 | const Home = () => {
 8 |   const { projects, dispatch } = useProjectsContext();
 9 |   const { user } = useAuthContext();
10 |   useEffect(() => {
11 |     const getAllProjects = async () => {
12 |       const res = await fetch(
13 |         `${process.env.REACT_APP_BASE_URL}/api/projects`,
14 |         {
15 |           headers: {
16 |             Authorization: `Bearer ${user.token}`,
17 |           },
18 |         }
19 |       );
20 |       const json = await res.json();
21 | 
22 |       if (res.ok) {
23 |         dispatch({ type: "SET_PROJECTS", payload: json });
24 |       }
25 |     };
26 |     if (user) {
27 |       getAllProjects();
28 |     }
29 |   }, [dispatch, user]);
30 |   return (
31 |     <div className="home container mx-auto py-20 grid grid-cols-3 gap-10">
32 |       <div className="left col-span-2">
33 |         <h2 className="text-4xl font-medium text-gray-600 mb-10">
34 |           {projects.length < 1 ? "No projects" : "All Projects"}
35 |         </h2>
36 |         <div className="projects-wrapper flex gap-10 flex-wrap">
37 |           {projects &&
38 |             projects.map((project) => (
39 |               <ProjectDetails key={project._id} project={project} />
40 |             ))}
41 |         </div>
42 |       </div>
43 |       <ProjectForm />
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default Home;
49 | 


--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import { useAuthContext } from "../hooks/useAuthContext";
 3 | import { useLogout } from "../hooks/useLogout";
 4 | 
 5 | const Navbar = () => {
 6 |   const { user } = useAuthContext();
 7 | 
 8 |   const { logout } = useLogout();
 9 | 
10 |   const handleLogout = () => {
11 |     logout();
12 |   };
13 |   return (
14 |     <div className="border-b border-stone-400/40 backdrop-blur-2xl">
15 |       <div className="navbar container mx-auto h-20 flex items-center justify-between">
16 |         <Link
17 |           to="/"
18 |           className="logo text-2xl text-blue-900 font-semibold tracking-wide"
19 |         >
20 |           Proxima
21 |         </Link>
22 |         <nav className="flex gap-5">
23 |           {!user && (
24 |             <div className="flex gap-5">
25 |               <Link to="login" className="hover:text-sky-400 duration-300">
26 |                 Login
27 |               </Link>
28 |               <Link to="signup" className="hover:text-sky-400 duration-300">
29 |                 Signup
30 |               </Link>
31 |             </div>
32 |           )}
33 |           {user && (
34 |             <div className="flex gap-5 items-center">
35 |               <span>{user.email}</span>
36 |               <button
37 |                 onClick={handleLogout}
38 |                 type="submit"
39 |                 className="bg-red-600 text-rose-50 py-3 px-5 rounded-lg hover:bg-red-600/90 duration-300 tracking-wide"
40 |               >
41 |                 Logout
42 |               </button>
43 |             </div>
44 |           )}
45 |         </nav>
46 |       </div>
47 |     </div>
48 |   );
49 | };
50 | 
51 | export default Navbar;
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Proxima - Project Management Web Application
 2 | Proxima is a web application built for project managers to efficiently plan, execute and monitor projects. It provides a user-friendly interface that simplifies project management tasks such as task assignment, progress tracking, and deadline setting. This application is built using React, Node.js, Express, MongoDB, and Tailwind CSS.
 3 | 
 4 | ## Features
 5 | - Effortlessly manage projects: Create, update,  and delete, projects quickly and easily using the user-friendly interface.
 6 | = Robust security features: The app features highly secure JWT authentication and frontend route protection, ensuring that your data is always safe and secure.
 7 | = User-specific project views: Users can only see the projects they have created, ensuring that project information is kept private and secure.
 8 | = Intuitive and streamlined UI: The app’s sleek and intuitive user interface makes managing projects a breeze.
 9 | 
10 | 
11 | ## Tools
12 | - React
13 | - Node.js
14 | - Express
15 | - MongoDB
16 | - Tailwind CSS
17 | - Moment.js
18 | - Mongoose
19 | - JSON Web Token
20 | - CORS
21 | - Bcrypt
22 | - Validator
23 | 
24 | ## Installation
25 | 1. Clone the repository: git clone https://github.com/yourusername/proxima.git
26 | 2. Navigate to the project directory: `cd proxima-client`
27 | 3. Install dependencies:`npm install` 
28 | 4. Start the application:`npm start`
29 | 
30 | ## Conclusion
31 | Proxima is an efficient and user-friendly project management web application. Its features such as user authentication, task management, and progress tracking make it an essential tool for project managers. The application is built using modern web technologies such as React, Node.js, Express, and MongoDB. With its intuitive user interface and features, it provides an optimal user experience for project management.
32 | 


--------------------------------------------------------------------------------
/src/pages/Login.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useLogin } from "../hooks/useLogin.js";
 3 | 
 4 | const Login = () => {
 5 |   const [email, setEmail] = useState("");
 6 |   const [password, setPassword] = useState("");
 7 | 
 8 |   const { login, error, loading } = useLogin();
 9 | 
10 |   const handleLogin = async (e) => {
11 |     e.preventDefault();
12 | 
13 |     // login user
14 |     await login(email, password);
15 |   };
16 |   return (
17 |     <form
18 |       onSubmit={handleLogin}
19 |       className="login-form flex flex-col gap-5 py-20 mx-auto max-w-sm h-screen"
20 |     >
21 |       <h2 className="text-4xl font-medium text-gray-600 mb-10">Login</h2>
22 | 
23 |       <div className="form-control flex flex-col gap-2">
24 |         <label
25 |           htmlFor="email"
26 |           className="cursor-pointer hover:text-sky-600 duration-300"
27 |         >
28 |           Email address
29 |         </label>
30 |         <input
31 |           type="email"
32 |           id="email"
33 |           placeholder="hello@react.dev"
34 |           value={email}
35 |           onChange={(e) => setEmail(e.target.value)}
36 |           className="bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300"
37 |         />
38 |       </div>
39 | 
40 |       <div className="form-control flex flex-col gap-2">
41 |         <label
42 |           htmlFor="password"
43 |           className="cursor-pointer hover:text-sky-400 duration-300"
44 |         >
45 |           Password
46 |         </label>
47 |         <input
48 |           type="password"
49 |           id="password"
50 |           placeholder="Enter your password"
51 |           value={password}
52 |           onChange={(e) => setPassword(e.target.value)}
53 |           className="bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300"
54 |         />
55 |       </div>
56 | 
57 |       <button
58 |         disabled={loading}
59 |         type="submit"
60 |         className="bg-blue-700 text-blue-50  py-3 rounded-md hover:bg-blue-700/90 duration-300 mt-3 tracking-wide font-semibold"
61 |       >
62 |         Log in
63 |       </button>
64 | 
65 |       {error && (
66 |         <p className="bg-rose-500/20 text-rose-500 border border-rose-700 p-2 rounded-md">
67 |           {error}
68 |         </p>
69 |       )}
70 |     </form>
71 |   );
72 | };
73 | 
74 | export default Login;
75 | 


--------------------------------------------------------------------------------
/src/pages/Signup.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useSignup } from "../hooks/useSignup";
 3 | 
 4 | const Signup = () => {
 5 |   const [email, setEmail] = useState("");
 6 |   const [password, setPassword] = useState("");
 7 | 
 8 |   const { signup, error, loading } = useSignup();
 9 | 
10 |   const handleSignup = async (e) => {
11 |     e.preventDefault();
12 | 
13 |     // signup user
14 |     await signup(email, password);
15 |   };
16 |   return (
17 |     <form
18 |       onSubmit={handleSignup}
19 |       className="signup-form flex flex-col gap-5 py-20 mx-auto max-w-sm h-screen"
20 |     >
21 |       <h2 className="text-4xl font-medium text-gray-600 mb-10">Signup</h2>
22 | 
23 |       <div className="form-control flex flex-col gap-2">
24 |         <label
25 |           htmlFor="email"
26 |           className="cursor-pointer hover:text-sky-600 duration-300"
27 |         >
28 |           Email address
29 |         </label>
30 |         <input
31 |           type="email"
32 |           id="email"
33 |           placeholder="hello@react.dev"
34 |           value={email}
35 |           onChange={(e) => setEmail(e.target.value)}
36 |           className="bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300"
37 |         />
38 |       </div>
39 | 
40 |       <div className="form-control flex flex-col gap-2">
41 |         <label
42 |           htmlFor="password"
43 |           className="cursor-pointer hover:text-sky-400 duration-300"
44 |         >
45 |           Password
46 |         </label>
47 |         <input
48 |           type="password"
49 |           id="password"
50 |           placeholder="Enter your password"
51 |           value={password}
52 |           onChange={(e) => setPassword(e.target.value)}
53 |           className="bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300"
54 |         />
55 |       </div>
56 | 
57 |       <button
58 |         type="submit"
59 |         disabled={loading}
60 |         className="bg-blue-700 text-blue-50  py-3 rounded-md hover:bg-blue-700/90 duration-300 mt-3 tracking-wide font-semibold"
61 |       >
62 |         Sign up
63 |       </button>
64 |       {error && (
65 |         <p className="bg-rose-500/20 text-rose-500 border border-rose-700 p-2 rounded-md">
66 |           {error}
67 |         </p>
68 |       )}
69 |     </form>
70 |   );
71 | };
72 | 
73 | export default Signup;
74 | 


--------------------------------------------------------------------------------
/src/components/ProjectDetails.js:
--------------------------------------------------------------------------------
  1 | import { currencyFormatter } from "../utls/currencyFomrmatter";
  2 | import { useProjectsContext } from "../hooks/useProjectsContext";
  3 | import { useAuthContext } from "../hooks/useAuthContext";
  4 | import moment from "moment";
  5 | import { useState } from "react";
  6 | import ProjectForm from "./ProjectForm";
  7 | 
  8 | const ProjectDetails = ({ project }) => {
  9 |   const [isModalOpen, setIsModalOpen] = useState(false);
 10 |   const [isOverlayOpen, setIsOverlayOpen] = useState(false);
 11 |   const { dispatch } = useProjectsContext();
 12 |   const { user } = useAuthContext();
 13 | 
 14 |   const handleDelete = async () => {
 15 |     if (!user) {
 16 |       return;
 17 |     }
 18 |     const res = await fetch(
 19 |       `${process.env.REACT_APP_BASE_URL}/api/projects/${project._id}`,
 20 |       {
 21 |         method: "DELETE",
 22 |         headers: {
 23 |           Authorization: `Bearer ${user.token}`,
 24 |         },
 25 |       }
 26 |     );
 27 |     const json = await res.json();
 28 | 
 29 |     if (res.ok) {
 30 |       dispatch({ type: "DELETE_PROJECT", payload: json });
 31 |     }
 32 |   };
 33 |   const handleUpdate = async () => {
 34 |     setIsModalOpen(true);
 35 |     setIsOverlayOpen(true);
 36 |   };
 37 | 
 38 |   const handleOverlay = () => {
 39 |     setIsModalOpen(false);
 40 |     setIsOverlayOpen(false);
 41 |   };
 42 |   return (
 43 |     <div className="project bg-white p-5 rounded-md shadow-md border border-stone-300 flex flex-col gap-5 w-[30rem]">
 44 |       <div className="top">
 45 |         <span className="text-sky-600">ID: {project._id}</span>
 46 |         <h3 className="text-2xl font-medium text-gray-800/75 truncate">
 47 |           {project.title}
 48 |         </h3>
 49 |         <span className="text-gray-500/75 -tracking-widest uppercase font-medium text-xs">
 50 |           {project.tech}
 51 |         </span>
 52 |       </div>
 53 |       <div className="mid flex gap-10">
 54 |         <div className="left flex flex-col">
 55 |           <span>Budget: {currencyFormatter(project.budget)}</span>
 56 |           <span>
 57 |             Added: {moment(project.createdAt).format("DD-MMM hh:mm A")}
 58 |           </span>
 59 |           <span>
 60 |             Updated: {moment(project.updatedAt).format("DD-MMM hh:mm A")}
 61 |           </span>
 62 |         </div>
 63 |         <div className="right flex flex-col">
 64 |           <span>Manager: {project.manager}</span>
 65 |           <span>Developers: {project.dev}</span>
 66 |           <span>
 67 |             Duration:{" "}
 68 |             {`${project.duration} week${project.duration === 1 ? "" : "s"}`}
 69 |           </span>
 70 |         </div>
 71 |       </div>
 72 |       <div className="bottom flex gap-5">
 73 |         <button
 74 |           onClick={handleUpdate}
 75 |           className="bg-blue-700 py-2 text-blue-50 px-5 rounded-md shadow-sm hover:bg-blue-700/90 duration-300"
 76 |         >
 77 |           Update
 78 |         </button>
 79 |         <button
 80 |           onClick={handleDelete}
 81 |           className="text-red-500 hover:text-red-600/50 duration-300"
 82 |         >
 83 |           Delete
 84 |         </button>
 85 |       </div>
 86 |       {/* overlay */}
 87 |       <div
 88 |         onClick={handleOverlay}
 89 |         className={`overlay fixed z-[1] h-screen w-screen bg-slate-900/50 backdrop-blur-sm top-0 left-0 bottom-0 right-0 ${
 90 |           isOverlayOpen ? "" : "hidden"
 91 |         }`}
 92 |       ></div>
 93 |       {/* modal */}
 94 |       <div
 95 |         className={`update-modal w-[35rem] fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-10 rounded-md shadow-md border-stone-200 z-[2] ${
 96 |           isModalOpen ? "" : "hidden"
 97 |         }`}
 98 |       >
 99 |         <h2 className="text-4xl font-medium text-gray-600 mb-10">
100 |           Update project
101 |         </h2>
102 |         <ProjectForm
103 |           project={project}
104 |           setIsModalOpen={setIsModalOpen}
105 |           setIsOverlayOpen={setIsOverlayOpen}
106 |         />
107 |       </div>
108 |     </div>
109 |   );
110 | };
111 | 
112 | export default ProjectDetails;
113 | 


--------------------------------------------------------------------------------
/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { useProjectsContext } from "../hooks/useProjectsContext";
  3 | import { useAuthContext } from "../hooks/useAuthContext";
  4 | 
  5 | const ProjectForm = ({ project, setIsModalOpen, setIsOverlayOpen }) => {
  6 |   const [title, setTitle] = useState(project ? project.title : "");
  7 |   const [tech, setTech] = useState(project ? project.tech : "");
  8 |   const [budget, setBudget] = useState(project ? project.budget : "");
  9 |   const [duration, setDuration] = useState(project ? project.duration : "");
 10 |   const [manager, setManager] = useState(project ? project.manager : "");
 11 |   const [dev, setDev] = useState(project ? project.dev : "");
 12 |   const [error, setError] = useState(null);
 13 |   const [emptyFields, setEmptyfields] = useState([]);
 14 | 
 15 |   const { dispatch } = useProjectsContext();
 16 |   const { user } = useAuthContext();
 17 | 
 18 |   const handleSubmit = async (e) => {
 19 |     e.preventDefault();
 20 | 
 21 |     if (!user) {
 22 |       setError("You must be logged in!");
 23 |       return;
 24 |     }
 25 | 
 26 |     // data
 27 |     const projectObj = { title, tech, budget, duration, manager, dev };
 28 | 
 29 |     // if there is no project
 30 |     if (!project) {
 31 |       // post request
 32 |       const res = await fetch(
 33 |         `${process.env.REACT_APP_BASE_URL}/api/projects`,
 34 |         {
 35 |           method: "POST",
 36 |           headers: {
 37 |             "Content-Type": "application/json",
 38 |             Authorization: `Bearer ${user.token}`,
 39 |           },
 40 |           body: JSON.stringify(projectObj),
 41 |         }
 42 |       );
 43 | 
 44 |       const json = await res.json();
 45 | 
 46 |       // ste error
 47 |       if (!res.ok) {
 48 |         setError(json.error);
 49 |         setEmptyfields(json.emptyFields);
 50 |       }
 51 | 
 52 |       // reset
 53 |       if (res.ok) {
 54 |         setTitle("");
 55 |         setTech("");
 56 |         setBudget("");
 57 |         setDuration("");
 58 |         setManager("");
 59 |         setDev("");
 60 |         setError(null);
 61 |         setEmptyfields([]);
 62 |         dispatch({ type: "CREATE_PROJECTS", payload: json });
 63 |       }
 64 |       return;
 65 |     }
 66 | 
 67 |     // there is a project, send patch request
 68 |     if (project) {
 69 |       //send patch
 70 |       const res = await fetch(
 71 |         `${process.env.REACT_APP_BASE_URL}/api/projects/${project._id}`,
 72 |         {
 73 |           method: "PATCH",
 74 |           headers: {
 75 |             "Content-Type": "application/json",
 76 |             Authorization: `Bearer ${user.token}`,
 77 |           },
 78 |           body: JSON.stringify(projectObj),
 79 |         }
 80 |       );
 81 | 
 82 |       const json = await res.json();
 83 |       // !res.ok
 84 |       if (!res.ok) {
 85 |         setError(json.error);
 86 |         setEmptyfields(json.emptyFields);
 87 |       }
 88 |       // res.ok
 89 |       if (res.ok) {
 90 |         setError(null);
 91 |         setEmptyfields([]);
 92 | 
 93 |         // dispatch
 94 |         dispatch({ type: "UPDATE_PROJECT", payload: json });
 95 | 
 96 |         // close overlay modal
 97 |         setIsModalOpen(false);
 98 |         setIsOverlayOpen(false);
 99 |       }
100 |       return;
101 |     }
102 |   };
103 |   return (
104 |     <form onSubmit={handleSubmit} className="project-form flex flex-col gap-5">
105 |       <h2
106 |         className={`text-4xl font-medium text-gray-600 mb-10 ${
107 |           project ? "hidden" : ""
108 |         }`}
109 |       >
110 |         Add a new project
111 |       </h2>
112 | 
113 |       <div className="form-control flex flex-col gap-2">
114 |         <label
115 |           htmlFor="title"
116 |           className=" cursor-pointer hover:text-sky-600 duration-300"
117 |         >
118 |           Project title
119 |         </label>
120 |         <input
121 |           value={title}
122 |           onChange={(e) => setTitle(e.target.value)}
123 |           type="text"
124 |           placeholder="e.g e-commerce website"
125 |           id="title"
126 |           className={`bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300 ${
127 |             emptyFields?.includes("title")
128 |               ? "border-rose-500"
129 |               : "border-slate-500"
130 |           }`}
131 |         />
132 |       </div>
133 |       <div className="form-control flex flex-col gap-2">
134 |         <label
135 |           htmlFor="tech"
136 |           className=" cursor-pointer hover:text-sky-600 duration-300"
137 |         >
138 |           Technologies
139 |         </label>
140 |         <input
141 |           value={tech}
142 |           onChange={(e) => setTech(e.target.value)}
143 |           type="text"
144 |           placeholder="node.js, react, redux etc."
145 |           id="tech"
146 |           className={`bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300 ${
147 |             emptyFields?.includes("tech")
148 |               ? "border-rose-500"
149 |               : "border-slate-500"
150 |           }`}
151 |         />
152 |       </div>
153 |       <div className="form-control flex flex-col gap-2">
154 |         <label
155 |           htmlFor="tbudget"
156 |           className=" cursor-pointer hover:text-sky-600 duration-300"
157 |         >
158 |           Budget (in USD)
159 |         </label>
160 |         <input
161 |           value={budget}
162 |           onChange={(e) => setBudget(e.target.value)}
163 |           type="number"
164 |           placeholder="e.g 500"
165 |           id="budget"
166 |           className={`bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300 ${
167 |             emptyFields?.includes("budget")
168 |               ? "border-rose-500"
169 |               : "border-slate-500"
170 |           }`}
171 |         />
172 |       </div>
173 |       <div className="form-control flex flex-col gap-2">
174 |         <label
175 |           htmlFor="duration"
176 |           className=" cursor-pointer hover:text-sky-600 duration-300"
177 |         >
178 |           Duration (in weeks)
179 |         </label>
180 |         <input
181 |           value={duration}
182 |           onChange={(e) => setDuration(e.target.value)}
183 |           type="number"
184 |           placeholder="e.g 3"
185 |           id="duration"
186 |           className={`bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300 ${
187 |             emptyFields?.includes("duration")
188 |               ? "border-rose-500"
189 |               : "border-slate-500"
190 |           }`}
191 |         />
192 |       </div>
193 |       <div className="form-control flex flex-col gap-2">
194 |         <label
195 |           htmlFor="manager"
196 |           className=" cursor-pointer hover:text-sky-600 duration-300"
197 |         >
198 |           Manager
199 |         </label>
200 |         <input
201 |           value={manager}
202 |           onChange={(e) => setManager(e.target.value)}
203 |           type="text"
204 |           placeholder="e.g Mr Habib"
205 |           id="manager"
206 |           className={`bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300 ${
207 |             emptyFields?.includes("manager")
208 |               ? "border-rose-500"
209 |               : "border-slate-500"
210 |           }`}
211 |         />
212 |       </div>
213 |       <div className="form-control flex flex-col gap-2">
214 |         <label
215 |           htmlFor="dev"
216 |           className=" cursor-pointer hover:text-sky-600 duration-300"
217 |         >
218 |           Developers
219 |         </label>
220 |         <input
221 |           value={dev}
222 |           onChange={(e) => setDev(e.target.value)}
223 |           type="number"
224 |           placeholder="e.g 4"
225 |           id="dev"
226 |           className={`bg-transparent border border-gray-300 py-3 px-5 rounded-md outline-none focus:border-sky-400 duration-300 ${
227 |             emptyFields?.includes("developer")
228 |               ? "border-rose-500"
229 |               : "border-slate-500"
230 |           }`}
231 |         />
232 |       </div>
233 | 
234 |       <button
235 |         type="submit"
236 |         className="bg-blue-700 py-3 text-blue-50 rounded-md shadow-sm hover:bg-blue-700/90 duration-300 tracking-widest font-semibold"
237 |       >
238 |         {project ? "Confirm Update" : "Add Project"}
239 |       </button>
240 |       {error && (
241 |         <p className="bg-rose-500/20 text-rose-500 border border-rose-700 p-2 rounded-md">
242 |           {error}
243 |         </p>
244 |       )}
245 |     </form>
246 |   );
247 | };
248 | 
249 | export default ProjectForm;
250 | 


--------------------------------------------------------------------------------