Cra-template-configured NPM

Pre-Configured React Project with TypeScript, Tailwind CSS, SCSS, ESLint, and Prettier

This project is a custom setup for a React application using TypeScript, Tailwind CSS, SCSS, ESLint, and Prettier. It includes a custom directory structure and is configured to follow best practices.

Project Overview
Features
Installation
Available Scripts
Directory Structure
Technologies Used
Contributing
License

Project Overview

This project is a React app set up using TypeScript for type safety and Tailwind CSS for utility-first styling. It includes SCSS for additional styling flexibility. The project is linted using ESLint and automatically formatted using Prettier.

Features

React with TypeScript: Improved type checking and autocomplete support.
Tailwind CSS: Rapid UI development with utility-first CSS classes.
SCSS Support: Additional flexibility in styling.
ESLint: Static code analysis for catching errors early.
Prettier: Automatic code formatting for consistent style.
Custom Directory Structure: A structured way to organize components, assets, and utilities.

Installation

To get started with the project:

Create a New Project Using the Template:

npx create-react-app my-app --tempalte configured

Change Directory to the New Project:
```
cd my-app
```
Install Additional Dependencies (If Any)
```
npm install
```
Verify the Configurations
- TypeScript: Check if tsconfig.json is present.
- Tailwind CSS: Verify tailwind.config.js is correctly set up and that your index.css or index.scss imports the Tailwind directives (@tailwind base;, @tailwind components;, @tailwind utilities;).
- SCSS: Ensure your styling files are using .scss extension.
- ESLint: Ensure .eslintrc.json is present and configured.
- Prettier: Verify the .prettierrc.json file for formatting rules.
Run Your React App
```
npm start
```

This will launch the project in development mode. Open http://localhost:3000 to view it in the browser.

Available Scripts

In the project directory, you can run:

npm start: Runs the app in development mode.
npm run build: Builds the app for production.
npm run lint: Lints the project using ESLint.
npm run format: Formats the code using Prettier.

Directory Structure

Here’s an overview of the project’s directory structure:

my-app/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── assets/              # Static assets like images, fonts, etc.
│   │   ├── images/          # images.
│   │   └── styles/          # global styles.
│   │       └── global.scss
│   ├── components/          # Reusable components
│   ├── Configs/             # App configuration files (e.g. constants)
│   │   ├── apiConfig.ts     # API base URLs, keys, etc.
│   │   └── appConfig.ts     # General app settings (e.g. theme)
│   ├── context/             # Context Providers (e.g. ThemeProvider)
│   ├── features/            # Redux Slices or Context features
│   ├── helpers/             # Any helper classes
│   ├── hooks/               # Custom hooks (e.g. useFetch.ts)
│   ├── pages/               # Page-level components
│   ├── services/            # API calls and service functions
│   ├── store/               # Redux store or Context provider setup
│   ├── tests/               # Tests
│   ├── types/               # TypeScript types and interfaces
│   ├── utils/               # Utility functions (e.g. dateUtils)
│   ├── App.module.scss      # Main App-level styles 
│   ├── App.tsx              # Main App component
│   ├── index.scss           # Global styles import
│   ├── index.tsx            # Entry point for React
│   └── react-app-env.d.ts   # TypeScript declaration file for React
├── .eslintrc.json           # ESLint configuration
├── .prettierrc.json         # Prettier configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── postcss.config.js        # PostCSS configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Dependencies and scripts