From 19aabdd443e8aee74673f2cff12b39853682820d Mon Sep 17 00:00:00 2001 From: Shamanth-Kumar-K Date: Tue, 9 Sep 2025 20:32:23 +0530 Subject: [PATCH 01/11] Completed Getting Started feature --- package-lock.json | 9 + package.json | 1 + src/App.jsx | 37 +- src/components/Auth/Login.jsx | 2 +- .../Settings/GoogleDriveIntegration.jsx | 21 + src/components/Settings/Settings.jsx | 2 + src/components/Shared/Sidebar.jsx | 18 + src/pages/GettingStarted.jsx | 379 ++++++++++++++++++ 8 files changed, 450 insertions(+), 19 deletions(-) create mode 100644 src/components/Settings/GoogleDriveIntegration.jsx create mode 100644 src/pages/GettingStarted.jsx diff --git a/package-lock.json b/package-lock.json index 0028217..653181b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "date-fns": "^2.30.0", "jwt-decode": "^3.1.2", "lodash": "^4.17.21", + "lucide-react": "^0.542.0", "monaco-editor": "^0.43.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -4392,6 +4393,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.542.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz", + "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", diff --git a/package.json b/package.json index a00b807..f413355 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "date-fns": "^2.30.0", "jwt-decode": "^3.1.2", "lodash": "^4.17.21", + "lucide-react": "^0.542.0", "monaco-editor": "^0.43.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/App.jsx b/src/App.jsx index dea87e5..83c7d83 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,6 +3,7 @@ import { Routes, Route, Navigate } from 'react-router-dom'; import { AuthContext } from './contexts/AuthContext'; import styled from 'styled-components'; + // Pages import LandingPage from './pages/Landingpage'; import HomePage from './pages/Homepage'; @@ -14,6 +15,7 @@ import SharedProjects from './pages/SharedProjects'; import Settings from './pages/Settings'; import NotFound from './pages/NotFound'; import ResetPassword from './pages/ResetPassword'; +import GettingStarted from './pages/GettingStarted'; // Components import ProtectedRoute from './components/Shared/ProtectedRoute'; @@ -35,40 +37,39 @@ const App = () => { {/* Landing Page - The initial animated page */} : + currentUser ? : } /> + + + + }> + } /> + } /> + } /> + } /> + } /> + } /> + {/* Home Page - With Login/Register tabs */} : + currentUser ? : } /> : + currentUser ? : } /> {/* Auth Routes (for direct access) */} : + currentUser ? : } /> : + currentUser ? : } /> - {/* Protected Routes */} - - - - }> - } /> - } /> - } /> - } /> - - - } /> ); }; diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx index d7e6492..86e0f41 100644 --- a/src/components/Auth/Login.jsx +++ b/src/components/Auth/Login.jsx @@ -74,7 +74,7 @@ const Login = (props) => { try { await login(formData); - navigate('/dashboard'); + navigate('/getting-started'); } catch (err) { console.error('Login error:', err); } finally { diff --git a/src/components/Settings/GoogleDriveIntegration.jsx b/src/components/Settings/GoogleDriveIntegration.jsx new file mode 100644 index 0000000..56ee990 --- /dev/null +++ b/src/components/Settings/GoogleDriveIntegration.jsx @@ -0,0 +1,21 @@ +const GoogleDriveIntegration = ({ onConnected }) => { + return ( +
+ +
+ ); +}; + +export default GoogleDriveIntegration; diff --git a/src/components/Settings/Settings.jsx b/src/components/Settings/Settings.jsx index a2ebcd9..3de1312 100644 --- a/src/components/Settings/Settings.jsx +++ b/src/components/Settings/Settings.jsx @@ -23,6 +23,8 @@ import { FaList } from 'react-icons/fa'; import { useLocation } from 'react-router-dom'; +import GoogleDriveIntegration from "./GoogleDriveIntegration"; + const Settings = () => { const { currentUser } = useContext(AuthContext); diff --git a/src/components/Shared/Sidebar.jsx b/src/components/Shared/Sidebar.jsx index 76d6822..2b5d3fe 100644 --- a/src/components/Shared/Sidebar.jsx +++ b/src/components/Shared/Sidebar.jsx @@ -1,6 +1,7 @@ import React, { useEffect, useState, useRef } from 'react'; import { NavLink, Link } from 'react-router-dom'; import styled from 'styled-components'; + import { FaHome, FaShareAlt, @@ -10,6 +11,8 @@ import { FaChevronLeft, FaChevronRight, FaCompressArrowsAlt, + FaPlayCircle, + FaBook, } from 'react-icons/fa'; const STORAGE_KEY = 'cc_sidebar_mini'; @@ -69,6 +72,13 @@ const Sidebar = ({ isOpen }) => { + + + + Getting Started + + + @@ -98,6 +108,14 @@ const Sidebar = ({ isOpen }) => { Help + + + + + + Settings + + diff --git a/src/pages/GettingStarted.jsx b/src/pages/GettingStarted.jsx new file mode 100644 index 0000000..7fc8786 --- /dev/null +++ b/src/pages/GettingStarted.jsx @@ -0,0 +1,379 @@ +import { useState } from "react"; +import styled from "styled-components"; +import { CheckCircle, Lock, Globe } from "lucide-react"; +import { useNavigate } from "react-router-dom"; +import { createProject } from "../services/projectService"; + +// steps config +const steps = [ + { id: 1, title: "How CodeConcl Works", description: "Learn the basics of how CodeConcl works and explore the features." }, + { id: 2, title: "Connect Google Drive", description: "Connect your Google Drive to save and sync your projects." }, + { id: 3, title: "Create Your Project", description: "Start your first project and explore the editor." }, +]; + +const GettingStarted = () => { + const [currentStep, setCurrentStep] = useState(1); + const [projectName, setProjectName] = useState(""); + const [projectDescription, setProjectDescription] = useState(""); + const [visibility, setVisibility] = useState("private"); + const navigate = useNavigate(); + + const handleNext = async () => { + if (currentStep === 3) { + if (projectName.trim()) { + try { + const projectData = { + name: projectName, + description: projectDescription, + // 👇 Adjust this line to match backend schema + isPublic: visibility === "public", + }; + + await createProject(projectData); + } catch (err) { + console.error("Error creating project:", err); + alert("Failed to create project. Please try again."); + return; + } + } + navigate("/dashboard"); + } else { + setCurrentStep(currentStep + 1); + } +}; + + + const handleBack = () => { + if (currentStep > 1) setCurrentStep(currentStep - 1); + }; + + return ( + +
+ {steps.map((step) => { + const isCompleted = step.id < currentStep; + const isActive = step.id === currentStep; + return ( + + {step.title} + {isCompleted && } + + ); + })} +
+ + + {currentStep === 1 && ( + +

{steps[0].title}

+

{steps[0].description}

+ + )} + + {currentStep === 2 && ( + +

{steps[1].title}

+

{steps[1].description}

+ + +

CodeConcl Storage

+

Your default workspace to store projects.

+ Available Space: 5GB + + +

Google Drive

+

Sync projects with your Google Drive.

+ { + window.open("https://drive.google.com", "_blank"); + }} + > + Connect Google Drive + + + + + )} + + {currentStep === 3 && ( + +

{steps[2].title}

+

{steps[2].description}

+ + {/* Project Name */} + + + setProjectName(e.target.value)} + /> + + + {/* Description */} + + +