Changed structure somewhat

client/.env

-SASS_PATH=src/scss
\ No newline at end of file

client/src/components/App/app.scss → client/src/App.scss

 
-@use 'scss/settings';
+@use 'styles/settings';
 
 html {
     scroll-behavior: smooth;

client/src/components/App/App.test.tsx → client/src/App.test.tsx

 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './index';
+import App from 'App';
 
 test('app renders `Home`', () => {
     render(<App />);

client/src/components/App/index.tsx → client/src/App.tsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
-import Home from 'components/pages/Home';
-import './app.scss';
+import Home from 'pages/Home';
+import 'App.scss';
 
 export default function App() {
     return (

client/src/adapters/constants.ts

+
+export const DEMO_CONSTANT = 42;
+

client/src/components/ui/Button/button.scss

+
+@use 'styles/settings';
+
+.button {
+    padding: 14px 50px;
+    font-size: 18px;
+    font-weight: settings.$weight-bold;
+    background: radial-gradient(60% 100% at 50% 0%, #D298FF 0.01%, settings.$primary 100%);
+    box-shadow: 0px 5px 15px rgba(settings.$primary, 0.25);
+    border-radius: 25px;
+    display: inline-block;
+    color: #fff;
+    transition: 300ms ease;
+    text-transform: uppercase;
+    user-select: none;
+}
+
+.button:hover {
+    box-shadow: 0px 10px 25px rgba(settings.$primary, 0.35);
+    cursor: pointer;
+    color: #fff;
+    transform: translateY(-5%);
+}
+
+.button:active {
+    transform: scale(0.9);
+}
+

client/src/components/ui/Button/index.tsx

+
+import { ReactNode } from "react";
+import React from "react";
+
+import './button.scss';
+
+export default function Button({children}: {children: ReactNode}) {
+    return (
+        <div className="button">
+            {children}
+        </div>
+    );
+}
+

client/src/index.tsx

 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from 'components/App';
+import App from 'App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
 

client/src/components/pages/Home/index.tsx → client/src/pages/Home/index.tsx

 
+import { DEMO_CONSTANT } from 'adapters/constants';
+import Button from 'components/ui/Button';
+import './home.scss';
+
 export default function Home() {
     return (
         <div>
-            Home
+            Home {DEMO_CONSTANT}
+            <Button>Hello world</Button>
         </div>
     );
 }