A simple Twitter Clone built with Django Rest Framework, React, and Tailwind CSS, hosted on Heroku.

• User registration and authentication.
• Full CRUD functionality.
  • Create posts
  • Read posts
  • Update posts
  • Delete posts
• Responsive design for use across all devices.
• The ability to follow/unfollow users.
• The ability to view posts by accounts you follow
• The ability to like/unlike posts.
• The ability to view all liked posts.

• Edit profile.
  • currently, users are unable to edit their current profile pictures or bio (content)

Tailwind CSS allowed me to code the front end quickly and efficiently. Making the design responsive was easy with Tailwind's responsive utility classes.

Tailwind allows for faster design of the front end, essentially nullifying the need for creating vanilla CSS files.

• The documentation for Tailwind CSS can be found here

The React Icons library was used during the development of this project.

React Icons offers a wide range of free icons that can be styled and manipulated in the front end.

• The documentation for React Icons can be found here

This Twitter clone leverages React Router to handle navigation and routing within our application. React Router enables the creation of a single-page application experience, offering a smooth user journey without the need for full-page reloads.

• The documentation for react-router can be found here

The use of infinite scroll in this project was to allow users to view content without pagination. This makes the app more modern & engaging.

• The documentation for react-infinite-scroll-component can be found here.

React Bootstrap was used in some sections of this project. Particularly relating to forms.

• The documentation for React Bootstrap can be found here

The navigation bar is a key component of any good website. The navigation bar appears on every page of the website. Users can navigate easily from page to page.

This component is stateful which allows the contents of the navigation bar to be manipulated based on whether the user is currently logged in or if they have logged out.

The navigation bar is responsive. When the screen reaches the Tailwind’s medium (md) breakpoint, the links are displayed horizontally across the header.

When it is below the medium breakpoint, they are displayed in a ‘drop-down’ menu that slides in from the right of the screen.

Instead of having a conditional render method within the NavBar.js file, I decided to take the hardcode of the dropdown out of the NavBar.js file. This made both elements easier to style while increasing the readability of the code.

The dropdown menu allows users to navigate through each page of the website while on smaller devices.

The avatar component allows me to render the user profile picture in the link to said user's profile. It allows for customisation by accepting source, height, and optional text.

This is an ideal component for this app but could be taken and used in any application that needs to display user profile pictures.

Manual testing showed that users can:

• create an account
• login/logout
• had a sustained login period
• follow/unfollow users
• like/unlike tweets
• create tweets
• edit/delete tweets
• reply to tweets
• edit/delete reply
• filter liked posts
• search for keywords/users

This application is hosted on Heroku.

The Heroku app was connected to my GitHub repository, (found here).

• Add any necessary configuration variables that are required for the project to function.

• Connect your GitHub repository.

• Scroll down the page to the deployment section and click ‘deploy branch’

The code in this project was created by closely following the course content of Code Institute. In particular, the moments repository, which can be found here