Barker

⚡ Twitter clone using dogs

• Simple full-stack app that shows a list of messages ('barks' or 'tweets') from the React client and processed on the Express server. Messages are saved in a hosted Mongodb database, MongoDB Atlas.

📄 Table of Contents

• ⚡ Barker
  • 📄 Table of Contents
  • 📚 General Info
  • 📷 Screenshots
  • 🔬 Deep Dive
  • 💻 Technologies
  • 💾 Setup
  • 😎 Features
  • 📋 Pending Features
  • 👏 Inspiration
  • ✉️ Contact

📚 General Info

• A simple Twitter clone using React for the frontend client, Express node.js for the backend server, and using MongoDB Atlas as the cloud hosted database. This was built to better understand React hooks and how to use hooks for authentication/authorization across the application.

• React is a separate frontend server, which is different than a view engine like EJS, PUG, or JADE. Using a view engine with Passport simplifies user authentication. However, I wanted to see how to pass the "app state" of an authenticated user across the application to different pages. The app was built by checking a few tutorials, MDN Docs, and googling Stackoverflow answers.

📷 Screenshots

🔬 Deep Dive

• App state is managed using the React Context API and the useContext hook. Context is used instead of Redux because, as in the words of Dan Abramov, the Context API is much improved, and unless the app needs to manage a large number of asynchronous resources, Context works well. Context is not as verbose as Redux, however there are some Redux patterns (reducers, actions, types) that are used with Context to handle user login and logout as well as error messages and alerts.
• The other question answered was how to best manage the flow of data on the frontend (component vs app state) and the flow of data between the frontend and backend. The answer was only as much as necessary and when needed.

💻 Technologies

• Node.js
• Express server
• MongoDB Atlas for cloud hosted database
• React UI for frontend user interface
• JSON Web Tokens for authentication
• Bcryptjs for hashing
• Express Validator another layer of validation

💾 Setup

• Normally, the setup would be to clone this repo, change directory into it, then type npm install and npm client-install, however because of the environment variables for Mongo Atlas, JWT secret, etc, etc,. and the associated setup with those services the easiest method is click on the link to the Heroku site either here or below:

link: https://blooming-reef-68471.herokuapp.com/

😎 Features

• User login and logout
• Home page/Message Timeline is a protected route using a Higher Order Component (HOC)
• create & delete messages
• user authorization: only the creator of a message ('bark' or 'tweet') can delete their message
• messages are displayed by time in ascending order (most recent first).

📋 Pending Features

• Image upload for user profile image
• Image upload for barks/tweets
• UI refactor
• Enable Reply, ReBark, and Likes
• Threading for replies

👏 Inspiration

• The inspiration for this app was Twitter and getting practice with React hooks, using context to manage app state, specifically with user login, authorization, and logout; and comparing hooks to Redux.

• Twitter
• Frontend Masters: Complete Intro to React V6: hooks, effects, contexts, etc
• Dan Abramov: Fundamentals of Redux

✉️ Contact

• repo created by Don Spire Nspired1, email: don.spire1@gmail.com