Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions client/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions client/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
8 changes: 8 additions & 0 deletions client/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
74 changes: 74 additions & 0 deletions client/components/Layout.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { Layout as AntLayout, Menu, theme } from "antd";
import { PhoneOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";

const { Header, Content, Footer } = AntLayout;

const Layout = ({ children }) => {
const navigate = useNavigate();
const {
token: { colorBgContainer, borderRadiusLG },
} = theme.useToken();

return (
<AntLayout>
<Header
style={{
position: "sticky",
top: 0,
zIndex: 1,
width: "100%",
display: "flex",
alignItems: "center",
}}
>
<div className="demo-logo" />
<Menu
theme="dark"
mode="horizontal"
onClick={({ key }) => {
if (key === "phones-link") {
navigate("/phones");
}
}}
items={[
{
key: "phones-link",
icon: <PhoneOutlined />,
label: "Phones",
},
]}
style={{
flex: 1,
minWidth: 0,
}}
/>
</Header>
<Content
style={{
padding: "0 48px",
}}
>
<div
style={{
padding: 24,
minHeight: 380,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
{children}
</div>
</Content>
<Footer
style={{
textAlign: "center",
}}
>
Tech challenge ©2023 Created by Cristina Ramos
</Footer>
</AntLayout>
);
};

export default Layout;
1 change: 1 addition & 0 deletions client/core/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const API_URL = import.meta.env.VITE_API_URL || "http://localhost:5005";
13 changes: 13 additions & 0 deletions client/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading