Tweeter Project

Tweeter is a simple, single-page Twitter clone.
This project is Built on the tweeter template by lighthouse-labs.

Table of Content

• Final Product
• Dependencies
• Getting Started
• Features
• File Structure
• Credit

Final Product

View the functionalities (with animated GIF) in Features section.

 

Dependencies

• Express
• Node.js
• body-parser
• chance
• nodemon (for development)
• sass (for development)

 

Getting Started

1. Clone this repository onto your local device.
2. Install dependencies using the npm install command.
3. Start the web server using the npm start command. The app will be served at http://localhost:8080/.
4. Go to http://localhost:8080/ in your browser.
5. (For developtment) another option to start the web server is using the npm run local command. Nodemon will monitors for any changes in the source code and automatically restart the server.
6. (For developtment) the npm run sass-watch command enable the sass application to look in the sass directory for any scss files that are created or updated. If there is a change, the corresponding css file in the public/styles directory will be created or updated.

 

Features

1. Submit new tweet with form

When a user submits a valid tweet, the new tweet is displayed.

 

2. Toggle form & Go to top of the page

Compose button in the navigation bar

When a user clicks this button:

• if the Compose Tweet box is currently hidden, then it is shown, and the textarea inside it is auto-focused
• if the Compose Tweet box is currently showing, then it is hidden

 

Back to top botton in the lower right hand corner

When a user scrolls, a red and circular "back to top" button appears (and compose button in the navigation bar will be hidden)
When the user clicks this button, they are brought back up to the top of the page, and:

• if the Compose Tweet box is currently hidden, then it is shown, and the textarea inside it is auto-focused
• if the Compose Tweet box is currently showing, then the textarea inside it is auto-focused

 

3. Display error message

When a user submits an invalid tweet (empty or contains more than 140 characters), an error message is displayed.

 

4. Responsive Design

The web page has two layouts on different screen sizes (Breakpoint: 1024px).

 

File Structure

📦tweeter
 ┣ 📂docs
 ┣ 📂public
 ┃ ┣ 📂images
 ┃ ┃ ┗ 📜profile-hex.png
 ┃ ┣ 📂scripts
 ┃ ┃ ┣ 📜buttons.js
 ┃ ┃ ┗ 📜load-tweets-submit-tweet.js
 ┃ ┣ 📂styles
 ┃ ┃ ┣ 📜header.css
 ┃ ┃ ┣ 📜layout.css
 ┃ ┃ ┣ 📜nav.css
 ┃ ┃ ┣ 📜new-tweet-form.css
 ┃ ┃ ┣ 📜scroll-to-top.css
 ┃ ┃ ┗ 📜tweets.css
 ┃ ┗ 📜index.html
 ┣ 📂sass
 ┃ ┣ 📜_mixins.scss
 ┃ ┣ 📜_variables.scss
 ┃ ┣ 📜header.scss
 ┃ ┣ 📜layout.scss
 ┃ ┣ 📜nav.scss
 ┃ ┣ 📜new-tweet-form.scss
 ┃ ┣ 📜scroll-to-top.scss
 ┃ ┗ 📜tweets.scss
 ┣ 📂server
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜package-lock.json
 ┗ 📜package.json

📂docs

Store animated GIF that are displayed in this README document. These files are not included in the diagram above.

📂public

📂images

Contain profile-hex.png for the profile picture in page header.

📂scripts

Contain buttons.js and load-tweets-submit-tweet.js, which are responsible for listening on events and then manipulate the html document.

📂styles

Contains the compiled CSS files by Sass. Partials Sass files are not compiled into a separated CSS file.

📜index.html

The html file that is rendered by the server.

📂sass

Contains all the Sass file. Sass watches the files in this folder when command npm run sass-watch is used in terminal.

📜_mixins.scss

Contains all the mixins for other Scss files.

📜_variables.scss

Contains all the variables for other Scss files.

📜Other Scss files

header.scss, layout.scss, nav.scss, new-tweet-form.scss, scroll-to-top.scss, tweets.scss manage the style of the corresponding section.

📂server

Contain the Javascript and JSON file for the server and database.  

📜.gitignore

This file is to ignore the node_modules folder and .DS_store files.

📜README.md

This document that you are reading.

📜package.json

This file contains:

• the list of dependencies (node libraries that the executable code needs)
• dev-dependencies: node libraries only needed by development tools
• scripts: Define the in-project shortcut commands, therefore using npm start, npm run local, npm run sass-watch is equivalent to calling script value

Credit

• Favicons made by Freepik from www.flaticon.com