https://github.com/rohanvron/socialapp

SocialApp is a MERN-stack application that allows users to create, view, update, and delete posts. Users can manage their posts with images, titles, and descriptions in a seamless interface.
https://github.com/rohanvron/socialapp

crud mern-stack post-management-system react redux

Last synced: 3 days ago
JSON representation

SocialApp is a MERN-stack application that allows users to create, view, update, and delete posts. Users can manage their posts with images, titles, and descriptions in a seamless interface.

• Host: GitHub
• URL: https://github.com/rohanvron/socialapp
• Owner: rohanvron
• Created: 2024-10-18T17:20:30.000Z (21 days ago)
• Default Branch: main
• Last Pushed: 2024-10-21T18:03:43.000Z (18 days ago)
• Last Synced: 2024-11-04T20:04:56.560Z (3 days ago)
• Topics: crud, mern-stack, post-management-system, react, redux
• Language: JavaScript
• Homepage: https://socialapp.pages.dev/
• Size: 6.19 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SocialApp - Post Management System

SocialApp is a MERN-stack application that allows users to create, view, update, and delete posts. Users can manage their posts with images, titles, and descriptions in a seamless interface.

## Features

- User authentication with email and password

- Create, update, and delete posts

- View posts with images, titles, and descriptions

- Responsive design for various screen sizes

 

 



## Technologies Used

### Frontend

- **React.js** for building user interfaces

- **Vite** as the build tool and development server

- **Redux** for state management

- **React Router** for navigation

- **React Icon** for icons

- **Material UI** for UI components

- **Tailwind CSS** for styling

 

 



### Backend

- **Node.js** runtime

- **Express.js** web framework

- **MongoDB** for database storage

- **Mongoose** for object modeling

- **JSON Web Tokens (JWT)** for authentication

- **Bcrypt** for password hashing

- **Cors** for cross-origin resource sharing

- **Dotenv** for environment variable management

- **Multer** for handling file uploads

- **Cloudinary** for image storage

 

 



## System Overview

SocialApp is a MERN-stack application combining a React frontend and a Node.js backend:

- The frontend utilizes React with Redux for state management, ensuring a smooth user experience with features like form validation and error handling.

- The backend leverages Express.js to handle API requests, while MongoDB stores data and implements JWT for secure authentication.

- The application allows users to manage posts effectively, ensuring a user-friendly interface for content creation and updates.

## API Endpoints

- **POST /api/auth/signup** - User registration

- **POST /api/auth/login** - User login

- **GET /api/posts** - Fetch all posts

- **POST /api/posts** - Create a new post

- **PUT /api/posts/:id** - Update an existing post

- **DELETE /api/posts/:id** - Delete a post

 

 



## Setup Instructions

1. Clone the repository: 

   ```git clone https://github.com/rohanvron/SocialApp.git```

2. Install dependencies::

   ```cd frontend && npm install```

   ```cd ../backend && npm install```

3. Set up environment variables: Create a .env file in the backend directory with the following content:

    ```

    MONGODB_URI=your_mongodb_connection_string

        JWT_SECRET=your_jwt_secret

        PORT=5000

        CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name

        CLOUDINARY_API_KEY=api_key

        CLOUDINARY_API_SECRET=secret_key

    ```

4. Start the backend server:

   ```cd backend && npm start```

5. Start the frontend development server:

    ```cd frontend && npm run dev```

6. Open your browser and navigate to http://localhost:5173 to view the application.