Merge pull request #39 from reedoooo/refine/logicandstyles

many fixes for stats and selectors

README.md

@@ -14,10 +14,91 @@ TCG Enhanced Cardstore is a full-stack web application designed for trading card
 - **Responsive Design**: Mobile-friendly layout for on-the-go access.
 - **Real-Time Updates**: Backend cron jobs ensure the latest card data.
 
-### Technologies
+## Technologies
 
-- **Frontend**: React, Stripe, MUI, Convertio, YGOProDeck-API, Nivo Charts.
-- **Backend**: Node.js, Express.js, MongoDB, scheduled data updates.
+### Frontend
+
+- **React**: Builds dynamic and interactive user interfaces, ensuring smooth navigation and responsive design.
+- **TypeScript**: Provides type safety and reduces runtime errors, contributing to more reliable and maintainable code.
+- **Material-UI & MUI Joy**: Offers pre-styled UI components, allowing for rapid development of visually appealing interfaces.
+- **React Hook Form**: Simplifies form creation and validation, ensuring a smooth user experience and reducing input errors.
+
+#### Data Management
+
+- **Redux**: Handles application state management, ensuring consistent and efficient data flow across the platform.
+- **Zod**: Provides data validation for robust API interactions, ensuring data integrity and security.
+- **Context API**: Facilitates global state management, allowing for seamless data sharing between components.
+
+#### E-commerce
+
+- **Stripe**: Facilitates secure payment processing, allowing for smooth and trustworthy transactions.
+
+#### Data Visualization
+
+- **Nivo Charts & ReCharts**: Provides interactive and visually appealing data visualization tools, enhancing user experience and data comprehension.
+
+#### Development Tools
+
+- **ESLint & Prettier**: Maintains code quality and consistency, reducing technical debt and ensuring readability.
+- **React Scripts**: Streamlines development, build, and testing processes, enhancing the overall workflow.
+
+#### Testing and Optimization
+
+- **Jest & React Testing Library**: Ensures code quality and reliability through comprehensive unit and integration tests.
+- **Web Vitals**: Measures the quality of user experience, helping to monitor and improve the performance of the web pages.
+
+### Backend Technologies
+
+The backend for the Enhanced Card Store is built using a diverse set of technologies designed to offer secure, robust, and scalable web services:
+
+#### Core Technologies
+
+- **Node.js & Express**: Provides the runtime environment and the web application framework, respectively, facilitating the creation of server-side logic and APIs.
+- **MongoDB & Mongoose**: Used for database management; MongoDB as the NoSQL database and Mongoose as the ODM to handle business data and models efficiently.
+
+#### Security and Authentication
+
+- **bcrypt**: Secures user data with hashing, ensuring safe storage of sensitive information such as passwords.
+- **JWT (jsonwebtoken)**: Manages authentication and secure token-based access to resources.
+- **Helmet**: Enhances security by setting various HTTP headers to prevent common vulnerabilities.
+- **Express Rate Limit & Rate-Limit-Redis**: Provides rate limiting to prevent abuse and brute-force attacks, enhancing API security.
+
+#### Data Handling and Utilities
+
+- **Axios**: Handles HTTP requests for internal and external API communications.
+- **date-fns and Moment.js**: Provides comprehensive tools for date handling in JavaScript, improving data manipulation and timezone handling with Moment-Timezone.
+- **Cheerio**: Enables server-side DOM manipulation to scrape or interact with HTML in a jQuery-like fashion.
+
+#### Performance Optimization
+
+- **Compression**: Implements middleware to compress response bodies, improving load times and bandwidth usage.
+- **Node-cron**: Schedules automated tasks directly within the Node.js environment, enhancing the application's capability to perform time-based jobs.
+
+#### Email and Notifications
+
+- **Nodemailer**: Facilitates the sending of emails, enabling communications like notifications and password resets.
+- **Socket.io**: Enables real-time bidirectional event-based communication between the server and clients, essential for notifications and live updates.
+
+#### Logging and Monitoring
+
+- **Morgan**: HTTP request logger middleware for node.js, aiding in monitoring request logs.
+- **Winston & Winston-Daily-Rotate-File**: A powerful logging library capable of transporting logs to different storage mediums and managing log rotation.
+
+#### Developer Tools and Testing
+
+- **Webpack & Babel**: Bundles and transpiles JavaScript files, ensuring compatibility across different browsers and environments.
+- **Jest & Supertest**: Facilitates testing, with Jest for unit and integration tests, and Supertest for HTTP assertions.
+- **ESLint & Prettier**: Maintains code quality and styling consistency, essential for keeping the codebase clean and readable.
+
+#### Continuous Integration and Deployment
+
+- **Nodemon**: Monitors for any changes in the source and automatically restarts the server, ideal for development environments.
+- **gulp**: Automates and enhances the build workflow, allowing for task automation such as minifying files and running pre-build scripts.
+
+### Additional Middleware and Libraries
+
+- **cookie-parser & cors**: Handles cookie parsing and enables CORS to manage security and access controls.
+- **crypto-js**: Provides cryptographic functionality including encryption and secure encoding.
 
 ## Gallery
 
@@ -37,78 +118,6 @@ Here's a glimpse of what TCG Enhanced Cardstore offers:
 
 _For an interactive experience, visit the [Live Demo](https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/)._
 
-<!-- ```html
-<div class="carousel">
-  <div class="carousel-images">
-    <img src="https://github.com/reedoooo/enhanced-card-store/blob/733fee5d8ab28ca034f9f53bb56a8a5aee5330cb/public/images/pages/deckBuilder.png" alt="Deck Builder" />
-    <img src="https://github.com/reedoooo/enhanced-card-store/blob/733fee5d8ab28ca034f9f53bb56a8a5aee5330cb/public/images/pages/portfolio.png" alt="Portfolio" />
-    <img src="https://github.com/reedoooo/enhanced-card-store/blob/733fee5d8ab28ca034f9f53bb56a8a5aee5330cb/public/images/pages/cart.png" alt="Cart" />
-  </div>
-  <button class="prev" onclick="moveSlide(-1)">❮</button>
-  <button class="next" onclick="moveSlide(1)">❯</button>
-</div>
-``` -->
-
-<!-- ```css
-.carousel {
-  position: relative;
-  max-width: 600px; /* Adjust as needed */
-  margin: auto;
-  overflow: hidden;
-}
-
-.carousel-images img {
-  width: 100%;
-  display: none;
-}
-
-.carousel .prev,
-.carousel .next {
-  cursor: pointer;
-  position: absolute;
-  top: 50%;
-  width: auto;
-  padding: 16px;
-  margin-top: -22px;
-  color: white;
-  font-weight: bold;
-  font-size: 18px;
-  transition: 0.6s ease;
-  border-radius: 0 3px 3px 0;
-  user-select: none;
-}
-
-.carousel .next {
-  right: 0;
-  border-radius: 3px 0 0 3px;
-}
-
-.carousel .prev:hover,
-.carousel .next:hover {
-  background-color: rgba(0, 0, 0, 0.8);
-}
-``` -->
-
-<!-- ````js
-let slideIndex = 0;
-showSlides(slideIndex);
-
-function moveSlide(n) {
-  showSlides(slideIndex += n);
-}
-
-function showSlides(n) {
-  let i;
-  let slides = document.getElementsByClassName("carousel-images")[0].getElementsByTagName("img");
-  if (n >= slides.length) {slideIndex = 0}
-  if (n < 0) {slideIndex = slides.length - 1}
-  for (i = 0; i < slides.length; i++) {
-      slides[i].style.display = "none";
-  }
-  slides[slideIndex].style.display = "block";
-}
-``` -->
-
 ## Installation
 
 Get started with these simple steps:
@@ -162,4 +171,15 @@ Reed Vogt - [LinkedIn Profile](https://www.linkedin.com/in/reed-vogt-student/)
 - [MongoDB](https://www.mongodb.com/)
 - [Netlify](https://www.netlify.com/)
 - [Nivo Charts](https://nivo.rocks/)
+- [ReCharts](https://recharts.org/)
+- [Jest](https://jestjs.io/)
+- [ESLint](https://eslint.org/)
+- [Prettier](https://prettier.io/)
+- [Node.js](https://nodejs.org/)
+- [Express](https://expressjs.com/)
+- [bcrypt](https://www.npmjs.com/package/bcrypt)
+- [JWT](https://jwt.io/)
+- [Helmet](https://helmetjs.github.io/)
+
+`````markdown
 `````

cleanup/MainContentSection.jsx

@@ -14,7 +14,7 @@
 // import MDBox from '../REUSABLE_COMPONENTS/MDBOX';
 // import MDTypography from '../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography';
 // import MDAvatar from '../../layout/REUSABLE_COMPONENTS/MDAVATAR';
-// import MDButton from '../REUSABLE_COMPONENTS/MDBUTTON';
+// import RCButton from '../REUSABLE_COMPONENTS/RCButton';
 // import SingleCardAnimation from '../../assets/animations/SingleCardAnimation';
 // import CardChart from '../../layout/CardChart';
 // import useCardCronJob from '../../layout/useCardCronJob';
@@ -125,9 +125,9 @@
 //                     >
 //                       Manage Collections
 //                     </RCButton>
-//                     <MDButton variant="outlined" color="primary" size="medium">
+//                     <RCButton variant="outlined" color="primary" size="medium">
 //                       View Purchase History
-//                     </MDButton>
+//                     </RCButton>
 //                   </CardActions>
 //                 </Card>
 //               )}

package.json

@@ -69,7 +69,6 @@
     "sass": "^1.69.7",
     "shortid": "^2.2.16",
     "slick-carousel": "^1.8.1",
-    "socket.io-client": "^4.7.2",
     "stripe": "^12.14.0",
     "styled-components": "^6.1.8",
     "swiper": "^11.0.6",

src/App.js

@@ -4,12 +4,7 @@ import './assets/css/index.css';
 import './assets/css/card.css';
 import './assets/css/page.css';
 import Main from './Main';
-import {
-  UserProvider,
-  useMode,
-  CardProvider,
-  ConfiguratorProvider,
-} from './context';
+import { useMode, ConfiguratorProvider } from './context';
 import { ThemeProvider } from 'styled-components';
 import { CssBaseline, GlobalStyles } from '@mui/material';
 import { ParallaxProvider } from 'react-scroll-parallax';
@@ -24,11 +19,7 @@ const App = () => {
       <GlobalStyles />
       <ParallaxProvider>
         <ConfiguratorProvider>
-          <UserProvider>
-            <CardProvider>
-              <Main />
-            </CardProvider>
-          </UserProvider>
+          <Main />
         </ConfiguratorProvider>
       </ParallaxProvider>
     </ThemeProvider>

src/Main.jsx

@@ -11,14 +11,16 @@ import LoadingOverlay from './layout/REUSABLE_COMPONENTS/system-utils/LoadingOve
 import useManageCookies from './context/hooks/useManageCookies.jsx';
 import { ROUTE_CONFIG } from './data/route-config.jsx';
 
+// ==============================|| MAIN ROUTING ||============================== //
+
 const LazyRoute = ({ componentName, ...rest }) => {
   const Component = lazy(() => import(`./pages/${componentName}`));
   return <Component {...rest} />;
 };
 const Main = () => {
   const { getCookie } = useManageCookies();
   const { isLoggedIn, userId } = getCookie(['isLoggedIn', 'userId']);
-  const { isConfiguratorOpen, toggleConfigurator } = useConfiguratorContext();
+  const { isConfiguratorOpen } = useConfiguratorContext();
   return (
     <PageLayout
       sx={{

src/assets/themes/base/customColorPalettes.jsx

@@ -105,14 +105,6 @@ const greenAccent = {
 //   800: '#0f7348',     // Dark, rich green
 //   900: '#2e7c67'      // Darkest shade, used for the deepest contrast
 // };
-
-// const primaryPalette = {
-//   main: '#18b984', // Greenish shade vibrant and suitable for primary buttons and icons
-//   light: '#4cceac', // Lighter green for backgrounds or less emphasized components
-//   dark: '#1e5245', // Dark green for text or dramatic background
-//   focus: 'rgba(24, 185, 132, 0.15)', // Slightly transparent green for focus states
-//   contrastText: '#fff', // White for text that contrasts against the primary shades
-// };
 const redAccent = {
   darkest: '#2c100f',
   darker: '#58201e',

src/assets/themes/base/palette.jsx

@@ -75,6 +75,16 @@ const palette = {
   transparent: {
     main: 'transparent',
   },
+  black: {
+    light: '#212121',
+    main: '#1C1C1C',
+    focus: '#26242C',
+    dark: '#0B0C0E',
+  },
+  white: {
+    main: '#ffffff',
+    focus: '#E8E8E8',
+  },
 };
 
 export default palette;

src/assets/themes/components/buttons/text.jsx

@@ -2,7 +2,7 @@ import colors from '../../base/colors';
 import typography from '../../base/typography';
 import pxToRem from '../../functions/pxToRem';
 
-const { text, info, secondary, transparent } = colors;
+const { text, info, success, secondary, transparent } = colors;
 const { size } = typography;
 
 export default {
@@ -57,14 +57,14 @@ export default {
   },
 
   primary: {
-    color: info.main,
+    color: success.main,
 
     '&:hover': {
-      color: info.main,
+      color: success.main,
     },
 
     '&:focus:not(:hover)': {
-      color: info.focus,
+      color: success.focus,
       boxShadow: 'none',
     },
   },

src/assets/themes/components/index.jsx

@@ -12,16 +12,8 @@ import cardContent from './card/cardContent';
 import slider from './slider';
 import switchButton from './forms/switchButton';
 import globals from '../base/globals';
-const cssbaseline = {
-  styleOverrides: `
-  body {
-    background-color: #f0f2f5; // Example background color
-    font-family: 'Roboto', sans-serif; // Default font
-    display: 'flex',
-    flexGrow: 1,
-  }
-  `,
-};
+import tabs from './tabs';
+import tab from './tabs/tab';
 
 export const components = {
   MuiCssBaseline: {
@@ -52,7 +44,8 @@ export const components = {
   MuiCard: { ...card },
   MuiCardMedia: { ...cardMedia },
   MuiCardContent: { ...cardContent },
-
+  MuiTabs: { ...tabs },
+  MuiTab: { ...tab },
   // MuiContainer: container,
 };
 

src/assets/themes/components/tabs/index.jsx

@@ -0,0 +1,47 @@
+import colors from 'assets/themes/base/colors';
+import borders from 'assets/themes/base/borders';
+import boxShadows from 'assets/themes/base/boxShadows';
+import pxToRem from 'assets/themes/functions/pxToRem';
+
+const { grey, white, success } = colors;
+const { borderRadius } = borders;
+const { tabsBoxShadow } = boxShadows;
+
+export default {
+  styleOverrides: {
+    root: {
+      position: 'relative',
+      backgroundColor: grey.default,
+      borderRadius: borderRadius.xl,
+      minHeight: 'unset',
+      padding: pxToRem(4),
+    },
+
+    flexContainer: {
+      height: '100%',
+      position: 'relative',
+      zIndex: 10,
+    },
+
+    fixed: {
+      overflow: 'unset !important',
+      overflowX: 'unset !important',
+    },
+
+    vertical: {
+      '& .MuiTabs-indicator': {
+        width: '100%',
+        // color: `${success.main} !important`,
+      },
+    },
+
+    indicator: {
+      height: '100%',
+      borderRadius: borderRadius.lg,
+      backgroundColor: success.dark,
+      boxShadow: tabsBoxShadow.indicator,
+      transition: 'all 500ms ease',
+      color: `${success.dark} !important`,
+    },
+  },
+};