Kalrav is a real-time chat application designed to facilitate seamless communication between users. The application supports user authentication, real-time messaging, and a responsive user interface. Built with modern web technologies, Kalrav ensures a smooth and interactive user experience.
- Secure user registration and login using JWT.
- Password hashing with Bcrypt.js.
- Protected routes to ensure secure access to resources.
- Real-time chat functionality using Socket.io.
- Instant message delivery and updates.
- Typing indicators and read receipts.
- Mobile-first design with Tailwind CSS.
- Responsive layout for various screen sizes.
- Smooth transitions and animations.
- Real-time notifications for new messages.
- Toast notifications for user feedback.
- React: For building the user interface.
- Vite: For fast development and build tooling.
- React Router: For client-side routing.
- Tailwind CSS: For styling and responsive design.
- React Hot Toast: For notifications.
- React Icons: For iconography.
- Node.js: For server-side logic.
- Express: For building the RESTful API.
- Mongoose: For MongoDB object modeling.
- Socket.io: For real-time communication.
- JWT: For authentication and authorization.
- Bcrypt.js: For password hashing.
- MongoDB Atlas: For cloud-based database management.
- Components/: Reusable UI components such as
Message
,MessageInput
, andMessageContainer
. - Hooks/: Custom hooks for managing state and side effects, such as
useLogin
anduseSendMessage
. - Context/: Context providers for managing global state, such as
AuthContext
andSocketContext
. - Styles/: Tailwind CSS for styling and responsive design.
- Routes/: RESTful API routes for authentication, messaging, and user management.
- Controllers/: Logic for handling API requests and responses.
- Models/: Mongoose models for MongoDB collections.
- Middleware/: Middleware for authentication and error handling.
- Socket/: Socket.io setup for real-time communication.
- Node.js installed
- npm package manager
- MongoDB Atlas account
-
Clone the repository:
git clone https://github.com/rebeljelly2147/Kalrav.git cd Kalrav
-
Install dependencies:
# Install backend dependencies cd backend npm install # Install frontend dependencies cd ../frontend npm install
-
Set up environment variables:
- Create a
.env
file in thebackend
directory and add the following:
PORT=8000 MONGO_DB_URI=your_mongodb_uri JWT_SECRET=your_jwt_secret NODE_ENV=development
- Create a
-
Start the backend server:
cd backend npm run server
-
Start the frontend development server:
cd ../frontend npm run dev
-
Open the application in your browser:
http://localhost:3000
-
Create a new web service on Render:
- Connect your GitHub repository.
- Set the build command:
npm install && npm run build
. - Set the start command:
npm start
.
-
Add environment variables:
MONGO_DB_URI=your_mongodb_uri JWT_SECRET=your_jwt_secret NODE_ENV=production PORT=8000
- Create a new project on Vercel:
- Connect your GitHub repository.
- Set the build command:
npm run build
. - Set the output directory:
dist
.
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
This project is licensed under the MIT License.
π Kalrav - Connecting People, One Message at a Time! π