diff --git a/README.md b/README.md index a114191..29efa39 100644 --- 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. +

Frontend Twitter Clone

-## Startup -### Prerequisites +

+ + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen + Home screen +

-- 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 new file mode 100644 index 0000000..048db7e Binary files /dev/null and b/demo/1.png differ diff --git a/demo/10.png b/demo/10.png new file mode 100644 index 0000000..382dd54 Binary files /dev/null and b/demo/10.png differ diff --git a/demo/11.png b/demo/11.png new file mode 100644 index 0000000..cbf8b76 Binary files /dev/null and b/demo/11.png differ diff --git a/demo/12.png b/demo/12.png new file mode 100644 index 0000000..ca03c09 Binary files /dev/null and b/demo/12.png differ diff --git a/demo/13.png b/demo/13.png new file mode 100644 index 0000000..34cba06 Binary files /dev/null and b/demo/13.png differ diff --git a/demo/14.png b/demo/14.png new file mode 100644 index 0000000..fec6975 Binary files /dev/null and b/demo/14.png differ diff --git a/demo/15.png b/demo/15.png new file mode 100644 index 0000000..50b74e0 Binary files /dev/null and b/demo/15.png differ diff --git a/demo/16.png b/demo/16.png new file mode 100644 index 0000000..c8dc33a Binary files /dev/null and b/demo/16.png differ diff --git a/demo/17.png b/demo/17.png new file mode 100644 index 0000000..e3a63a7 Binary files /dev/null and b/demo/17.png differ diff --git a/demo/18.png b/demo/18.png new file mode 100644 index 0000000..2eb4e6a Binary files /dev/null and b/demo/18.png differ diff --git a/demo/2.png b/demo/2.png new file mode 100644 index 0000000..1ed8a94 Binary files /dev/null and b/demo/2.png differ diff --git a/demo/3.png b/demo/3.png new file mode 100644 index 0000000..bb48bad Binary files /dev/null and b/demo/3.png differ diff --git a/demo/4.png b/demo/4.png new file mode 100644 index 0000000..af17ce8 Binary files /dev/null and b/demo/4.png differ diff --git a/demo/5.png b/demo/5.png new file mode 100644 index 0000000..b39f8f9 Binary files /dev/null and b/demo/5.png differ diff --git a/demo/6.png b/demo/6.png new file mode 100644 index 0000000..0e43e50 Binary files /dev/null and b/demo/6.png differ diff --git a/demo/7.png b/demo/7.png new file mode 100644 index 0000000..42c509b Binary files /dev/null and b/demo/7.png differ diff --git a/demo/8.png b/demo/8.png new file mode 100644 index 0000000..8cbc313 Binary files /dev/null and b/demo/8.png differ diff --git a/demo/9.png b/demo/9.png new file mode 100644 index 0000000..35f77b1 Binary files /dev/null and b/demo/9.png differ diff --git a/src/App.tsx b/src/App.tsx index 8866316..42f6bb0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,7 +21,7 @@ const App: React.FC = ({ 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 index 5a351dd..b967e14 100644 --- a/src/helper/AuthProvider.tsx +++ b/src/helper/AuthProvider.tsx @@ -19,11 +19,11 @@ const AuthProvider: React.FC = ({ 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]);