Create a Twitter Clone with Node.js, Socket.IO and MongoDB

Initialize your project with npm init, the Node package manager, to create a package.json, and use npm start to run your app.

Install your first npm package with npm install, add it to package.json dependencies, and run it to display colored console output with the colors package as a simple example.

Learn how to install project dependencies with npm install, understand why node_modules isn’t included in zip downloads, and ensure the app runs by installing dependencies from package.json.

Learn to use a gitignore file to exclude node_modules from commits in a git project, so you don't include the node_modules folder and its large size.

Create a brand new Twitter clone project by initializing npm, creating a package.json, setting app.js as the entry point, adding a start script, and configuring gitignore for node_modules.

Install express and create App.js as the entry point, initialize an express app, set a port, and launch a server that logs listening on port 3003.

Explore how template engines render web pages from templates using pug, the jade successor, with views and view engine setup. Create a views folder and render home.pug for dynamic content.

Pass a page title from the server to the template and render it dynamically on the page using a payload with a page title property.

Improve the home page HTML by adopting a main layout, inserting the doctype, encoding, and viewport meta tags, and updating the page title from app.js to prepare the registration system.

Create a login guard with middleware to redirect unauthenticated users from the home route to the login page, by checking req.session.user and using next to continue when logged in.

Implement a login route by creating an Express router, using session-based middleware to redirect unauthenticated users to login, and render the login page.

Create the login page using pug templates in the views and layouts folders. Implement a reusable login layout for the register page and add a username, password, and register link.

Add bootstrap styling to the login and main layouts via CDN, converting pug to html, and place bootstrap JavaScript at the body end while updating server as needed.

Create and reference a public/css/login.css, then configure express to serve the public folder as static files using path and __dirname. Validate the setup by seeing red text.

Apply flexbox to center content in wrapper; style login container with padding and a max width, and format the form inputs and submit button with borders and a box shadow.

Create the register page to pair with login, duplicating the login pug structure and adding first name, last name, username, email, password, and confirm password fields, plus register routes.

Showcases client-side validation on the register page by checking password and confirm password with plain JavaScript in a pug template, on submit prevent default, and submit when they match.

Add and configure body-parser in a node.js app to handle post form submissions, connect it to the register route, and access submitted data via req.body.

Validate by trimming first name, last name, username, and email, while leaving the password unchanged; if a field is missing, render the register page with a payload and error message.

Set up a MongoDB database for a Twitter clone with Node.js, using a free cluster. Validate user email or username before inserting details into a NoSQL document store.

Connect to the twitter clone's MongoDB cluster by creating a database and collection, whitelisting IPs, then install the MongoDB driver and mongoose and implement a mongoose.connect with then and catch.

Migrate database connection logic into a reusable database class, export a singleton instance, and configure mongoose options to suppress deprecation warnings, ensuring consistent MongoDB access across the app.

Create a mongoose user schema with fields for first name, last name, username (unique), email (unique), and password (required), plus a default profile picture, and export the user model.

Enforce unique usernames and emails by querying the user schema with an or condition in the register route, using Node.js and MongoDB, and handling async results with then/catch.

Apply async/await to check for existing users in MongoDB, handle errors with a catch block, and show 'email already in use' or 'username already in use' messages before insertion.

Validate the submitted form data, verify a unique username or email, and insert the user into the database with first name, last name, username, email, and password using user.create.

Add created at and updated at timestamps to your user schema using the timestamps option, enabling automatic tracking of when users are created and updated.

Hash the user's password with bcrypt using ten salt rounds before saving to the database, and integrate it in the register routes.

Install and configure express-session, set a session secret, and store the logged-in user in req.session.user. Use middleware to check the session and redirect to the home page after signup.

Send the logged-in user information from the server to the client by adding req.session.user to the home page payload, enabling display of the user's name and profile data.

Implement a login system in node.js: handle post requests, parse the body, verify users by username or email with bcrypt, manage sessions, and redirect or show errors.

Build the site's main layout using bootstrap grid in a pug template, creating a responsive three-column structure with nav, a main content area, and an empty column.

Learn to build a responsive layout with Bootstrap grid, add and link a custom main.css, and use display utilities to hide a column on small screens for a Twitter-like UI.

Add Font Awesome icons to the navigation bar and embed the Font Awesome CDN link, while adjusting the layout for larger screens in your pug-based Twitter clone.

Learn to add navigation bar icons to your twitter clone with Font Awesome, using a dove logo and icons for home, search, notifications, messages, profile, and logout.

Style the navigation bar with CSS flexbox, set display to flex and flex-direction to column, center items with align-items and justify-content, and size anchor links to 55px by 55px.

Style the navigation bar icons and anchor links with css variables, set a shared twitter blue at root, and apply a blue class to the first icon with hover effects.

Add a logout route in routes/logout.js, destroy the session, and redirect to the login page; wire the route in app.js, restart the server, and test logging out.

Add a title bar by inserting a title container with an H1 page title, then style the main section with a light-gray border, zero padding, and flex centering.

explore creating a reusable post form with pug mixins, wire it into the main layout for access on the home page, and test the form with a disabled submit button.

Set and update the default profile picture for new users by adding an images folder, uploading a jpeg, updating the user schema default, and restarting the server to clear cache.

Style the post form container with flex layout, spacing, and a bottom border; set zero flex shrink for Safari and make the user image container 50x50 with a circular image.

Style the post form by refining the text area container and text area with flex, full width, and no resize; implement a blue, rounded submit button with a disabled state.

Enable the post button as users type and disable it when the field is empty. Create and link a shared common.js to reuse posting logic across pages using document.ready.

Extend a commonjs script to enable the post button as you type, using keyup on the text area, reading event.target value, and trimming spaces.

Enable the post button as users type by using jQuery to read the text box value, trim whitespace, and toggle the submit button's disabled state.

Explore how a rest api handles creating and retrieving posts, messages, and notifications via endpoints like /api/posts, enabling front ends on any client to interact with the backend.

Implement a post api route by creating an api/posts file, wiring it into app.js, and building get and post handlers that return a 200 response with a test message.

Validate post data on the endpoint of the post API by checking content, return a 400 bad request when missing, and return to prevent headers already sent errors.

Create a posts schema with mongoose by copying the user schema, defining content, posted by as an object ID ref to user, enabling timestamps and a pinned flag for retweets.

Insert a new post into database using the post schema and content from the request, plus session user. Populate the posted by field and return 201 with the created post.

Handle the server response after posting by creating post HTML and prepending it to the posts container. Clear the text box and disable the submit button.

Create post HTML using a template literal in a CommonJS function, injecting post data into a structured div hierarchy including user image, post header, body, and footer.

Build the post header by rendering the author's display name and username as a profile link, and show a timestamp using a root profile path and dynamic variables.

Style the post footer by adding retweet, reply, and like buttons for a twitter clone, including display name styling, Font Awesome icons, and responsive button layout.

Learn to implement hover styles for the comment, retweet, and like buttons in a Twitter clone, including hover background color changes, text color updates, and border radius driven rounding.

Create a home.js to load posts on the home page, link it via a dedicated scripts block after core libs, and verify by using document ready and a test alert.

Fetches all posts from the database via a get request, implements the get posts endpoint, and prepares future filtering for followed users.

Output posts by clearing the posts container, looping over results to build and append post html, and showing a no results message when empty.

Learn to populate the posted by reference in posts, replacing the ObjectId with a full user object to display profile pic, username, and first and last name in the newsfeed.

Learn a quick development trick to pre-populate login fields by editing the login input values and commenting out production lines, saving time while testing multiple accounts.

Transform post timestamps into relative time like just now or ten minutes ago by implementing a JavaScript time difference function, applied to post creation dates in the twitter clone.

Sort the posts by createdAt in descending order to show the newest first at the top. Update post.js after the populate line with .sort({ createdAt: -1 }).

Add a likes field to post and user schemas, using arrays to track posts liked and users who liked them. Implement a like button handler to toggle likes.

Implement a dynamic like button by attaching a delegated click handler to the document, teaching how to adapt events for buttons that load after page render in a Node.js app.

Capture the post id from a clicked like button using data attributes and DOM traversal to the root post, then initiate a server request to toggle the like.

Learn to implement a like toggle with a put request to update a post resource via Ajax to /api/posts, guard the post id, and handle the server response.

Implement a put request to like or unlike a post by passing the post id in the url, retrieving the id and user id, and checking the user’s likes array.

Debug and fix the like-unlike flow by updating the session user after liking, using findByIdAndUpdate with new: true, and handling errors, then refresh to verify.

Return the updated post like to the client after liking or unliking. Update the user and post like arrays by post ID and refresh client UI to reflect the state.

Update the client side after ajax like actions to reflect post data.likes.length in the user interface, showing the count only when nonzero, and fix the click target with CSS pointer-events.

Learn to pass the logged-in user info from server to client by stringifying the user object and injecting it into the page to enable like-status checks.

Learn to toggle a post’s like and retweet states by checking user id in the likes array, adding or removing the active class, and styling with red and green cues.

Set up the retweet route by reusing the like button logic, adding a retweet button and a post request to the retweet endpoint, updating the post data in real time.

Update the post and user schemas to support retweets, add a retweet users array and a retweet data field, and implement a delete-first toggle for adding or removing the retweet.

Implement retweeting by creating a retweet post when needed, then update the user session and retweets with the repost id and include the user in the original post's retweet users.

Fixes retweeting posts by cleaning erroneous entries, correcting the retweet data, and validating the retweet toggle in the database to ensure proper retweet behavior after sign-in.

Show the retweet count beside the button by using the retweet users array, updating the active state for logged-in users, and applying green hover styling.

Set up on-page retweet button state by applying the retweet button active class on load, so green colors reflect existing retweets immediately instead of reverting to gray on refresh.

Learn to render retweets by detecting retweet data, applying post data or retweet data accordingly, and populating nested user data to display the retweeter’s name.

Populate the retweet data's posted by field by making the get handler async and awaiting user.populate with the path retweet data posted by.

Implement a retweet indicator by showing a 'retweeted by' line with the retweeter’s username linked to their profile, controlled by a retweet text variable in the post render.