organize styles and add barrel exports

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

client/src/App.js

@@ -1,23 +1,8 @@
 import React from "react";
 import { ThemeProvider } from "./theme/ThemeProvider";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Navbar from "./components/Navbar";
-import Home from "./pages/Home";
-import Syllabus from "./pages/Syllabus";
-import Notes from "./pages/Notes";
-import PYQs from "./pages/PYQs";
-import Feedback from "./pages/Feedback";
-import About from "./pages/About";
-import Privacy from "./pages/Privacy";
-import Contact from "./pages/Contact";
-import Analytics from "./pages/Analytics";
-import Faq from "./pages/Faq";
-import Contribute from "./pages/Contribute";
-import ScrollToTop from "./components/scrolltotop";
-import MindMapEditor from "./pages/MindMapEditor";
-import Profile from "./pages/Profile.js";
-import SubmitFeedback from "./pages/SubmitFeedback";
-import Todo from "./pages/Todo";
+import {Home, Syllabus, Notes, PYQs, Feedback, About, Privacy, Contact, Analytics, Faq, Contribute, MindMapEditor, Profile, SubmitFeedback, Todo} from './pages';
+import {Navbar, ScrollToTop} from "./components";
 
 
 const App = () => {

client/src/components/FeedbackModal.js

@@ -1,6 +1,6 @@
 // client/src/components/FeedbackModal.js
 import React, { useState, useEffect } from "react";
-import './FeedbackModal.css'; // This line connects the component to the CSS above
+import './style/FeedbackModal.css'; // This line connects the component to the CSS above
 
 const FeedbackModal = ({ onClose, onSuccess }) => {
   const [formData, setFormData] = useState({

client/src/components/Navbar.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Link, NavLink } from "react-router-dom";
-import "./Navbar.css";
+import "./style/Navbar.css";
 import { useTheme } from "../theme/ThemeProvider";
 import { FaMoon, FaSun, FaChevronDown } from "react-icons/fa";
 

client/src/components/index.js

@@ -0,0 +1,4 @@
+export { default as Calender} from "./Calender.js";
+export { default as FeedbackModal} from "./FeedbackModal.js";
+export { default as Navbar} from "./Navbar.js";
+export { default as scrolltotop} from "./scrolltotop.js";

client/src/pages/About.js

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { FaArrowUp } from "react-icons/fa";
-import './About.css';
-import './ScrollToTop.css';
+import './style/About.css';
+import './style/ScrollToTop.css';
 const About = () => {
   document.title = "StudyMatePlus | About Us";
   // Animation Variants from Home.js

client/src/pages/Analytics.js

@@ -11,8 +11,8 @@ import {
 } from 'chart.js';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FaArrowUp } from "react-icons/fa";
-import './Analytics.css';
-import './ScrollToTop.css';
+import './style/Analytics.css';
+import './style/ScrollToTop.css';
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, ArcElement, Tooltip, Legend);
 

client/src/pages/Contact.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import './Contact.css';
-import './ScrollToTop.css';
+import './style/Contact.css';
+import './style/ScrollToTop.css';
 
 const Contact = () => {
 

client/src/pages/Contribute.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import './Contribute.css';
-import './ScrollToTop.css';
+import './style/Contribute.css';
+import './style/ScrollToTop.css';
 
 const Contribute = () => {
   const [activeStep, setActiveStep] = useState(1);

client/src/pages/Faq.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import "./Faq.css";
-import './ScrollToTop.css';
+import "./style/Faq.css";
+import './style/ScrollToTop.css';
 import { FaGithub, FaLinkedin, FaDiscord, FaArrowUp} from "react-icons/fa";
 import { Link } from "react-router-dom";
 import { FaXTwitter } from "react-icons/fa6";

client/src/pages/Feedback.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import "./Feedback.css";
-import './ScrollToTop.css';
+import "./style/Feedback.css";
+import './style/ScrollToTop.css';
 import { FaArrowUp } from "react-icons/fa";
 import FeedbackModal from "../components/FeedbackModal"; // Import the modal component
 

client/src/pages/Home.js

@@ -5,8 +5,8 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { FaGithub, FaLinkedin, FaDiscord, FaArrowUp } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 import logo from "./logo.png";
-import "./Home.css";
-import './ScrollToTop.css';
+import "./style/Home.css";
+import './style/ScrollToTop.css';
 
 const Home = () => {
 

client/src/pages/MindMapEditor.js

@@ -6,8 +6,8 @@ import ReactFlow, {
   MarkerType, Handle, Position
 } from 'reactflow';
 import 'reactflow/dist/style.css';
-import './MindMapEditor.css';
-import './ScrollToTop.css';
+import './style/MindMapEditor.css';
+import './style/ScrollToTop.css';
 
 import { v4 as uuid } from 'uuid';
 import { motion, AnimatePresence } from 'framer-motion';

client/src/pages/Notes.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FaArrowUp } from "react-icons/fa";
-import './Notes.css';
+import './style/Notes.css';
 
 const Notes = () => {
 

client/src/pages/PYQs.js

@@ -1,8 +1,8 @@
 import React, { useState, useMemo, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { FaArrowUp } from "react-icons/fa";
-import "./PYQs.css";
-import './ScrollToTop.css';
+import "./style/PYQs.css";
+import './style/ScrollToTop.css';
 
 const PYQs = () => {
 

client/src/pages/Privacy.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import './Privacy.css';
-import './ScrollToTop.css';
+import './style/Privacy.css';
+import './style/ScrollToTop.css';
 
 const Privacy = () => {
 

client/src/pages/Profile.js

@@ -6,8 +6,8 @@ import {
   FaCommentDots,
   FaBookmark,
 } from "react-icons/fa";
-import "./Profile.css";
-import './ScrollToTop.css';
+import "./style/Profile.css";
+import './style/ScrollToTop.css';
 
 const user = {
   name: "John Doe",

client/src/pages/SubmitFeedback.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import './SubmitFeedback.css'; // We will create this file next
-import './Feedback.css'; // Reusing some existing styles
+import './style/SubmitFeedback.css'; // We will create this file next
+import './style/Feedback.css'; // Reusing some existing styles
 
 const StarRating = ({ rating, setRating }) => {
   const [hover, setHover] = useState(0);

client/src/pages/Syllabus.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FaArrowUp } from "react-icons/fa";
-import './Syllabus.css';
+import './style/Syllabus.css';
 
 const Syllabus = () => {
 

client/src/pages/Todo.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import "./Todo.css";
+import "./style/Todo.css";
 import Calendar from "../components/Calendar";
 
 const STORAGE_KEY = "smp_tasks_v1";

client/src/pages/index.js

@@ -0,0 +1,15 @@
+export { default as About} from "./About.js";
+export { default as Analytics} from "./Analytics.js";
+export { default as Contact} from "./Contact.js";
+export { default as Contribute} from "./Contribute.js";
+export { default as Faq} from "./Faq.js";
+export { default as Feedback} from "./Feedback.js";
+export { default as Home} from "./Home.js";
+export { default as MindMapEditor} from "./MindMapEditor.js";
+export { default as Notes} from "./Notes.jsx";
+export { default as Privacy} from "./Privacy.js";
+export { default as Profile} from "./Profile.js";
+export { default as PYQs} from "./PYQs.js";
+export { default as SubmitFeedback} from "./SubmitFeedback.js";
+export { default as Syllabus} from "./Syllabus.js";
+export { default as Todo} from "./Todo.js";