feat: styling with tailwindcss

Author: divshekhar

.prettierrc.js

@@ -1,9 +1,9 @@
-module.exports = {
-  semi: false,
-  trailingComma: 'es5',
-  singleQuote: true,
-  jsxSingleQuote: false,
-  printWidth: 80,
-  tabWidth: 2,
-  endOfLine: 'auto',
-}
+module.exports = {
+  semi: true,
+  trailingComma: 'es5',
+  singleQuote: true,
+  jsxSingleQuote: false,
+  printWidth: 80,
+  tabWidth: 2,
+  endOfLine: 'auto',
+}

README.md

@@ -9,6 +9,7 @@
 This template is built with the following technologies:
 
 - Language: **TypeScript**
+- Styling: **TailwindCSS**
 - Testing: **Jest**
 - Linting: **ESLint**
 - Formatting: **Prettier**
@@ -55,6 +56,7 @@ npm run build
 ## Features
 
 - [x] TypeScript for improved code quality and developer experience
+- [x] TailwindCSS for responsive styling
 - [x] Jest for unit testing
 - [x] ESLint for linting and maintaining code consistency
 - [x] Prettier for automatic code formatting

package-lock.json

@@ -16,53 +16,53 @@
   "author": "Divyanshu Shekhar",
   "license": "ISC",
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.1",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.22.6",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@babel/core": "^7.22.20",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@babel/runtime": "^7.22.15",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.3",
-    "@types/react": "^18.2.15",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "autoprefixer": "^10.4.16",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
-    "lint-staged": "^13.2.3",
-    "prettier": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^14.0.1",
+    "postcss": "^8.4.30",
+    "postcss-loader": "^7.3.3",
+    "prettier": "^3.0.3",
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.3",
-    "typescript": "^5.1.6",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
     "webpack": "^5.88.2",
-    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0"

package.json

@@ -0,0 +1,6 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [tailwindcss('./tailwind.config.js'), autoprefixer],
+};

postcss.config.cjs

@@ -1,13 +1,13 @@
-import { FC } from 'react'
-import HomePage from './components/Home/HomePage'
+import React from 'react';
+import HomePage from './components/Home/HomePage';
 // import './App.css'
 
-const App: FC = () => {
+const App: React.FC = () => {
   return (
     <div id="App">
       <HomePage />
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/App.tsx

@@ -1,89 +1,18 @@
-import React, { useState, useEffect } from 'react'
-import axios from 'axios'
-import {
-  List,
-  ListItem,
-  ListItemAvatar,
-  Avatar,
-  ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
-  AppBar,
-  Toolbar,
-  Typography,
-  Container,
-} from '@mui/material'
-import { Refresh as RefreshIcon } from '@mui/icons-material'
-
-// Models
-import { ITrain } from '../../models/train'
-
-const TrainList: React.FC = () => {
-  const [trains, setTrains] = useState<ITrain[]>([])
-
-  const fetchTrainsData = async () => {
-    try {
-      // Replace the URL with your backend API endpoint
-      const response = await axios.get<ITrain[]>(
-        'http://localhost:5000/trains/all'
-      )
-      console.log('Trains List ', response.data)
-      setTrains(response.data)
-    } catch (error) {
-      console.error('Failed to fetch train data:', error)
-    }
-  }
-
-  useEffect(() => {
-    console.log('Use Effect Called')
-    fetchTrainsData()
-  }, [])
-
-  const handleRefresh = () => {
-    console.log('Refresh Button Clicked')
-    fetchTrainsData()
-  }
+import { FC } from 'react';
+import ReactTypescriptTemplateLogo from '../../assets/images/react-typescript-template.png';
 
+const HomePage: FC = () => {
   return (
-    <Container>
-      <AppBar position="static">
-        <Toolbar>
-          <Typography variant="h6">Train Schedules</Typography>
-          <ListItemSecondaryAction>
-            <IconButton edge="end" color="inherit" onClick={handleRefresh}>
-              <RefreshIcon />
-            </IconButton>
-          </ListItemSecondaryAction>
-        </Toolbar>
-      </AppBar>
-      <List>
-        {trains.map((train) => (
-          <ListItem key={train.trainNumber} alignItems="flex-start">
-            <ListItemAvatar>
-              <Avatar>{train.trainNumber}</Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              primary={train.trainName}
-              secondary={`Departure Time: ${train.departureTime.Hours}hrs:${train.departureTime.Minutes}mins:${train.departureTime.Seconds}secs | Delayed By: ${train.delayedBy}`}
-            />
-            <ListItemSecondaryAction>
-              <IconButton edge="end" aria-label="seats" color="inherit">
-                <Typography variant="subtitle2" color="inherit">
-                  Seats:
-                </Typography>
-                <Typography variant="body2" color="inherit">
-                  Sleeper: {train.seatsAvailable.sleeper}
-                </Typography>
-                <Typography variant="body2" color="inherit">
-                  AC: {train.seatsAvailable.AC}
-                </Typography>
-              </IconButton>
-            </ListItemSecondaryAction>
-          </ListItem>
-        ))}
-      </List>
-    </Container>
-  )
-}
+    <div className="text-center">
+      <h1 className="text-4xl font-bold my-2">React Typescript Template</h1>
+      <img
+        src={ReactTypescriptTemplateLogo}
+        width={500}
+        className="mx-auto"
+        alt="React-Typescript-Template"
+      />
+    </div>
+  );
+};
 
-export default TrainList
+export default HomePage;

src/assets/images/react-typescript-template.png

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DS Train Central</title>
+    <title>React Typescript Template</title>
 </head>
 
 <body>

src/components/Home/HomePage.tsx

@@ -1,11 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './styles.css'
-import App from './App'
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './styles.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/index.html

@@ -1,11 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.tsx

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

src/styles.css

@@ -1,6 +1,6 @@
-const path = require('path')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   entry: path.resolve(__dirname, '..', './src/index.tsx'),
@@ -22,8 +22,8 @@ module.exports = {
 
       // Loader for css files
       {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
 
       // Loader for image files
@@ -61,4 +61,4 @@ module.exports = {
       ],
     }),
   ],
-}
+};

tailwind.config.js

@@ -1,8 +1,8 @@
-const { merge } = require('webpack-merge');
-const commonConfig = require('./webpack.common.js');
-
-module.exports = (envVar) => {
-    const {env} = envVar;
-    const envConfig = require(`./webpack.${env}.js`);
-    return merge(commonConfig, envConfig);
-}
+const { merge } = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = (envVar) => {
+  const { env } = envVar;
+  const envConfig = require(`./webpack.${env}.js`);
+  return merge(commonConfig, envConfig);
+};

webpack/webpack.common.js

@@ -1,20 +1,20 @@
-// const webpack = require('webpack');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
-
-module.exports = {
-  mode: 'development',
-  devServer: {
-    hot: true,
-    open: true,
-  },
-  devtool: 'cheap-module-source-map',
-  plugins: [
-    // Specify development API URL
-    // new webpack.DefinePlugin({
-    //     "process.env": {
-    //         NODE_ENV: JSON.stringify("development"),
-    //     },
-    // }),
-    new ReactRefreshWebpackPlugin(),
-  ],
-}
+// const webpack = require('webpack');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  devServer: {
+    hot: true,
+    open: true,
+  },
+  devtool: 'cheap-module-source-map',
+  plugins: [
+    // Specify development API URL
+    // new webpack.DefinePlugin({
+    //     "process.env": {
+    //         NODE_ENV: JSON.stringify("development"),
+    //     },
+    // }),
+    new ReactRefreshWebpackPlugin(),
+  ],
+};