Macktireh · Macktireh · Aug 2, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/README.md b/README.md
@@ -1,32 +1,89 @@
-# Clone the Twitter Frontend with React TS
 
-This repository contains the frontend source code of the Twitter clone project. I used React, TypeScript and Redux to build the user interface of the application.
+<p align="center"> <h1 align="center">Frontend Twitter Clone</h1> </p>
 
-## Startup
 
-### Prerequisites
+<p align="center">
+  <!-- <img src="./demo/1.png" alt="Home screen" width=400> -->
+  <img src="./demo/2.png" alt="Home screen" width=400>
+  <img src="./demo/3.png" alt="Home screen" width=400>
+  <img src="./demo/4.png" alt="Home screen" width=400>
+  <img src="./demo/5.png" alt="Home screen" width=400>
+  <img src="./demo/6.png" alt="Home screen" width=400>
+  <img src="./demo/7.png" alt="Home screen" width=400>
+  <img src="./demo/16.png" alt="Home screen" width=400>
+  <img src="./demo/17.png" alt="Home screen" width=400>
+  <img src="./demo/9.png" alt="Home screen" width=400>
+  <img src="./demo/15.png" alt="Home screen" width=400>
+  <img src="./demo/11.png" alt="Home screen" width=400>
+  <img src="./demo/10.png" alt="Home screen" width=400>
+  <img src="./demo/12.png" alt="Home screen" width=400>
+  <img src="./demo/13.png" alt="Home screen" width=400>
+  <img src="./demo/14.png" alt="Home screen" width=400>
+  <img src="./demo/18.png" alt="Home screen" width=400>
+</p>
 
-- Nodejs
-- Git
+## Table of Contents
+- [Description](#description)
+- [Features](#features)
+- [Prerequisites](#prerequisites)
+- [Getting Started](#getting-started)
 
-### Installation
 
-#### 1. Clone the git repository
+## Description
 
-If you have `Git` on your computer, use the commands below, otherwise just download the project.
+This project provides the frontend for a Twitter clone. It is built using React, Redux, Axios for state management and API requests. The application is fully responsive and works seamlessly on various devices. It also supports PWA features, allowing it to be installed on devices for a native-like experience.
 
-```bash
-git clone https://github.com/Macktireh/clone-twitter-frontend.git clone-twitter-backend
-```
+The backend for this project is implemented using Django, Django REST framework, Django Channels, PostgreSQL, Redis, and Cloudinary, and can be found [clone-twitter-backend](https://github.com/Macktireh/clone-twitter-backend).
 
-```bash
+
+
+## Features
+
+- **Authentication**: User signup, login, and logout.
+- **Tweets**: Create, read, update, and delete tweets.
+- **Likes**: Like and unlike tweets.
+- **Bookmarks**: Bookmark and remove bookmarks from tweets.
+- **Retweets**: Retweet and undo retweet.
+- **User Profiles**: View and edit user profiles, follow and unfollow users.
+- **Notifications**: Real-time notifications for user interactions.
+- **Real-Time Chat**: Real-time chat feature using WebSockets.
+- **Responsive Design**: Fully responsive layout for various screen sizes.
+- **PWA**: Progressive Web App support for a native-like experience.
+
+
+## Prerequisites
+
+- Node.js
+- npm
+
+
+## Getting Started
+
+1. Clone the repository:
+
+```sh
+git clone https://github.com/Macktireh/clone-twitter-backend.git
+```
+```sh
 cd clone-twitter-backend
 ```
 
+2. Install dependencies:
+
+
 ```bash
 npm install
 ```
 
+3. Start the development server:
+
 ```bash
 npm start
 ```
+
+The frontend of your Twitter clone should now be up and running. Visit http://localhost:3000 to see the application in action. 🎉
+
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
diff --git a/demo/1.png b/demo/1.png
diff --git a/demo/10.png b/demo/10.png
diff --git a/demo/11.png b/demo/11.png
diff --git a/demo/12.png b/demo/12.png
diff --git a/demo/13.png b/demo/13.png
diff --git a/demo/14.png b/demo/14.png
diff --git a/demo/15.png b/demo/15.png
diff --git a/demo/16.png b/demo/16.png
diff --git a/demo/17.png b/demo/17.png
diff --git a/demo/18.png b/demo/18.png
diff --git a/demo/2.png b/demo/2.png
diff --git a/demo/3.png b/demo/3.png
diff --git a/demo/4.png b/demo/4.png
diff --git a/demo/5.png b/demo/5.png
diff --git a/demo/6.png b/demo/6.png
diff --git a/demo/7.png b/demo/7.png
diff --git a/demo/8.png b/demo/8.png
diff --git a/demo/9.png b/demo/9.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -21,7 +21,7 @@ const App: React.FC<propsTypes> = ({ getCurrentUserAction }) => {
     if (!flag.current) {
       (async () => {
         await getCurrentUserAction();
-        setTimeout(() => setLoading(false), 800);
+        setTimeout(() => setLoading(false), 2500);
         flag.current = true;
       })();
     }

diff --git a/src/helper/AuthProvider.tsx b/src/helper/AuthProvider.tsx
@@ -19,11 +19,11 @@ const AuthProvider: React.FC<TProps> = ({ isPublic, isAuthenticated, children, g
   let [searchParams, setSearchParams] = useSearchParams();
 
   React.useEffect(() => {
-    const code = searchParams.get("code")
-    if (code && isAuthenticated === false || isAuthenticated === null) {
+    const code = searchParams.get("code")    
+    if (code && (isAuthenticated === false || isAuthenticated === null)) {
       (async () => {
         await googleLoginAction( code );
-        setTimeout(() => setLoading(false), 800);
+        setTimeout(() => setLoading(false), 1000);
       })();
     } else if (isAuthenticated !== null) setLoading(false);
   }, [loading, isAuthenticated]);