README.md

Socials - A social media realtime chat app

This is a social media realtime chat app that allows users to sign in with google, add friends and chat with other users in realtime.

Getting Started with the project

First, put all the environment variables in a .env.local file in the root of the project.

The variables are:

Note: These variables can be accessed from the respective services.

NEXTAUTH_SECRET=
NEXTAUTH_URL=

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

PUSHER_APP_ID=
PUSHER_APP_SECRET=
NEXT_PUBLIC_PUSHER_APP_KEY=

Second, run the development server:

Note: You can also use alternative package managers like yarn or pnpm.

npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

Stack used

• Next.js - For frontend & backend as well.
• TypeScript - For robustness
• Axios - For making http requests
• Pusher - For realtime chat using websocket
• Redis - For storing user's data
• NextAuth.js - For authentication
• React Hook Form - For form validation
• Zod - For schema validation
• Lucide Icons - For icons
• Tailwind CSS - For styling
• Also several small libs like: tailwind-merge, clsx, cva and etc.

Directory Structure

src
├── app
│   ├── api
│   │   ├── auth
│   │   │   └── [...nextauth]
│   │   │       └── route.ts
│   │   ├── friends
│   │   │   ├── accept
│   │   │   │   └── route.ts
│   │   │   ├── add
│   │   │   │   └── route.ts
│   │   │   └── deny
│   │   │       └── route.ts
│   │   └── message
│   │       └── send
│   │           └── route.ts
│   ├── (auth)
│   │   └── login
│   │       └── page.tsx
│   ├── dashboard
│   │   ├── add
│   │   │   ├── loading.tsx
│   │   │   └── page.tsx
│   │   ├── chat
│   │   │   └── [chatId]
│   │   │       ├── loading.tsx
│   │   │       └── page.tsx
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── requests
│   │       ├── loading.tsx
│   │       └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── assets
│   └── logo.svg
├── component
│   ├── AddFriendButton.tsx
│   ├── ChatInput.tsx
│   ├── FriendRequestsSidebarOption.tsx
│   ├── FriendRequests.tsx
│   ├── Icons.tsx
│   ├── Messages.tsx
│   ├── MobileChatLayout.tsx
│   ├── Provider.tsx
│   ├── SidebarChatList.tsx
│   ├── SignoutButton.tsx
│   ├── SocialsLogo.tsx
│   ├── ui
│   │   └── Button.tsx
│   └── UnseenChatToast.tsx
├── helper
│   ├── get-friends-by-user-id.ts
│   └── redis.ts
├── lib
│   ├── auth.ts
│   ├── db.ts
│   ├── pusher.ts
│   ├── utils.ts
│   └── validations
│       ├── add-friend.ts
│       └── message.ts
├── middleware.ts
└── types
    ├── db.d.ts
    ├── next-auth.d.ts
    ├── pusher.d.ts
    └── typings.d.ts

License

This is licensed under GPL-3.0 license. See LICENSE. You are free to use this project for personal or commercial use. You can also modify this project as you wish.