CSS Preview: Border Radius

A modern minimal Vite + React + TypeScript template with ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦

---

Table of Contents

• Features
• Getting Started
• Contributing
• Support
• License

---

📋 Features

Build with

• ⚡️ Vite - Next Generation Frontend Tooling
• ⚛️ React 18 - A JavaScript library for building user interfaces
• 💎 TypeScript - Why not?!
• 🔨 EsLint - Pluggable JavaScript linter
• 🌀 Prettier - Opinionated Code Formatter
• 🐺 Husky - Native Git hooks
• ⚙️ Jest - Testing libraries
• ⌨️ Absolute Imports
• 📑 Commitlint - Linting your commits based on commit convention

---

🚀 Getting Started

Prerequisites

• To run any ReactJS application you need to configure the environment on your machine.

• Setting the environment is a simple process, so it's recommended to follow the NodeJS documentation, and if you want, install Yarn as Package Manager.

Clone

• Clone this repo to your local machine using:

git clone https://github.com/csorlandi/css-preview-react.git

Setup

• Install project dependencies;

    yarn install
    // or
    npm install

• Run development mode

    yarn dev
    // or
    npm run dev

---

Available commands

In this project, you can run the following scripts:

Script	Description
yarn dev	Runs the app in the development mode.
yarn build	Builds the app for production to the dist folder.
yarn preview	Builds the app for production to the dist folder, and run locally server.
yarn lint	Runs the Eslint and show code problems
yarn lint:fix	Runs the Eslint and fix the code problems
yarn format	Runs the Prettier and fix code style
yarn compile	Runs the TS Compiling
yarn test	Run the app tests.
yarn commit	Open the CZ CLI to create a message to your commit.

About the absolute imports

To correctly functioning (code and tests) of absolute imports, you should add some codes in some files, like:

• jest.config.js
• vite.config.ts
• tsconfig.json

---

🤔 Contributing

To get started...

Step 1

• 🍴 Fork this repo!

Step 2

• 👯 Clone this repo to your local machine using git clone https://github.com/csorlandi/css-preview-react.git

Step 3

• 🎋 Create your feature branch using git checkout -b my-feature

Step 4

• ✅ Commit your changes using git commit -m 'feat: My new feature';

Step 5

• 📌 Push to the branch using git push origin my-feature;

Step 6

• 🔃 Create a new pull request

After your Pull Request is merged, can you delete your feature branch.

---

📌 Support

Reach out to me at one of the following places!

• Linktree at @csorlandi
• Linkedin at Claudio Orlandi
• Instagram at Claudio Orlandi
• Youtube at Claudio Orlandi

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with 🧡 Enjoy it!