This project uses html, Tailwind CSS and javascript to replicate the basic functionality of Twitter. It is a responsive design. Webpack has been used to bundle the javascript files.
Post a tweet from either the main tweet card at the top, or the tweet button on the left hand side.
Access images from your computer that you would like to tweet, and they will be automatically fit to a certain size and border before posting.
Once posted, tweets can be liked, retweeted, and deleted. Note that placeholder tweets cannot be liked or retweeted, but they can be deleted. This is deliberate.
The user can hover over the comment, retweet, like and share icons and an overlay description will appear.
Posts cannot exceed 280 characters.
For each character that exceeds 280 characters, they will be highlighted in red and the user will be prevented from posting.
When typing a tweet, a progress bar will appear to show how close to 280 characters the user is. Once 280 characters is crossed, the progress bar will turn into a counter of how many characters over the limit the user is.
When images are tweeted, the user can click on them in the feed and it will show a close up, with the black background overlay also appearing to help focus the image.
There is a different design for mobile.
When the user clicks the home button, it will automatically scroll them back to the top of their Twitter feed.
