Merge pull request #1 from saddamarbaa/chore/migrate-vite-ts-react-query-tailwindcss

Chore/migrate vite ts react query tailwindcss

Author: saddamarbaa

.env.example

@@ -0,0 +1,8 @@
+# Firebase Configuration
+VITE_REACT_APP_FIREBASE_API_KEY= "YOUR_FIREBASE_API_KEY" # Firebase API Key
+VITE_REACT_APP_AUTH_DOMAIN= "YOUR_AUTH_DOMAIN" # Firebase Auth Domain
+VITE_REACT_APP_PROJECT_ID= "YOUR_PROJECT_ID" # Firebase Project ID
+VITE_REACT_APP_STORAGE_BUCKET= "YOUR_STORAGE_BUCKET" # Firebase Storage Bucket
+VITE_REACT_APP_MESSAIN_SENDER_ID= "YOUR_MESSAGING_SENDER_ID" # Firebase Messaging Sender ID
+VITE_REACT_APP_APPID= "YOUR_APP_ID" # Firebase App ID
+

.vscode/settings.json

@@ -19,8 +19,8 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.format": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.format": "explicit"
   },
   "cSpell.words": ["ENDPOIN", "semibold"]
 }

README.md

@@ -1,252 +1,50 @@
-# LinkedIn Clone
+# React + TypeScript + Vite
 
-Building LinkedIn Clone App with React Js, TypeScript, Redux, Styled Component,
-Material-UI, Firebase Realtime Database, Vercel Hosting,
-with complete user authentication (a mobile-friendly).
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-# Table of contents
+Currently, two official plugins are available:
 
-- [Author](#Author)
-- [Demo](#Demo)
-- [Technologies](#Technologies)
-- [Features](#Features)
-- [Related Projects](#Related_Projects)
-- [Optimizations](#Optimizations)
-- [Contributing](#Contributing)
-- [Status](#status)
-- [Inspiration](#inspiration)
-- [Support](#Support)
-- [Feedback](#Feedback)
-- [Run Locally](#Run_Locally)
-- [Environment Variables](#Environment)
-- [Deployment](#Deployment)
-- [Screenshots](#Screenshots)
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-# Author
+## Expanding the ESLint configuration
 
-### <a href="https://github.com/saddamarbaa">@Saddam Arbaa</a>
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-# Technologies
+- Configure the top-level `parserOptions` property like this:
 
-**Client:**
-
-- React Js
-- Redux
-- Styled Component
-- Material-UI
-- TypeScript
-
-**Server:**
-
-- Firebase Realtime Database
-- Vercel Hosting
-- Firebase Google Authentication
-- Firebase Email and password Authentication
-
-# Demo
-
-## <a href="https://linkedin-clone-app-navy.vercel.app/">LIVE DEMO</a>
-
-# Features
-
-- Complete user authentication users can sign in, sign out
-- Add post
-
-# Optimizations
-
-- Memoization (useMemo, Memo)
-- react-lazy-load-image-component
-- Code-Splitting – React
-- Function components
-- React hooks
-- React useEffect cleanup
-- Server-side rendering - Next.js(TODO)
-- TypeScript
-
-# Contributing
-
-Contributions are always welcome!
-
-
-
-# Related_Projects
-
-
-### Instagram Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS + Heroicons
-
-### <a href="https://github.com/saddamarbaa/Instagram-clone-app-nex-js"> Github Repo </a>
-
-### <a href="https://instagram-clone-app-nex-js.vercel.app/">LIVE DEMO</a>
-
-
-###  Facebook Clone App built with React Js + Next Js + TypeScript + Redux + Styled Components
-###  <a href="https://github.com/saddamarbaa/facebook-clone-app-nex-js"> Github Repo </a>
-###  <a href="https://facebook-clone-app-nex-js.vercel.app/">LIVE DEMO</a> 
-
-
-###  Messenger Clone App built with React Js + Next Js + Redux +  Styled Components + Material-UI  
-###  <a href="https://github.com/saddamarbaa/messenger-clone-app-nex-js"> Github Repo </a>
-###  <a href="https://messenger-clone-app-nex-js.vercel.app/">LIVE DEMO</a> 
-
-
-###  Gmail Clone App built with  React Js + Next Js + TypeScript + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting 
-
-###  <a href="https://github.com/saddamarbaa/Gmail-clone-app-nex-js"> Github Repo </a>
-###  <a href="https://gmail-clone-app.vercel.app/">LIVE DEMO</a>
-
-
-
-###  Signal Clone App built with React Native + TypeScript + Expo + React Navigation + Firebase Realtime Database + User Authentication + Passwordless Authentication with Magic Link
-
-### <a href="https://github.com/saddamarbaa/signal-clone-app-reactnative-typescript"> Github Repo </a>
-
-
-###  WhatsApp Clone App built with React Js + React Context API  + Styled Components + Material-UI + Firebase Realtime Database + Firebase Hosting
-
-### <a href="https://github.com/saddamarbaa/whatsapp-clone"> Github Repo </a>
-
-### <a href="https://whatsapp-clone-pwj.web.app/">LIVE DEMO</a>
-
-
-###  Slack Clone App built with React Js + Next Js + Styled Components + firebase-hooks + Material-UI
-
-### <a href="https://github.com/saddamarbaa/slack-clone-app-nex-js"> Github Repo </a>
-
-### <a href="https://slack-clone-app-nex-js.vercel.app/">LIVE DEMO</a>
-
-
-### Airbnb Clone App built with React Js + Next Js + Redux + Tailwind CSS
-
-### <a href="https://github.com/saddamarbaa/airbnb-clone-app-nex-js"> Github Repo </a>
-
-### <a href="https://airbnb-clone-app-nex-js.vercel.app/">LIVE DEMO</a>
-
-### Amazon Clone App built with React Js + TypeScript + Redux + Styled Components
-
-### <a href="https://github.com/saddamarbaa/amazon-clone-app-react-typescript"> Github Repo </a>
-
-### <a href="https://amazon-clone-murex-six.vercel.app/">LIVE DEMO</a>
-
-
-###  Tesla Clone App built with  React Js + TypeScript + Redux + Styled Components + Material-UI + Vercel Hosting 
-
-###  <a href="https://github.com/saddamarbaa/tesla-clone-app-react-typescript"> Github Repo </a>
-###  <a href="https://tesla-clone-app-neon.vercel.app/">LIVE DEMO</a>
-
-
-###  Netflix Clone App built with React Js + TypeScript + Redux + Stripe Checkout/Payments + Vercel Hosting + Firebase
-
-###  <a href="https://github.com/saddamarbaa/netflix-clone-app-react-typescript"> Github Repo </a>
-###  <a href="https://netflix-clone-app-react-typescript.vercel.app/">LIVE DEMO</a>
-
-
-
-# Support
-
-For support, email saddamarbaas@gmail.com.
-
-# Feedback
-
-If you have any feedback, please reach out to me at saddamarbaas@gmail.com
-
-Twitter
-https://twitter.com/ArbaaSaddam/
-
-Linkedin.
-https://www.linkedin.com/in/saddamarbaa/
-
-Github
-https://github.com/saddamarbaa
-
-Instagram
-https://www.instagram.com/saddam.dev/
-
-Facebook
-https://www.facebook.com/saddam.arbaa
-
-# Run_Locally
-
-Clone the project
-
-```bash
-  https://github.com/saddamarbaa/LinkedIn-clone-app-react-typescript
-```
-
-Go to the project directory
-
-```bash
-  cd LinkedIn-clone-app-react-typescript
-```
-
-Install dependencies
-
-```bash
-  npm install
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
 ```
 
-Start the server
-
-```bash
-  npm start
-
-
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
 ```
-
-# Environment
-
-- To run this project, you will need to create a new project on firebase, setup Firebase Realtime Database and add the following environment variables to your .env file
-
-- REACT_APP_FIREBASE_API_KEY
-- REACT_APP_AUTH_DOMAIN
-- REACT_APP_STORAGE_BUCKET
-- REACT_APP_PROJECT_ID
-- REACT_APP_MESSAIN_SENDER_ID
-- REACT_APP_APPID
-
-# Status
-
-Project is now complete in React js so my next step I would love to convert to React + TypeScript + Next.js
-
-# Inspiration
-
-Build By Saddam Arbaa Project inspired by [linkedIn] https://www.linkedin.com/
-
-# Deployment
-
-To deploy this project on firebase Flow the firebase documentation <a href="https://firebase.google.com/docs">Firebase Documentation</a>
-
-- create a new project on firebase
-- npm install -g firebase-tools
-- firebase init
-- npm run build
-- firebase deploy
-
-# Screenshots
-
-## Responsive on large screens - Home Page
-
-![image](https://user-images.githubusercontent.com/51326421/176983604-da9965c6-4cad-4d3c-8a38-75d67471c70b.png)
-
-## Responsive on mobile and tablet screens
-
-![image](https://user-images.githubusercontent.com/51326421/176983621-8cacc724-03bb-4e75-b00d-13cb81277d67.png)
-
-## Loading screen
-
-![image](https://user-images.githubusercontent.com/51326421/176983781-b2dc2a1b-ff9e-4b85-97b4-2c44d92aeff8.png)
-
-## Sign in page
-
-![image](https://user-images.githubusercontent.com/51326421/176983699-fcd9cbbb-7bc4-4e0b-ac8c-e4d71e6f8119.png)
-
-![image](https://user-images.githubusercontent.com/51326421/176983709-f8c94795-3952-47ec-96bf-e5a4ca81afaa.png)
-
-## LogIn Page
-
-![image](https://user-images.githubusercontent.com/51326421/176983730-1a229a63-8de7-4c71-a77b-1dc8f245084f.png)
-
-![image](https://user-images.githubusercontent.com/51326421/176983743-36e6f01c-ef2f-4cc2-87b4-c73acca6a124.png)
-
-## Welcoming Page
-
-![image](https://user-images.githubusercontent.com/51326421/128429995-55619601-d721-4ecf-acd2-1b815c9ed253.png)