![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98x26p65l9ipz9tckn2b.jpg) ### **Defining Our Core Frontend Stack** Here's the core stack we'll be using: - **React** - as the view library - **Zustand** - for global state management - **Vite** - as the bundler - **Tailwind CSS** - for styling ### **Setting Up the Frontend App** Let's get started with the frontend setup. Begin by creating the **`project`** folder and initializing a Vite project: ```jsx cd ./project npm create vite@latest ✔ Project name: … ./ ✔ Select a framework: › React ✔ Select a variant: › TypeScript + SWC npm install ``` Cool! We have App with the following structure (or similar one if in the future templae changes) ```jsx project-root/ │ ├── node_modules/ │ ├── public/ │ ├── src/ │ ├── assets/ │ │ ├── App.css │ │ ├── App.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts ``` Let’s add port config so our app runs every time with the same ```tsx import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig({ server: { port: 3000, }, plugins: [react()], }); ``` ### **Tweaking ESLint** Firstly, we need to tweak ESLint. The default template sets recommended settings, which do not enforce a specific code style strictly. So let's improve this by updating the **`eslint.config.js`** file with: ```jsx import js from "@eslint/js"; import globals from "globals"; import reactHooks from "eslint-plugin-react-hooks"; import reactRefresh from "eslint-plugin-react-refresh"; import tseslint from "typescript-eslint"; export default tseslint.config( { ignores: ["dist"] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ["**/*.{ts,tsx}"], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { "react-hooks": reactHooks, "react-refresh": reactRefresh, }, rules: { ...reactHooks.configs.recommended.rules, "react-refresh/only-export-components": [ "warn", { allowConstantExport: true }, ], "@typescript-eslint/no-explicit-any": "error" }, } ); ``` ### **Adding Prettier** To ensure a consistent code style, let's add prettier. Create a **`.prettierrc`** file with the following contents: ```jsx { "tabWidth": 4, "useTabs": false, "jsxSingleQuote": false, "bracketSpacing": true, "jsxBracketSameLine": false } ``` Now after you run the project **npm run dev** you should see starting screen like this one ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiaejqzfulbi4hvylo4v.png) ### **Configuring Tailwind CSS** Here comes tailwind configurations. Firstly Install tailwind: ```jsx npm install -D tailwindcss postcss autoprefixer npm install @heroicons/react npx tailwindcss init -p ``` You should see a couple new configurational files in the root not ```jsx tailwind.config.js postcss.config.js ``` to the index.html we will add link to tailwind font: ```html Money manager

``` Secondly, add configurations inside tailwind.config.js so that the library knows where is our code place ```jsx const defaultTheme = require('tailwindcss/defaultTheme') /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { fontFamily: { sans: ['Inter var', ...defaultTheme.fontFamily.sans], }, }, }, plugins: [], } ``` Thirdly, import tailwind library in index.css to have styles availiable in our bundle ```jsx @tailwind base; @tailwind components; @tailwind utilities; ``` Finally we are going to test our changes. Inside of the App.tsx write a hello world with tailwind classes ```jsx function App() { return ( <>

Hello world!

); } export default App; ``` If you see screen like this after reloading the project you’ve done everything right! ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4b4fmmsl2j509fzxcyi.png) ### **Clean Up** Delete any predefined template files and folders you don't need. Your final folder structure should look like this: ```jsx node_modules public src ├─ App.tsx ├─ index.css ├─ main.tsx ├─ vite-env.d.ts .gitignore .prettierignore .prettierrc README.md eslint.config.js index.html package-lock.json package.json postcss config.js tailwind.config.js tsconfig.app.json tsconfig.json tsconfig.node.json vite.config.ts ``` In case you face some issues or bugs you can copy code for this first lessong from this link: This concludes the setup for our frontend app. Happy coding!

edwardfedoruk

How to set up modern React App (SPA)

Join Our Newsletter. No Spam, Only the good stuff.