React + TailwindCSS + TypeScript + Vite

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🎨 VSCode Snippets
6. 🕸️ Snippets
7. 🔗 Links
8. 🚀 Future Upgrade

🚨 Learning Point

This repository contains the code corresponding to an in-depth learning from .

Like learning this coding exercise by walking thru Tailwind CSS and ReactJS online documentation.

🤖 Introduction

Understand Tailwind CSS in applying on ReactJS in two parts by first learning fundamentals, advanced techniques, and theming. Then, build a stunning landing page, applying learned skills to create a visually impressive website.

Thru the process of this website, bugs and unexpected error arises which is good as part of my learning skills set. JS Mastery and Stackoverflow Community definitely serves a big help

Join JSMastery @ Discord Apps

⚙️ Tech Stack

• React.JS
• Tailwind CSS
• Vite
• Typescript

🔋 Features

👉 Maximizing Tailwind CSS: Discover tips and tricks to make the most out of Tailwind CSS.

👉 Understanding Tailwind Internals: Dive into the inner workings of Tailwind, gaining insights into its structure and optimizations.

👉 Best Practices: Learn Tailwind's best practices for efficient and maintainable code.

👉 Theming: Explore techniques to add different themes to your website using Tailwind CSS.

👉 JavaScript-like Tasks with Tailwind: Discover how Tailwind CSS can be used to achieve tasks that typically require JavaScript code

While creating a simple furniture website a,

👉 Complex Header Section: A visually appealing hero section showcasing key elements.

👉 WHy Choosing Us: A section highlighting popular Nike products

👉 About Us Section: An informative "About Us" section with a unique design.

👉 Materials Section: Showcase special offers in an eye-catching manner

👉 Client Reviews: A review section for a captivating user experience

👉 Services: A services section with Tailwind styling, encouraging user engagement

👉 Footer: A comprehensive footer section containing various links

👉 Mobile Responsive: The entire website is responsive across various devices, emphasizing Tailwind's mobile-friendly capabilities.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)
• Typescript
• Vite

Cloning the Repository

git clone https://github.com/MichaelBoitmann/Muebles-ReactJS.git
cd dynato

Installation

Commands to initial setup

npm create vite@latest

yarn add tailwindcss autoprefixer postcss

npx tailwindcss init -p

Install the project dependencies using npm:

npm install

Running the Project

npm start

🎨 VSCode Theme And Extensions :

• Auto Import
• Glasslt-VSC
• Material Icon theme
• Simple React Snippets
• One Dark Palenight
• Prettier Code Formatter
• Tailwind CSS IntelliSense

Open http://localhost:5173 in your browser to view the project.

🕸️ Snippets

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

App.tsx

import Header from "./components/Header";
import Why from "./components/Why";
import Products from "./components/Products";
import Experiences from "./components/Experiences";
import Materials from "./components/Materials";
import Reviews from "./components/Reviews";
import Footer from "./components/Footer";

const App = () => {
  return (
    <div className="w-full flex flex-col">
      <Header />
      <Why />
      <Products />
      <Experiences />
      <Materials />
      <Reviews />
      <Footer />
    </div>
  )
}

export default App

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  font-family: "Gilroy", sans-serif;
  min-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: white;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

html {
  max-width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  src: url(".assets/fonts/Gilroy-Regular.ttf")
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  src: url(".assets/fonts/Gilroy-Regular.ttf")
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  src: url(".assets/fonts/Gilroy-Regular.ttf")
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 500;
  src: url(".assets/fonts/Gilroy-Medium.ttf")
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 600;
  src: url(".assets/fonts/Gilroy-SemiBold.ttf")
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 700;
  src: url(".assets/fonts/Gilroy-Bold.ttf")
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 800;
  src: url(".assets/fonts/Gilroy-ExtraBold.ttf")
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 900;
  src: url(".assets/fonts/Gilroy-Black.ttf")
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html","./src/**/*.{js,tx,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    // require('@tailwindcss/typography'),
    // require('@tailwindcss/forms'),
    // require('@tailwindcss/aspect-ratio'),
    // require('@tailwindcss/container-queries'),
  ],
}

🔗 Links

• Tailwind Play

🕸️ Future Upgrade

1. Routing of each Nav Bar with working page
2. Working Login and Logout
3. Improvement on Responsive Screen sizes
4. Adding Stripe technology to be able to purchase the items
5. Additional items other than shoes
6. Working on some animation on each page
7. Working Bar line when page is on smaller screen

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 uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list