Git Product home page Git Product logo

chatter's Introduction

CHATTER

Welcome to Chatter, a social media application in the works that allows users to connect and interact with each other.

Support the project ⭐

If you feel awesome and want to support us in a small way, please consider checking out our other projects, starring and sharing this repo!

Table of Contents

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.

    • image
  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:

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

  • Signup Page:

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

  • HomePage

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

  • ProfilePage

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

  • MessagePage

Screenshot 2023-03-19 at 8 38 53 PM 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.

chatter's People

Contributors

brume7 avatar for-timi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.