Tweeter is a single-page Twitter clone. It uses HTML, CSS, SASS, JS, jQuery, and AJAX for the front-end, and Node and Express for the back-end.
Video of functionality:
tweeter-functionality-demo-video.mp4
View of 2-column desktop layout:
View of single-column layout for Tablets:
View of single-column layout for Smartphones:
View of new tweet form with Write a new tweet toggle button (top right):
View of Back to Top button (bottom right):
View of Empty Tweet warning message:
View of Tweet is Too Long warning message:
This project was created by me as part of my learnings at Lighthouse Labs.
- Single Page Application
- Seamless user experience, the page is not refreshed during GET or POST tweet requests
- Responsive Design
- Supports various device sizes, transitions smoothly between Smartphone, Tablet, and Desktop views
- Real-time Tweet Length Counter
- Users receive visual feedback on the length of their tweet as they type
- Content Validation
- Error handling for empty tweets or tweets that are too long
- Compose button for new tweets
- Click the lightly-animated
Write a new tweetbutton to bring the text input field into focus and start tweeting
- Click the lightly-animated
- Scroll to Top button
- Scroll back up with one click of the
Back to Topbutton to activate the text input field and compose a new tweet
- Scroll back up with one click of the
- Users can add a
Green Checkmark(✅) to their profiles completely free of charge! 😏
- Tweet reaction buttons (
Flag/Retweet/Like) have hover-over animation effect but are not yet implemented - Development to increase tweet length limit to 141 characters projected to begin early next year
- Fork this repository to your own Github account.
- Clone your fork onto your local device.
- Install all dependencies using the
npm installcommand. - Start the web server using the
npm run localcommand. The app will be served at http://localhost:8080/. - Go to http://localhost:8080/ in your browser.
- Start tweeting! 🐦