feat:Add_Loader_Spinner_Component

Author: SHIVA00202

backend/.gitignore

@@ -0,0 +1 @@
+.env

backend/src/routes/authRoutes.ts

@@ -1,5 +1,5 @@
 import express from "express";
-import { registerUser, loginUser,  getUserProfile } from "../controllers/authController.js";
+import { registerUser, loginUser,  getUserProfile} from "../controllers/authController.js";
 import passport from "passport";
 import { protect } from "../middleware/authMiddleware.js";
 
@@ -17,7 +17,7 @@ router.get(
 router.get(
   "/google/callback",
   passport.authenticate("google", { session: false, failureRedirect: process.env.FRONTEND_URL ? `${process.env.FRONTEND_URL}/signin` : "/signin" }),
-  oauthCallback
+ 
 );
 
 // GitHub OAuth
@@ -28,7 +28,7 @@ router.get(
 router.get(
   "/github/callback",
   passport.authenticate("github", { session: false, failureRedirect: process.env.FRONTEND_URL ? `${process.env.FRONTEND_URL}/signin` : "/signin" }),
-  oauthCallback
+  
 );
 
 export default router;

frontend/src/assets/loader.gif

@@ -23,7 +23,6 @@ export default function RoomActions() {
         });
         setUser(res.data.user);
       } catch (err) {
-        // invalid token or user not found
         localStorage.removeItem("token");
         navigate("/signin");
       } finally {
@@ -41,34 +40,46 @@ export default function RoomActions() {
     navigate("/");
   };
 
-  if (loading) return <div className="p-6">Loading...</div>;
+  if (loading)
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100">
+        <p className="text-gray-600 text-lg animate-pulse">Loading...</p>
+      </div>
+    );
 
   return (
-    <div className="container mx-auto px-6 py-10">
-      <div className="max-w-md mx-auto bg-white shadow rounded-lg p-6">
-        <h2 className="text-xl font-semibold mb-4 ">Room Actions</h2>
-        <p className="text-sm text-gray-600 mb-6">Hello {user?.name ?? "user"}, choose an action:</p>
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100 px-4 py-8">
+      <div className="max-w-md w-full bg-white/80 backdrop-blur-md shadow-xl rounded-2xl border border-green-100 p-8 transition-transform hover:scale-[1.01] duration-300">
+        <h2 className="text-3xl font-bold text-green-600 text-center mb-4">
+          Room Actions
+        </h2>
+        <p className="text-gray-600 text-center mb-8">
+          👋 Hello <span className="font-semibold">{user?.name ?? "Guest"}</span>, what would you like to do today?
+        </p>
 
-        <div className="space-y-3">
+        <div className="space-y-4">
+          {/* Join Room */}
           <Button
-            className="w-full justify-center bg-green-600 hover:bg-green-700 text-white"
             onClick={handleJoin}
+            className="w-full justify-center bg-green-600 text-white font-medium py-3 rounded-lg shadow-md hover:bg-green-700 hover:shadow-lg transition-all"
           >
-            <LogIn className="mr-2 h-4 w-4" /> Join Room
+            <LogIn className="mr-2 h-5 w-5" /> Join a Room
           </Button>
 
+          {/* Create Room */}
           <Button
-            className="w-full justify-center bg-blue-600 hover:bg-blue-700 text-white"
             onClick={handleCreate}
+            className="w-full justify-center bg-blue-600 text-white font-medium py-3 rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg transition-all"
           >
-            <PlusSquare className="mr-2 h-4 w-4" /> Create Room
+            <PlusSquare className="mr-2 h-5 w-5" /> Create a Room
           </Button>
 
+          {/* Logout */}
           <Button
-            className="w-full justify-center bg-red-600 hover:bg-red-700 text-white"
             onClick={handleLogout}
+            className="w-full justify-center bg-red-600 text-white font-medium py-3 rounded-lg shadow-md hover:bg-red-700 hover:shadow-lg transition-all"
           >
-            <LogOut className="mr-2 h-4 w-4" /> Logout
+            <LogOut className="mr-2 h-5 w-5" /> Logout
           </Button>
         </div>
       </div>

frontend/src/pages/RoomActions.tsx

@@ -24,7 +24,12 @@ interface SignInData {
 const SignIn = () => {
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
-  const { register, handleSubmit, formState: { errors }, reset } = useForm<SignInData>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<SignInData>();
 
   const onSubmit = async (data: SignInData) => {
     setIsLoading(true);
@@ -40,7 +45,6 @@ const SignIn = () => {
         description: response.data.message || "Login successful",
       });
 
-      // store JWT token in localStorage
       if (response.data.token) {
         localStorage.setItem("token", response.data.token);
       }
@@ -50,7 +54,9 @@ const SignIn = () => {
     } catch (error: any) {
       toast({
         title: "Error",
-        description: error.response?.data?.message || "Login failed. Please try again.",
+        description:
+          error.response?.data?.message ||
+          "Login failed. Please try again.",
         variant: "destructive",
       });
     } finally {
@@ -59,19 +65,19 @@ const SignIn = () => {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-8">
-      <Card className="w-full max-w-md bg-white shadow-lg rounded-xl">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100 px-4 py-8">
+      <Card className="w-full max-w-md bg-white/80 backdrop-blur-md shadow-xl border border-green-100 rounded-2xl p-6 animate-fadeIn">
         <CardHeader className="space-y-1 text-center">
-          <CardTitle className="text-3xl font-bold text-green-600">
+          <CardTitle className="text-4xl font-extrabold text-green-600 tracking-tight">
             PeerCall
           </CardTitle>
           <CardDescription className="text-gray-600 text-base">
-            Sign in to your account
+            Sign in to continue to your account
           </CardDescription>
         </CardHeader>
 
         <CardContent>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
             <InputField
               label="Email"
               id="email"
@@ -104,13 +110,13 @@ const SignIn = () => {
 
             <Button
               type="submit"
-              className="w-full bg-green-600 text-white hover:bg-green-700 transition-colors rounded-lg py-3"
+              className="w-full bg-green-600 text-white hover:bg-green-700 transition-all duration-300 rounded-lg py-3 font-medium shadow-md hover:shadow-lg"
               size="lg"
               disabled={isLoading}
             >
               {isLoading ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                   Signing in...
                 </>
               ) : (
@@ -119,20 +125,20 @@ const SignIn = () => {
             </Button>
           </form>
 
-          <div className="mt-6">
+          <div className="mt-8">
             <div className="text-center text-sm text-gray-500 mb-3">
-              Or continue with
+              — Or continue with —
             </div>
             <SocialLogin />
           </div>
         </CardContent>
 
-        <CardFooter className="flex flex-col space-y-2">
-          <div className="text-sm text-gray-500 text-center">
-            Don't have an account?{" "}
+        <CardFooter className="flex flex-col space-y-2 mt-4">
+          <div className="text-sm text-gray-600 text-center">
+            Don’t have an account?{" "}
             <Link
               to="/signup"
-              className="text-green-600 hover:underline font-medium transition-colors"
+              className="text-green-600 font-medium hover:underline hover:text-green-700 transition-colors"
             >
               Sign Up
             </Link>

frontend/src/pages/Signin.tsx

@@ -47,7 +47,6 @@ const SignUp = () => {
 
     setIsLoading(true);
     try {
-      // Derive name from email (part before @)
       const name = data.email.split("@")[0];
 
       const response = await axios.post(
@@ -64,10 +63,10 @@ const SignUp = () => {
 
       toast({
         title: "Success!",
-        description: response.data.message || "Registration successful",
+        description:
+          response.data.message || "Account created successfully. Welcome!",
       });
 
-      // Optional: save token for auto-login
       if (response.data.token) {
         localStorage.setItem("token", response.data.token);
       }
@@ -78,7 +77,8 @@ const SignUp = () => {
       toast({
         title: "Error",
         description:
-          error.response?.data?.message || "Registration failed. Please try again.",
+          error.response?.data?.message ||
+          "Registration failed. Please try again.",
         variant: "destructive",
       });
     } finally {
@@ -87,10 +87,10 @@ const SignUp = () => {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-8">
-      <Card className="w-full max-w-md bg-white shadow-lg rounded-xl">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-white to-green-100 px-4 py-8">
+      <Card className="w-full max-w-md bg-white/80 backdrop-blur-md shadow-xl border border-green-100 rounded-2xl p-6 animate-fadeIn">
         <CardHeader className="space-y-1 text-center">
-          <CardTitle className="text-3xl font-bold text-green-600">
+          <CardTitle className="text-4xl font-extrabold text-green-600 tracking-tight">
             PeerCall
           </CardTitle>
           <CardDescription className="text-gray-600 text-base">
@@ -99,7 +99,7 @@ const SignUp = () => {
         </CardHeader>
 
         <CardContent>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
             <InputField
               label="Email"
               id="email"
@@ -143,13 +143,13 @@ const SignUp = () => {
 
             <Button
               type="submit"
-              className="w-full bg-green-600 text-white hover:bg-green-700 transition-colors rounded-lg py-3"
+              className="w-full bg-green-600 text-white hover:bg-green-700 transition-all duration-300 rounded-lg py-3 font-medium shadow-md hover:shadow-lg"
               size="lg"
               disabled={isLoading}
             >
               {isLoading ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                   Creating account...
                 </>
               ) : (
@@ -159,12 +159,12 @@ const SignUp = () => {
           </form>
         </CardContent>
 
-        <CardFooter className="flex flex-col space-y-2">
-          <div className="text-sm text-gray-500 text-center">
+        <CardFooter className="flex flex-col space-y-2 mt-4">
+          <div className="text-sm text-gray-600 text-center">
             Already have an account?{" "}
             <Link
               to="/signin"
-              className="text-green-600 hover:underline font-medium transition-colors"
+              className="text-green-600 font-medium hover:underline hover:text-green-700 transition-colors"
             >
               Sign In
             </Link>