Implement Prettier as a GitHub Action #134

.github/workflows/prettier.yml

@@ -0,0 +1,77 @@
+name: Prettier Code Formatting
+
+on:
+  pull_request:
+    branches: [master, main]
+  push:
+    branches: [master, main]
+
+jobs:
+  prettier-format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          # Checkout with token to allow pushing changes
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Prettier formatting
+        run: |
+          echo "🧹 Running Prettier formatting..."
+          npx prettier --write "src/**/*.{js,jsx,ts,tsx,css,scss,json,md}"
+          echo "✅ Prettier formatting completed!"
+
+      - name: Check for changes
+        id: verify-changed-files
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+            echo "📝 Files were formatted by Prettier"
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT
+            echo "✅ No formatting changes needed"
+          fi
+
+      - name: Commit and push changes
+        if: steps.verify-changed-files.outputs.changed == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "🧹 Auto-format code with Prettier [skip ci]"
+          git push
+
+      - name: Comment on PR with success message
+        if: github.event_name == 'pull_request' && steps.verify-changed-files.outputs.changed == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `## ✨ Code Automatically Formatted!
+
+              Your code has been automatically formatted with Prettier. 
+
+              The changes have been committed and pushed to this PR. 🎉
+
+              **What happened:**
+              - 🧹 Prettier automatically formatted all source files
+              - 📝 Changes were committed with message: "🧹 Auto-format code with Prettier"
+              - 🚀 Updated code was pushed to your branch
+
+              No further action needed! ✅`
+            })

.prettierignore

@@ -0,0 +1,33 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+
+# Package files
+package-lock.json
+yarn.lock
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+*.log
+
+# Coverage reports
+coverage/
+
+# Public assets that shouldn't be formatted
+public/
+
+# IDE files
+.vscode/
+.idea/
+
+# Git
+.git/

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "jsxSingleQuote": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

README.md

@@ -8,6 +8,7 @@
 <br/>
 
 [![forthebadge](https://forthebadge.com/images/badges/open-source.svg)](https://forthebadge.com) &nbsp;
+![Code Formatting](https://github.com/KartikeyaNainkhwal/Couple-Memory/workflows/Prettier%20Code%20Formatting%20Check/badge.svg)
 
 <h1 style="color: #01b0f2; text-align:center">Hacktoberfest 2025</h1>
 
@@ -82,6 +83,28 @@ Lets Hack!
 
 Feel free to make PR and complete the readme with your changes
 
+## 🧹 Code Formatting
+
+This project uses [Prettier](https://prettier.io/) to maintain consistent code formatting. All pull requests are automatically checked for proper formatting.
+
+### Local Development
+
+Before submitting a PR, make sure your code is properly formatted:
+
+```bash
+# Check formatting
+npm run format:check
+
+# Auto-fix formatting issues
+npm run format
+```
+
+### Automatic Checks
+
+- ✅ Every PR automatically runs Prettier checks via GitHub Actions
+- ❌ PRs with formatting issues will fail the check
+- 💡 The action will provide instructions on how to fix formatting issues
+
 ## Credits
 Sound Effect from
 <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=music&amp;utm_content=6826">Pixabay</a>

package.json

@@ -28,7 +28,12 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\""
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2"
   },
   "eslintConfig": {
     "extends": [

src/App.css

@@ -3,7 +3,7 @@
   margin: 40px auto;
 }
 button {
-  color: var(--text,#fff);
+  color: var(--text, #fff);
   background: var(--background, #1b1523);
   border: 2px solid;
   padding: 6px 12px;
@@ -23,23 +23,35 @@ button:hover {
   grid-gap: 20px;
 }
 
-
-#theme-toggle{
+#theme-toggle {
   position: absolute;
   top: 1vh;
   right: 1vw;
   font-size: 0.7em;
 }
 
 div.animation {
-  animation: shake 1s cubic-bezier(.36,.07,.19,.97);
+  animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97);
 }
 
 @keyframes shake {
-  10%, 90% { transform: translate3d(-1px, 0, 0); }
-  20%, 80% { transform: translate3d(2px, 0, 0); }
-  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
-  40%, 60% { transform: translate3d(4px, 0, 0); }
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
 }
 .collapse-animation {
   animation: collapse 1.2s forwards;
@@ -56,7 +68,7 @@ div.animation {
     -moz-transform: scale(0.2) rotate(360deg);
     -ms-transform: scale(0.2) rotate(360deg);
     -o-transform: scale(0.2) rotate(360deg);
-}
+  }
   100% {
     transform: scale(1) rotate(720deg);
     -webkit-transform: scale(1) rotate(720deg);
@@ -87,10 +99,10 @@ div.animation {
 }
 
 @media screen and (max-width: 390px) {
-  .card-grid{
+  .card-grid {
     display: grid;
     grid-template-columns: 1fr;
     align-items: center;
     align-content: center;
   }
-}
+}