AndrewJBateman/fullstack-twitter-clone

:clipboard: Simple full-stack app that displays a list of messages ('tweets') generated on the client side and processes them using backend node.js.

⚡ Twitter Clone

• Simple full-stack app that displays a list of messages ('tweets') generated on the client side and processes them using backend node.js. Future link to mongodb database to save messages.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Twitter Clone
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • ✉️ Contact

📚 General info

• A simplified Twitter clone using simple front and backends. Dependencies updated aug 2020.

📷 Screenshots

.

📶 Technologies

• Node.js v12
• npm javascript filter used on title and content user inputs
• npm Express rate limiting using Node internal store (i.e.not an external database).
• npm monk toolkit for mongodb

💾 Setup

• Backend: From the /server directory run npm run dev for a dev server. Navigate to http://localhost:5000/. The app uses Nodemon and will automatically reload if you change any of the source files. Navigate to http://localhost:5000/tweets to see tweets in JSON.
• Frontend: open /client/index.html in browser. Enter a tweet and click 'Send Your Tweet' button. Tweet will be displayed below.

💻 Code Examples

• server/index.js - function to post tweet data from html frontend req.body parameters; filtering text then adding to tweets array.

app.post('/tweets', (req, res, next) => {
	if(isValidTweet(req.body)) {
		const tweet = {
			name: filter.clean(req.body.name.toString()),
			content: filter.clean(req.body.content.toString()),
			created: new Date()
		};

		tweets
			.prepend(tweet)
			.then(createdTweet => {
				res.json(createdTweet);
			});

	} else {
		res.status(422);
		res.json({
			message: 'Helooo, name and message are required'
		});
	}
});

🆒 Features

• A simple app with vanilla javascript. No js framework used.

📋 Status & To-Do List

• Status: basic working app that saves tweets locally.
• To-Do: Correct code so latest tweet listed first (reverse() function not working). Remove duplication of tweets. Add connection to mongodb database.

👏 Inspiration

• Tutorial: The Coding Train: Build a Full Stack Twitter Clone with Coding Garden

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com