Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jabedalimollah/aliet

ALIET is a social media web application built using the MERN stack (MongoDB, Express.js, React.js, and Node.js).
https://github.com/jabedalimollah/aliet

axios cookies env expressjs jsonwebtoken mongodb nodejs react-redux reactjs realtime-chat redux-toolkit shadcn-ui socket-io tailwindscss

Last synced: about 18 hours ago
JSON representation

ALIET is a social media web application built using the MERN stack (MongoDB, Express.js, React.js, and Node.js).

Awesome Lists containing this project

README

        

# ALIET - Social Media Web Application

ALIET is a feature-rich social media web application developed using the MERN stack (MongoDB, Express.js, React.js, and Node.js). It enables users to connect with others, share content, and manage their profiles effortlessly.

## Screenshots

![App Screenshot](https://github.com/jabedalimollah/aliet/blob/b9fb0d0a66eb8c70bedf40fc37d1e0db2e131f70/Screenshot/Screenshot%202024-11-27%20105412.png?raw=true)

![App Screenshot](https://github.com/jabedalimollah/aliet/blob/main/Screenshot/Screenshot%202024-11-27%20105338.png?raw=true)

![App Screenshot](https://github.com/jabedalimollah/aliet/blob/main/Screenshot/Screenshot%202024-11-27%20104105.png?raw=true)

![App Screenshot](https://github.com/jabedalimollah/aliet/blob/main/Screenshot/Screenshot%202024-11-27%20104303.png?raw=true)

![App Screenshot](https://github.com/jabedalimollah/aliet/blob/main/Screenshot/Screenshot%202024-11-27%20104433.png?raw=true)

![App Screenshot](https://github.com/jabedalimollah/aliet/blob/main/Screenshot/Screenshot%202024-11-27%20104448.png?raw=true)

## πŸš€ Features

### User Authentication & Profile Management
- #### User Account:
- Create a new account.
- Update profile information, including profile photo and personal details.
- Change account password.
- Delete account permanently.
- Secure login and logout functionality.
### Social Features
- #### Posting:
- Create posts with text and/or media.
- Delete existing posts.
- Bookmark posts for later or save them to your device.
- #### Engagement:
- Like posts and view the total likes.
- Comment on posts and participate in discussions.
### Interaction
- #### User Search:
- Search for other users by name or username.
- #### Profile Viewing:
- View other users’ profiles, including their posts and activity.
- #### Follow System:
Follow and unfollow other users to stay updated on their activities.
### Messaging
- #### Real-Time Chat:
- Send and receive messages with other users in real time.

## πŸ› οΈ Technologies Used

**Client:** React, Redux, TailwindCSS, Axios

**Server:** Node, Express

**Database:** MongoDB

**Real-time Communication:** Socket.IO

**AI Integration:** API integration with AI model

**Other Tools:** JWT for secure authentication,
Cloudinary (optional) for media storage

## πŸ–₯️ Installation

### Prerequisites
- Node.js and npm installed on your machine.
- MongoDB installed and running locally or have access to a MongoDB Atlas cluster.

### Clone the Repository
```bash
git clone https://github.com/jabedalimollah/aliet.git
cd aliet

```
### Backend Setup
- Navigate to the backend directory:

```bash
cd backend

```
- Install the required dependencies:
```bash
npm install

```
- Create a .env file in the backend directory and add your environment variables:
```bash
PORT=
CORS_ORIGIN=
CORS_ORIGIN_LOCAL=
CORS_ORIGIN_CLIENT=
MONGODB_URI=
DB_NAME=
JWT_SECRET_KEY=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
```
- Start the backend server
```bash
npm run dev
```

### Frontend Setup
- Navigate to the frontend directory:

```bash
cd frontend
```
- Install the required dependencies:

```bash
npm install
```
- Create a .env file in the frontend directory and add your environment variables:
```bash
VITE_APP_API_KEY=
VITE_APP_URI=
```
- Start the frontend development server:
```bash
npm run dev
```

### Running the Application
- Ensure both the frontend and backend servers are running.
- Open your browser and navigate to http://localhost:5173.
## Environment Variables

To run this project, you will need to add the following environment variables to your .env file
### Frontend

`VITE_APP_URI`

`VITE_APP_API_KEY`

### Backend

`PORT`

`MONGODB_URI`

`DB_NAME`

`JWT_SECRET_KEY`

`CORS_ORIGIN`

`CORS_ORIGIN_LOCAL`

`CORS_ORIGIN_CLIENT`

`CLOUDINARY_CLOUD_NAME`

`CLOUDINARY_API_KEY`

`CLOUDINARY_API_SECRET`

## πŸ“§ Contact

- Email: [email protected]
- LinkedIn: [Jabed Ali Mollah](https://www.linkedin.com/in/jabedalimollah)
- GitHub: [Jabed Ali Mollah](https://github.com/jabedalimollah)

#

If you find this project useful, don't forget to star the repository! ⭐

#

## πŸ”— Links
[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://jabedalimollah.netlify.app/)

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/jabedalimollah/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://x.com/JabedAliMollah7)