Welcome to my Tweeter project! To experience a live version of this app, it's currently hosted on Heroku at http://cy-tweeter.herokuapp.com.
If you would like to clone the repo and run the app locally, first npm install
(a post-install hook will create the Webpack bundle) then npm start
to start the server on port 8080.
The commands npm run build
will recreate the Webpack bundle, and npm run local
will both recreate the bundle and start the server.
Logged in users can compose tweets (both client and server codes will prevent a non-logged-in user from tweeting). The Compose Tweet box is hidden until the 'Compose' button is clicked. The character counter dynamically keeps track of the tweet's character length to keep it under 140.
A user can register a user profile, thereby allowing them to compose tweets under their own name and handle.
A logged-in user can like other users' tweets (but cannot like their own). The 'like' counter will increment accordingly. The wording on the time stamp to the left of the tweet is dynamically generated on runtime.
The app has a responsive design allowing it to be comfortably used on smaller screens. The above screenshot is based on an iPhone 6S screen simulation.
The client automatically pings the server every 2 minutes to check for new tweets. It dynamically replaces the tweets' list with updated ones.
The server is running on Node.js and Express, supported by MongoDB for data persistence. Instead of the baseline MongoDB Node driver, I opted for Mongoose to provide a better relational schema between the tweets and users collections.
On the client side, the technologies used are Sass as a pre-compiler for CSS, and jQuery for front-side animation and minor data changes (any mission critical business logic is kept on the back-end). Both client-side JavaScript and CSS are compiled and bundled by Webpack, with a single 'bundle.js' sent to the client's browser.