This project is a replica of Twitter, the well-known social media platform. It aims to not only recreate the core features of the original app, but also to emulate its user interface and experience, with a focus on a pixel-perfect UI and a seamless, fast-paced UX.
🎉 The app is live on render, try it here.
🏁 Table of Contents
I wanted to enjoy a project that would help me become more comfortable with TypeScript, a skill I've always wanted to add to my skill set. My other goal was to integrate React and Redux using the latest best practices, such as avoiding useEffect in React and utilizing the built-in RTK query in Redux-Toolkit.
This Twitter clone replicates the original social network, although not all its features are included. I will add more features in the future if I'll have the time, but the main focus of this project was for my own learning and it captures the majority of the Twitter experience.
The app will remember you even when you close the browser and your sessionsStorage is cleared.
This project helped me to improve my backend development, as I had to resolve CORS-related bugs and build the entire app, including the backend, from the ground up. I also strengthened my React skills by adhering to React's best practices. I learned TypeScript by using it in this project, and I plan to further my knowledge in the near future by rewriting some of the code to improve it even more. I also used the new Redux Toolkit and its RTK query, which I really enjoyed. I went deep into this tool and implemented optimistic and pessimistic data fetching and rendering (the app updates without reloads) to provide the best user experience.
I am a Full-Stack Developer from Israel and I'd love to connect, you can also check out my website for more of my projects.
Are you interested in exploring the Twitter clone project and experimenting with its code? Great! In this section, I'll show you how to clone the project and get started.
First, make sure you have the necessary tools installed on your computer, such as a code editor, npm, and Git.
Then, follow these steps to clone the project and run it locally:
- Open your terminal and navigate to the directory where you want to clone the project.
- Clone the frontend repository:
git clone https://github.com/Diego-Mc/Twitter-Clone.git
- Navigate to the project directory:
cd twitter-clone
- Install the dependencies:
npm install
- Start the development server (should start on port 5173):
npm start
- Clone the backend repository:
git clone https://github.com/Diego-Mc/Twitter-Clone-Backend.git
- Navigate to the backend directory:
cd twitter-clone-backend
- Install the dependencies:
npm install
- Start the development server:
npm start
You should now be able to access the Twitter Clone app in your web browser at the local development URL http://localhost:5173. You can experiment with the code and make changes as you like. Just be sure to commit your changes and push them to your own fork of the project if you want to save them.
Happy coding!
This Twitter clone project is for educational purposes only and not intended for commercial use. The assets and designs used in the app are not owned by me and were used only for educational purposes. Use of the Twitter clone implies agreement to respect the intellectual property rights of the original creators at the Twitter company.