├── .env
├── src
├── vite-env.d.ts
├── static
│ └── img
│ │ └── logo.png
├── ts
│ ├── routes.d.ts
│ ├── vite-env.d.ts
│ ├── layout.d.ts
│ ├── nprogress.d.ts
│ └── api.d.ts
├── sass
│ ├── helpers
│ │ ├── _bg.scss
│ │ └── _iframe.scss
│ ├── libs
│ │ └── _nprogress.scss
│ ├── pages
│ │ ├── _index.scss
│ │ └── _fetch.scss
│ ├── core
│ │ ├── _dev.scss
│ │ ├── _spacing.scss
│ │ ├── _colors.scss
│ │ ├── _font.scss
│ │ └── _trejocode.scss
│ ├── components
│ │ ├── _footer.scss
│ │ └── _header.scss
│ └── style.scss
├── App.tsx
├── utils
│ └── session.ts
├── routes
│ ├── Private.tsx
│ ├── Restrict.tsx
│ └── index.tsx
├── components
│ ├── nprogress
│ │ ├── Container.tsx
│ │ ├── Spinner.tsx
│ │ ├── index.tsx
│ │ └── Bar.tsx
│ ├── footer
│ │ └── index.tsx
│ └── header
│ │ └── index.tsx
├── main.tsx
├── pages
│ ├── Private.tsx
│ ├── Restrict.tsx
│ ├── NotFound.tsx
│ ├── Layout.tsx
│ ├── Index.tsx
│ └── Fetching.tsx
└── api
│ └── index.ts
├── public
├── robots.txt
├── favicon.ico
├── icons
│ ├── icon-144.png
│ ├── icon-192.png
│ ├── icon-32.png
│ ├── icon-48.png
│ ├── icon-512.png
│ └── icon-96.png
├── sitemap.xml
├── manifest.json
└── vite.svg
├── tsconfig.node.json
├── vite.config.ts
├── .gitignore
├── .eslintrc.cjs
├── .github
└── workflows
│ └── deploy.yml
├── tsconfig.json
├── package.json
├── index.html
├── README.md
└── pnpm-lock.yaml
/.env:
--------------------------------------------------------------------------------
1 | VITE_API_URL = https://reqres.in/api
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/icons/icon-144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/public/icons/icon-144.png
--------------------------------------------------------------------------------
/public/icons/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/public/icons/icon-192.png
--------------------------------------------------------------------------------
/public/icons/icon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/public/icons/icon-32.png
--------------------------------------------------------------------------------
/public/icons/icon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/public/icons/icon-48.png
--------------------------------------------------------------------------------
/public/icons/icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/public/icons/icon-512.png
--------------------------------------------------------------------------------
/public/icons/icon-96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/public/icons/icon-96.png
--------------------------------------------------------------------------------
/src/static/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/react-boilerplate/HEAD/src/static/img/logo.png
--------------------------------------------------------------------------------
/src/ts/routes.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description Tipado de las rutas
3 | */
4 |
5 | export type TypeChildrenProp = {
6 | children: JSX.Element;
7 | };
8 |
--------------------------------------------------------------------------------
/src/ts/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | interface ImportMetaEnv {
4 | readonly VITE_API_URL: string;
5 | }
6 |
7 | interface ImportMeta {
8 | readonly env: ImportMetaEnv;
9 | }
10 |
--------------------------------------------------------------------------------
/src/ts/layout.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description Tipado del componente Layout
3 | */
4 |
5 | export type TypeLayoutProps = {
6 | title: string;
7 | keywords?: string;
8 | description: string;
9 | children: JSX.Element;
10 | };
11 |
--------------------------------------------------------------------------------
/src/sass/helpers/_bg.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @version 1.0.1
3 | * @author Trejocode - Sergio
4 | * @description Mixin para bakcgroundImages
5 | */
6 |
7 | @mixin backgroundImage {
8 | background-size: cover;
9 | background-position: center;
10 | background-repeat: no-repeat;
11 | }
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true,
8 | "strict": true
9 | },
10 | "include": ["vite.config.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/src/sass/libs/_nprogress.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @version 1.0.0
3 | * @author Trejocode - Sergio
4 | * @description Estilos del Spinner del NProgress
5 | */
6 |
7 | @keyframes spinner {
8 | 0% {
9 | transform: rotate(0deg);
10 | }
11 | 100% {
12 | transform: rotate(360deg);
13 | }
14 | }
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | resolve: {
8 | alias: {
9 | "@": path.resolve(__dirname, "./src"),
10 | },
11 | },
12 | plugins: [react()],
13 | });
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @description Punto de entrada de la aplicación
3 | */
4 |
5 | import Routes from "./routes";
6 | import { HelmetProvider } from "react-helmet-async";
7 |
8 | const App = (): JSX.Element => (
9 |
10 |
11 |
12 |
13 |
14 | );
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/utils/session.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description Función para obtener la validación de la sesisón de usuario
3 | */
4 | const verifySession = (): boolean => {
5 | const data = localStorage.getItem("session_token");
6 |
7 | if (data) {
8 | return true;
9 | } else {
10 | return false;
11 | }
12 | };
13 |
14 | export const sessionUtils = {
15 | verifySession,
16 | };
17 |
--------------------------------------------------------------------------------
/src/ts/nprogress.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @description Tipado del componente Progress
3 | */
4 |
5 | export type TypeProgressProps = {
6 | isAnimating: boolean;
7 | };
8 |
9 | export type TypeBarProps = {
10 | progress: number;
11 | animationDuration: number;
12 | };
13 |
14 | export type TypeContainerProps = {
15 | isFinished: boolean;
16 | children: JSX.Element;
17 | animationDuration: number;
18 | };
19 |
--------------------------------------------------------------------------------
/src/sass/helpers/_iframe.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @version 1.0.1
3 | * @author Trejocode - Sergio
4 | * @description Habilita los