First Commit

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,67 @@
+# Spend-Sync
+
+<img height="auto" width="100%" src="/public/thumbnail.jpg" alt="Name - Thumbnail" />
+
+Spend-Sync is a user-friendly expense tracker app that helps you effortlessly manage and monitor your spending habits. Stay organized and gain insights into your financial health with Spend-Sync. Try it now!
+
+### Live Demo 🎉
+- Explore the live version of Spend-Sync <a target="_blank" href="">here</a>.
+
+## Fun Fact
+> [!NOTE]
+> I created this project entirely using my **Android Phone** with apps: Acode & Termux.
+
+### 🔴 Unveiling the Journey of Building Spend-Sync
+> [!Note]
+> I embarked on the journey of building Spend-Sync with the goal of tracking personal expenses and aiding others in managing their finances. The process brought me joy as I transformed ideas into a real-life application, witnessing its utility firsthand. From inception to completion, coding this project was more than a task—it was a passion. Now, with Spend-Sync ready, I find joy in knowing that it will make life easier for many.
+
+### Project Created at
+- 🗓 *March 24 - April 2024*
+
+### Technologies Used ⚒️
+- Vite + React.js
+- Tailwindcss
+- React-Query
+- Appwrite
+- Zustand
+- React-Hook-Form
+- **ChatGPT**: *Many parts of this application are written by ChatGPT.*
+
+### Features
+
+- 📧 Authentication: Email + password  
+- 🌐 Social login: Google and GitHub  
+- 🌑 Dark theme functionality  
+- 🗑️ Trash feature  
+- ✏️ Expense management: Create, read, delete, update  
+- 📥 Download expenses as PDF: Filtered by date range  
+- 🔍 Search functionality  
+- 📅 Today's expenses: Displayed with total amount
+
+### .env Setup
+```sh
+VITE_APPWRITE_URL=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=
+VITE_APPWRITE_DATABASE_ID=
+VITE_APPWRITE_STORAGE_ID=
+
+VITE_APPWRITE_USER_COLLECTION_ID=
+VITE_APPWRITE_EXPENSE_COLLECTION_ID=
+
+VITE_SOCIAL_AUTH_SUCCESS_URL = http://localhost:5173/sign-in?authstatus=success
+VITE_SOCIAL_AUTH_FAILURE_URL = http://localhost:5173/sign-in?authstatus=failed
+
+VITE_APK_URL= 
+```
+
+### 📬 Connect with me
+> Let's connect! Reach out for collaborations, projects, or just a friendly chat.
+
+<a target="_blank" href="https://linkedin.com/in/fazlerabbidev" ><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/linkedin.svg" alt="Fazle Rabbi" height="30" width="auto" /></a>
+<a target="_blank" href="https://twitter.com/fazle_rabbi_dev" ><img align="center" src="https://seeklogo.com/images/T/twitter-x-logo-101C7D2420-seeklogo.com.png?v=638258862800000000" alt="Fazle Rabbi" height="30" width="auto" /></a>
+<a target="_blank" href="https://medium.com/@fazle-rabbi-dev" ><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/medium.svg" alt="Fazle Rabbi" height="30" width="auto" /></a>
+<a target="_blank" href="https://dev.to/fazle-rabbi-dev" ><img align="center" src="https://seeklogo.com/images/D/dev-to-logo-BDC0EFA32F-seeklogo.com.png" alt="Fazle Rabbi" height="30" width="auto" /></a>
+<a target="_blank" href="https://facebook.com/fazlerabbidev" ><img align="center" src="https://seeklogo.com/images/F/facebook-icon-black-logo-133935095E-seeklogo.com.png" alt="Fazle Rabbi" height="30" width="auto" /></a>
+<a target="_blank" href="https://instagram.com/fazle_rabbi_dev" ><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/instagram.svg" alt="Fazle Rabbi" height="30" width="auto" /></a>
+
+*Feel free to explore, contribute, and get inspired!*

index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Metadata for Open Graph and Twitter -->
+    <meta property="og:title" content="Spend-Sync - Track Your Expenses Effortlessly" />
+    <meta property="og:description" content="Spend-Sync is a user-friendly expense tracker app that helps you effortlessly manage and monitor your spending habits. Stay organized and gain insights into your financial health with Spend-Sync. Try it now!" />
+    <meta property="og:image" content="/og.jpg" />
+    <meta property="og:image:type" content="image/jpg" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://speend-sync.vercel.app" />
+    <meta property="og:site_name" content="Spend-Sync" />
+    <meta property="og:locale" content="en_US" />
+
+    <meta property="twitter:title" content="Spend-Sync - Track Your Expenses Effortlessly" />
+    <meta property="twitter:description" content="Spend-Sync is a user-friendly expense tracker app that helps you effortlessly manage and monitor your spending habits. Stay organized and gain insights into your financial health with Spend-Sync. Try it now!" />
+    <meta property="twitter:image:src" content="https://speend-sync.vercel.app/og.jpg" />
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:site" content="@fazle-rabbi-dev" />
+    <meta property="twitter:domain" content="https://speend-sync.vercel.app" />
+
+    <!-- Additional Metadata -->
+    <meta name="keywords" content="expense tracker, budget management, financial tracking, spending habits, personal finance, money management, budgeting tool, financial health, expense management, financial tracking app, money tracker, budget planner, financial analysis, expense monitoring, budget control">
+    <meta name="referrer" content="strict-origin-when-cross-origin" />
+    <meta name="author" content="Fazle Rabbi" />
+    <meta name="description" content="Spend-Sync is a user-friendly expense tracker app that helps you effortlessly manage and monitor your spending habits. Stay organized and gain insights into your financial health with Spend-Sync. Try it now!" />
+    <meta name="theme-color" content="#fff" />
+
+    <!-- Link and Canonical Tags -->
+    <link rel="canonical" href="https://speend-sync.vercel.app" />
+    <link rel="author" href="/humans.txt" />
+    <link rel="icon" href="/favicon.ico" sizes="128x128" />
+    <link rel="icon" href="/favicon.ico" sizes="256x256" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Basic Settings -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Spend-Sync - Track Your Expenses Effortlessly</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>