Coder Social home page Coder Social logo

nischay-code / mern_instagram Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 3.01 MB

Created a fully featured Instagram clone using ReactJS, NodeJS, ExpressJS and MongoDB.

Home Page: https://instagram-nischay-code.cyclic.app/

JavaScript 81.60% HTML 2.18% CSS 16.21%
development express mern-stack mongodb nodejs reactjs thunder-client

mern_instagram's Introduction

MERN_Instagram ๐Ÿ“ธ

Project Overview

This repository contains the source code for a fully featured Instagram clone developed using ReactJS for the frontend, NodeJS and ExpressJS for the backend, and MongoDB as the database.

Table of Contents

  1. Introduction
  2. Features
  3. Technologies Used
  4. Installation
  5. Usage
  6. API Endpoints
  7. Database Schema
  8. Contributing

Introduction

This Instagram clone replicates the core features of the original platform, providing users with the ability to register, post images, follow other users, and interact with posts through likes and comments. The frontend is built using ReactJS to ensure a responsive and dynamic user interface, while the backend, powered by NodeJS and ExpressJS, handles authentication, data storage, and retrieval through MongoDB.

Features

  • User Authentication: Users can register and log in securely. ๐Ÿ”
  • Image Upload: Users can upload images to share with their followers. ๐Ÿ“ค
  • Follow System: Users can follow and unfollow other users. โž•โž–
  • Like and Comment: Users can interact with posts through likes and comments. โค๐Ÿ’ฌ
  • Followed Users Feed: A personalized news feed displaying posts from followed users. ๐Ÿ“ฐ

Technologies Used

  • Frontend:

    • ReactJS
  • Backend:

    • NodeJS
    • ExpressJS
  • Database:

    • MongoDB

Installation

  1. Clone the repository:
git clone https://github.com/nischay-code/MERN_Instagram.git
cd MERN_Instagram
  1. Install dependencies for the frontend and backend:
cd frontend
npm install

cd ../backend
npm install
  1. Set up the MongoDB database and update the connection string in the config.js file.

  2. Run the application:

# Start the backend server
cd backend
npm start

# Start the frontend development server
cd frontend
npm start

The application will be accessible at http://localhost:3000.

Usage

  1. Register: Create an account or log in if already registered.
  2. Explore: Navigate through the follow other users and interact with posts.
  3. Share: Upload your images to share with followers.

API Endpoints

  • POST /api/users/register: Register a new user.
  • POST /api/users/login: Log in an existing user.
  • GET /api/posts: Retrieve all posts.
  • POST /api/posts: Create a new post.
  • POST /api/posts/:postId/like: Like a post.
  • POST /api/posts/:postId/comment: Add a comment to a post.
  • POST /api/users/:userId/follow: Follow a user.
  • DELETE /api/users/:userId/unfollow: Unfollow a user.

For detailed request and response formats, refer to the API documentation.

Database Schema

The MongoDB database is structured with collections for users, posts, likes, and comments. Refer to the schema documentation for a detailed structure.

Contributing

Feel free to contribute by submitting bug reports, feature requests, or pull requests. Follow the guidelines outlined in the CONTRIBUTING.md file.

๐Ÿš€ Happy Coding! ๐Ÿš€

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.