Chat App

Tech Stack

---

Usage

1. To use MongoDB Atlas, make dev.js file inside config folder. If you are not registered, sign up https://www.mongodb.com/ and create Database.

2. Put mongoDB info into dev.js file

• sample

module.exports = {
    mongoURI: 'mongodb+srv://<Your Database Acess ID>:<PASSWORD>@beomjin.8iply.mongodb.net/myFirstDatabase?retryWrites=true&w=majority'
}

3. Type "npm install" inside the root directory ( Download Server Dependencies )

4. Type "npm install" inside the client directory ( Download Front-end Dependencies )

5. Type "npm run dev" inside the root directory, then you can use this Chat App

---

Structure

client

client
   ├── ...
   ├── src
  ...   ├─ _actions
        │       ├─ chat_actions.js
        │       ├─ friends_actions.js
        │       ├─ user_actions.js
        │       └─ types.js
        │
        ├─ _reducers
        │       ├─ chat-reducer.js
        │       ├─ friends_reducer.js
        │       ├─ user_reducer.js
        │       └─ index.js
        │
        ├─ components
      ...       ├─ views
              ...     ├─ ...
                      ├─ ChatPage
                      │    ├─ Section
                      │    │     └─ ChatCard.js
                      │    └─ ChatPage.js   
                      ├─ MainPage
                     ...    ├─ Section
                            │     ├─ ChatList.js  
                            │     ├─ FriendsList.js         
                            │     └─ SearchFriends.js 
                            └─ MainPage.js

server

server
   ├── config
   │     ├─ dev.js
   │     ├─ key.js
   │     └─ prod.js
   ├── middleware
   │     └─ auth.js
   ├── models 
   │     └─ User.js
   ├── routes 
   │     └─ users.js
   ├──index.js
  ...

---

Schema

    name: {
        type:String,
        maxlength:50
    },
    email: {
        type:String,
        trim:true,
        unique: 1 
    },
    password: {
        type: String,
        minglength: 5
    },
    lastname: {
        type:String,
        maxlength: 50
    },
    role : {
        type:Number,
        default: 0 
    },
    image: String,
    token : {
        type: String,
    },
    tokenExp :{
        type: Number
    },
    friends: [{
        name: { type: String },
        id: { type: String },
        socket: { type: String, default: null}
    }],
    chats: [{
        socketId: { type: String },
        receiverId: { type: String },
        receiverName: { type: String },
        chat: [{ 
            senderId: { type: String },
            senderName: { type: String },
            message: { type: String },
            time: { type: String },
            type: { type: String },
            read: { type: Boolean }
         }],
    }]

---

First, click login button and sign up

• LandingPage

  

After Login, you can see the main page

• MainPage

  

  From the left of the tab [freinds list], [chat room], [search friends], [etc (log out)]

  you can serach user exists in data base with user's name

  

  if you click add button, the user2 is added in friends list

  and you can delete friends to click delete button