Skip to content

Commit

Permalink
Merge pull request #42 from reedoooo/clean/styledAndCustomComponents
Browse files Browse the repository at this point in the history
cleaning up styled and custom components
  • Loading branch information
reedoooo authored May 4, 2024
2 parents 35eff7c + 2ad104f commit 835169a
Show file tree
Hide file tree
Showing 180 changed files with 2,451 additions and 4,916 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ package-lock.json
/src/assets/cards
# production
/build
/future-additions

# misc
.DS_Store
Expand Down
8 changes: 7 additions & 1 deletion .hintrc
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,11 @@
]
}
]
}
},
"browserslist": [
"defaults",
"not ie 11",
"not ios_saf <= 14.8",
"not safari <= 14.1"
]
}
61 changes: 30 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

TCG Enhanced Cardstore is a full-stack web application designed for trading card game enthusiasts. It offers an all-encompassing platform to effortlessly manage card collections, construct decks, and transact securely. Designed with responsiveness and security at its core, this platform caters to the needs of both occasional collectors and professional traders.


### Key Features

- **Card Search & Management**: Robust search capabilities and collection management tools.
Expand All @@ -15,6 +14,36 @@ 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.

## Gallery

Here's a glimpse of what TCG Enhanced Cardstore offers:

### Home Page

![Home Page](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/homepage.png)

### Deck Builder

![Deck Builder](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/deck-home.png)

### Portfolio

![Portfolio Home](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/collection-home.png)

### Cart

![Cart](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/cart-checkout.png)

### Profile

![Profile](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/profile-home.png)

### Store Search

![Store Search](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/store-home.png)

_For an interactive experience, visit the [Live Demo](https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/)._

## Technologies

### Frontend
Expand Down Expand Up @@ -101,36 +130,6 @@ The backend for the Enhanced Card Store is built using a diverse set of technolo
- **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

Here's a glimpse of what TCG Enhanced Cardstore offers:

### Home Page

![Home Page](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/homepage.png)

### Deck Builder

![Deck Builder](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/deck-home.png)

### Portfolio

![Portfolio Home](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/collection-home.png)

### Cart

![Cart](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/cart-checkout.png)

### Profile

![Profile](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/profile-home.png)

### Store Search

![Store Search](https://github.com/reedoooo/enhanced-card-store/blob/f114a3d36e7b81f84b6eb1bc0d071cd4395ea611/public/images/pages/store-home.png)

_For an interactive experience, visit the [Live Demo](https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/)._

## Installation

Get started with these simple steps:
Expand Down
2 changes: 1 addition & 1 deletion jsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"],
"include": ["src", "future-additions/SearchSettings.jsx"],
"exclude": ["node_modules, build"],
"paths": {
"/*": ["src/*"]
Expand Down
60 changes: 56 additions & 4 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,65 @@
// App.js
import React, { useEffect } from 'react';
import React, { Suspense, lazy } from 'react';
import './assets/css/index.css';
import './assets/css/card.css';
import './assets/css/page.css';
import Main from './Main';
// ==============================|| APP ||============================== //
import useManageCookies from 'context/hooks/useManageCookies';
import useConfigurator from 'context/hooks/useConfigurator';
import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
import Navigation from 'layout/navigation';
import Configurator from 'layout/REUSABLE_COMPONENTS/Configurator';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
import { Route, Routes } from 'react-router-dom';
import PrivateRoute from 'layout/navigation/PrivateRoute';
import LoginDialog from 'pages/LoginDialog';
import { ROUTE_CONFIG } from 'data';

// ==============================|| APP ||============================== //
const LazyRoute = ({ componentName, ...rest }) => {
const Component = lazy(() => import(`./pages/${componentName}`));
return <Component {...rest} />;
};
const App = () => {
return <Main />;
const { getCookie } = useManageCookies();
const { isLoggedIn } = getCookie(['isLoggedIn']);
const { isConfiguratorOpen } = useConfigurator();
return (
<PageLayout
sx={{
backgroundColor: '#3D3D3D',
}}
>
<Navigation isLoggedIn={isLoggedIn} />
{isConfiguratorOpen && <Configurator />}
<TransitionGroup component={null} exit={false}>
<CSSTransition key={location.key} classNames="fade" timeout={300}>
<Suspense fallback={<LoadingOverlay />}>
<Routes>
{ROUTE_CONFIG.routes.map(
({ path, componentName, isPrivate }, index) => (
<Route
key={index}
path={path}
element={
isPrivate ? (
<PrivateRoute>
<LazyRoute componentName={componentName} />
</PrivateRoute>
) : (
<LazyRoute componentName={componentName} />
)
}
/>
)
)}
</Routes>
</Suspense>
</CSSTransition>
</TransitionGroup>
<LoginDialog />
</PageLayout>
);
};

export default App;
62 changes: 0 additions & 62 deletions src/Main.jsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/assets/animations/LoadingCardAnimation.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const sizes = {

function LoadingCardAnimation({ selected, size = 'medium' }) {
const mount = useRef(null);
const placeholderImage = '../../assets/images/placeholder.png'; // Replace with your placeholder image path
const placeholderImage = 'assets/images/placeholder.png'; // Replace with your placeholder image path
const placeholderTexture = new THREE.TextureLoader().load(placeholderImage);

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions src/assets/animations/SingleCardAnimation.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useRef } from 'react';
import { useSpring, animated } from 'react-spring';
import placeholder from '../../assets/images/placeholder.jpeg';
import placeholder from 'assets/images/placeholder.jpeg';

const SingleCardAnimation = ({ cardImage }) => {
const containerRef = useRef(null);
Expand Down Expand Up @@ -54,7 +54,7 @@ export default SingleCardAnimation;

// import React, { useRef } from 'react';
// import { useSpring, animated } from 'react-spring';
// import placeholder from '../../assets/images/placeholder.jpeg';
// import placeholder from 'assets/images/placeholder.jpeg';

// const SingleCardAnimation = ({ cardImage }) => {
// const containerRef = useRef(null);
Expand Down
File renamed without changes.
13 changes: 7 additions & 6 deletions src/assets/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--primary: #6a59ff;
--white: #ffffff;
--bg: #f5f5f5;
--button-bg-color: #1976d2; /* Original color, but let's introduce a blue scheme */
/* --button-bg-color: #1976d2; Original color, but let's introduce a blue scheme */
--button-hover-bg-color: #4a6da7; /* Subtle blue for hover state */
--button-hover-border-color: #34597f; /* A darker blue for border on hover */
--button-border-color: #6a59ff; /* Initial border color */
Expand Down Expand Up @@ -101,8 +101,8 @@ body {

form {
border-radius: 15px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.13);
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -163,8 +163,8 @@ button {

.dialog-login {
border-radius: 15px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.13);
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -196,8 +196,9 @@ button {
.hero-section-container {
background: rgba(189, 181, 181, 0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(5px);

border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
/* padding: 30px 0px; */
Expand Down Expand Up @@ -306,9 +307,9 @@ button {
/* } */

@media (max-width: 500px) {
.swiper_container {
/* .swiper_container {
/* height: 47rem; */
}
/* } */ */
.swiper-slide {
width: 28rem !important;
/* height: 36rem !important; */
Expand Down
2 changes: 1 addition & 1 deletion src/assets/css/page.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.gradient-background {
background: linear-gradient(180deg, #0172af, #74febd);
/* background: linear-gradient(180deg, #0172af, #74febd); */
background-size: 120% 120%;
animation: gradient-animation 8s ease infinite;
}
Expand Down
8 changes: 2 additions & 6 deletions src/assets/themes/Transitions.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import { forwardRef } from 'react';

// types
import PropTypes from 'prop-types';

// material-ui
import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material';
import React from 'react';

// ==============================|| TRANSITIONS ||============================== //

const Transitions = forwardRef(
const Transitions = React.forwardRef(
({ children, position, type, direction, ...others }, ref) => {
let positionSX = {
transformOrigin: '0 0 0',
Expand Down
12 changes: 6 additions & 6 deletions src/assets/themes/base/borders.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import colors from './colors';
import pxToRem from '../functions/pxToRem';
import colors from 'assets/themes/base/colors';
import pxToRem from 'assets/themes/functions/pxToRem';

const { grey } = colors;

const borders = {
Expand All @@ -16,13 +17,12 @@ const borders = {
4: pxToRem(4),
5: pxToRem(5),
},

borderRadius: {
xs: pxToRem(1.6),
sm: pxToRem(2),
md: pxToRem(6),
lg: pxToRem(8),
xl: pxToRem(12),
md: pxToRem(6), // px equivalent 6/16 = 0.375rem or
lg: pxToRem(8), // px equivalent 8/16 = 0.5rem or 50% of 1rem which is 16px
xl: pxToRem(12), // px equivalent 12/16 = 0.75rem or 75% of 1rem which is 16px
xxl: pxToRem(16),
section: pxToRem(160),
},
Expand Down
2 changes: 1 addition & 1 deletion src/assets/themes/base/cleanup/theme.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createTheme } from '@mui/material/styles';

// assets
import colors from '../../scss/_themes-vars.module.scss';
import colors from 'scss/_themes-vars.module.scss';

// project imports
// import componentStyleOverrides from './compStyleOverride';
Expand Down
Loading

0 comments on commit 835169a

Please sign in to comment.