Tweeter Project

Tweeter is a simple, SPA Twitter clone. This project was built using HTML, CSS, JS, JQuery and AJAX. The goal was to practice and polish my front-end skills.

This project also uses Node and Express on the back-end side, which was used as a public pre-existing template.

Features

• Clean, simple, minimalistic design for a SPA
• Rensponsive Design that's compatible with different screen sizes (Fluid Layout Shifter!)
• Patched against XSS injections to assure safe-use
• Header showing User's Name and Avatar
• Navigation bar and a scroll-to-top button to quickly navigate through the page
• A few nice animations to appreciate
• Toggle the Compose-tweet box with a simple slide animation
• Utilize the power of SPAs by firing AJAX requests to avoid page refreshing on new Tweets
• A chronologically sorted Tweets content
• A visible live character count to keep you aware of limit by changing colors (Black-Yellow-Red)
• Clean error message prompt on invalid Tweet entries

Final Product

• Demo 1 - Tablet Mode:

• Demo 2 - Desktop Mode:

• Tablet View:

• Desktop View:

• Hover effects on Tweets:

• Counter - Approaching Character limit on Tweet:

• Counter - Exceeding limit w/ Error message:

• Error example:

• Scroll-to-top button at bottom-right:

Dependencies

• Body-Parser
• Chance
• Express
• MD5

Getting Started

• You can check and use the app at tweeter.hirzalla.ca
• Install all dependencies (using the npm i command).
• Run the development web server using the npm start command.
• Navigate to http://localhost:8080/ to get started and start Tweeting!