CHATTER

Welcome to Chatter, a social media application that allows users to connect and interact with each other through messages, posts, likes, comments and much more!. Check out the link Below

Support the project ⭐

If you feel generous and appreciate some of my work Buy me a coffee

Table of Contents

• Introduction
• Installation
• User Story
• Technologies Used
• Features
• Security Measures
• Deployment
• Screenshots
• Questions

Introduction

Chatter is a social media application that allows users to interact with one another by chatting, posting and so much more. The application was created by Femi-Ladiran Erifeoluwa (also known as Timi) and Oghenebrume Akpadaka (also known as Brume). Our goal with Chatter is to provide a platform for users to connect with one another and share their thoughts, ideas, and experiences. The user-friendly interface and sleek design make it easy for users to navigate and engage with the community.

Installation

To setup and use this project on your device, follow these steps;

1. Make sure you have MongoDB installed or create an account on MongoDb Atlas.
   Note: If you're using MongoDb Atlas, create a cluster, set ip address to 0.0.0.0 to allow the database to be accessible from anywhere and then copy the MongoDB URI.

2. Clone this repository.

   • 

3. Install dependencies by running the npm install command in the command line

4. Open your code editor by running the command code .

5. Create a cloudinary account. your CLOUDINARY_CLOUD_NAME, CLOUDINARY_KEY & CLOUDINARY_SECRET for your .env would be generated there. Then create a folder called chatter on the cloudinary website to store all project images from chatter.

6. create a .env file in the server folder for your environment variables. Follow the sample file. If you used MongoDB atlas, set MONGODB_URI to the url generated from Mongo Atlas that looks like mongodb+srv://[username:password@]host[/[database][?options]] .
   
   Note: The parts in square brackets are optional. The username and password are used for authentication, the host is the domain name of the Atlas cluster, and the database is the name of the database to connect to. The options are additional options to configure the connection.

7. (optional) To have some seed data, you can run npm run seed in the terminal.

8. To run the application on your local machine, you can run the npm run develop command which starts up the server as well as the react scripts.

9. Finally, open This Link and see the application.

User Story

As a user, I want to be able to share my thoughts, ideas, and experiences with other users in real-time. I want to be able to post, comment, and interact with other users in a safe and secure environment. I also want to have access to a wide range of features and tools that will help me connect and engage with other users more effectively.

Technologies Used

• MongoDB: A powerful and flexible NoSQL database that allows Chatter to store and retrieve data efficiently and quickly.
• Mongoose ODM: A powerful Object Data Modeling (ODM) library that simplifies interactions between MongoDB and the Chatter application.
• Express: A lightweight framework for building web applications and APIs that allows Chatter to handle HTTP requests and responses.
• Node: A powerful runtime environment that allows Chatter to run JavaScript code on the server-side.
• React: A powerful JavaScript library for building user interfaces that allows Chatter to provide a dynamic and responsive user experience.
• Material-UI: A popular UI library that provides a wide range of Material Design components for building beautiful and responsive user interfaces.

Features

• Login and Signup: Users can create an account and log in to the application with their username and password.
• Profile: Users can view and edit their profile information, including their name, email, and bio.
• Home: The home page allows users to view and interact with other users' posts, including commenting, liking, and sharing.
• Search: Users can search for other users by name or username, allowing them to connect and interact with people they know.

Security Measures

Chatter has implemented a number of security measures to ensure that users' data is kept safe and secure. These measures include:

• CORS (Cross-Origin Resource Sharing): A security mechanism that allows Chatter to restrict access to its APIs based on the origin of the request.
• Helmet: A library that sets various HTTP headers to help protect against common security threats.

Deployment

Chatter is currently deployed on Heroku and can be accessed at the deployed link:
https://nameless-basin-36851.herokuapp.com/

Screenshots

• Login Page:

The login page allows users to enter their username and password to access the application.

• Signup Page:

The signup page allows users to create an account that they can use to interact with other users.

• HomePage

The home page allows users to see their friend's posts and interact with the post by liking and so on

• ProfilePage

The profile page allows users to see another user's profile. This includes their posts, follower count and many more.

• MessagePage

The inbox page allows users to send real-time messages to their followers.

questions

For additional questions contact me via email on [email protected] or view some other projects.