App.
js
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import styled from 'styled-components';
import Sidebar from './components/Sidebar';
import Chat from './components/Chat';
import Login from './components/Login';
import Register from './components/Register';
import Profile from './components/Profile';
import Contacts from './components/Contacts'; // Import Contacts component
const AppContainer = styled.div`
display: flex;
height: 100vh;
background-color: #f0f2f5;
`;
const MainContent = styled.div`
flex: 1;
display: flex;
`;
function App() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
const token = localStorage.getItem('token');
setIsAuthenticated(!!token);
}, []);
const handleLogout = () => {
localStorage.removeItem('token');
localStorage.removeItem('userId');
localStorage.removeItem('name');
setIsAuthenticated(false);
};
return (
<Router>
<AppContainer>
{isAuthenticated && <Sidebar handleLogout={handleLogout} />}
<MainContent>
<Routes>
<Route path="/login" element={!isAuthenticated ? <Login
setIsAuthenticated={setIsAuthenticated} /> : <Navigate to="/" />} />
<Route path="/register" element={!isAuthenticated ? <Register /> : <Navigate to="/" />} />
<Route path="/chat/:contactId?" element={isAuthenticated ? <Chat /> : <Navigate
to="/login" />} />
<Route path="/profile" element={isAuthenticated ? <Profile handleLogout={handleLogout} /> :
<Navigate to="/login" />} />
<Route path="/contacts" element={isAuthenticated ? <Contacts /> : <Navigate to="/login"
/>} /> {/* Contacts Route */}
<Route path="/" element={isAuthenticated ? <Contacts /> : <Navigate to="/login" />} /> {/*
Default route */}
</Routes>
</MainContent>
</AppContainer>
</Router>
);
export default App;
Chat.js
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { useParams } from 'react-router-dom';
import { FaPaperPlane } from 'react-icons/fa';
import axios from 'axios';
const ChatContainer = styled.div`
flex: 1;
display: flex;
flex-direction: column;
`;
const ChatHeader = styled.div`
padding: 10px 16px;
background-color: #f0f2f5;
border-left: 1px solid #d1d7db;
`;
const ContactName = styled.h2`
font-size: 16px;
font-weight: 500;
color: #111b21;
`;
const MessagesContainer = styled.div`
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: #efeae2;
`;
const Message = styled.div`
max-width: 65%;
padding: 6px 7px 8px 9px;
border-radius: 7.5px;
margin-bottom: 10px;
font-size: 14.2px;
line-height: 19px;
color: #111b21;
${props => props.sent ? `
background-color: #d9fdd3;
align-self: flex-end;
margin-left: auto;
`:`
background-color: #ffffff;
`}
`;
const InputContainer = styled.div`
display: flex;
align-items: center;
padding: 10px;
background-color: #f0f2f5;
`;
const Input = styled.input`
flex: 1;
padding: 9px 12px;
border: none;
border-radius: 8px;
font-size: 15px;
`;
const SendButton = styled.button`
background: none;
border: none;
color: #54656f;
font-size: 20px;
cursor: pointer;
margin-left: 10px;
`;
function Chat() {
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState('');
const [contact, setContact] = useState(null);
const { contactId } = useParams();
useEffect(() => {
if (contactId) {
fetchMessages();
fetchContactDetails();
}, [contactId]);
const fetchMessages = async () => {
try {
const response = await axios.get(`http://localhost:3001/messages/${contactId}`, {
headers: { Authorization: localStorage.getItem('token') }
});
setMessages(response.data);
} catch (error) {
console.error('Error fetching messages:', error);
};
const fetchContactDetails = async () => {
try {
const response = await axios.get(`http://localhost:3001/contacts`, {
headers: { Authorization: localStorage.getItem('token') }
});
const contactDetails = response.data.find(c => c.contact_id === parseInt(contactId));
setContact(contactDetails);
} catch (error) {
console.error('Error fetching contact details:', error);
};
const sendMessage = async () => {
if (!newMessage.trim()) return;
try {
await axios.post('http://localhost:3001/messages',
{ receiverId: contactId, content: newMessage },
{ headers: { Authorization: localStorage.getItem('token') } }
);
setNewMessage('');
fetchMessages(); // Fetch new messages after sending
} catch (error) {
console.error('Error sending message:', error);
};
return (
<ChatContainer>
<ChatHeader>
<ContactName>{contact ? contact.contact_name : 'Select a contact'}</ContactName>
</ChatHeader>
<MessagesContainer>
{messages.length > 0 ? (
messages.map((msg, index) => (
<Message key={index} sent={msg.sender_id === parseInt(localStorage.getItem('userId'))}>
{msg.content}
</Message>
))
):(
<p>No messages yet. Start chatting with {contact?.contact_name}!</p>
)}
</MessagesContainer>
<InputContainer>
<Input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
placeholder="Type a message"
/>
<SendButton onClick={sendMessage}>
<FaPaperPlane />
</SendButton>
</InputContainer>
</ChatContainer>
);
}
Contacts.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
function Contacts() {
const [contacts, setContacts] = useState([]);
const [newContact, setNewContact] = useState({ mobile: '', name: '' });
const [error, setError] = useState('');
const [success, setSuccess] = useState('');
const [showForm, setShowForm] = useState(false); // To control the visibility of the form
useEffect(() => {
fetchContacts();
}, []);
const fetchContacts = async () => {
try {
const response = await axios.get('http://localhost:3001/contacts', {
headers: { Authorization: localStorage.getItem('token') },
});
setContacts(response.data);
} catch (error) {
console.error('Error fetching contacts:', error);
};
const addContact = async (e) => {
e.preventDefault();
setError(''); // Clear any previous errors
setSuccess(''); // Clear previous success message
try {
// Check if the user exists based on mobile number
const response = await axios.post('http://localhost:3001/contacts',
{ contactMobile: newContact.mobile, contactName: newContact.name },
{ headers: { Authorization: localStorage.getItem('token') } }
);
// If successful, fetch the updated contacts list
setNewContact({ mobile: '', name: '' });
setSuccess('Contact added successfully!');
setShowForm(false); // Hide the form after adding a contact
fetchContacts(); // Refresh contacts after adding
} catch (error) {
if (error.response && error.response.data.error) {
setError(error.response.data.error);
} else {
setError('An unexpected error occurred while adding the contact.');
};
return (
<div className="contacts-container">
<h2>Contacts</h2>
{/* Add Contact Button */}
<button onClick={() => setShowForm(!showForm)}>
{showForm ? "Cancel" : "Add New Contact"}
</button>
{/* Display the form if showForm is true */}
{showForm && (
<form onSubmit={addContact}>
<input
type="text"
placeholder="Contact's mobile number"
value={newContact.mobile}
onChange={(e) => setNewContact({ ...newContact, mobile: e.target.value })}
required
/>
<input
type="text"
placeholder="Contact's name"
value={newContact.name}
onChange={(e) => setNewContact({ ...newContact, name: e.target.value })}
required
/>
<button type="submit">Add Contact</button>
</form>
)}
{error && <p className="error">{error}</p>}
{success && <p className="success">{success}</p>}
{/* Display the contact list */}
<ul className="contact-list">
{contacts.map((contact) => (
<li key={contact.contact_id}>
<Link to={`/chat/${contact.contact_id}`}>{contact.contact_name}</Link>
</li>
))}
</ul>
</div>
);
export default Contacts;
Login.js
import React, { useState } from 'react';
import styled from 'styled-components';
import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
const LoginContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: #f0f2f5;
`;
const LoginForm = styled.form`
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 350px;
`;
const Input = styled.input`
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
`;
const Button = styled.button`
width: 100%;
padding: 10px;
background-color: #00a884;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
const ErrorMessage = styled.p`
color: red;
margin-bottom: 10px;
`;
function Login({ setIsAuthenticated }) {
const [mobile, setMobile] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:3001/login', { mobile, password });
localStorage.setItem('token', response.data.token);
localStorage.setItem('userId', response.data.userId);
localStorage.setItem('name', response.data.name);
setIsAuthenticated(true);
navigate('/');
} catch (error) {
setError('Invalid credentials');
};
return (
<LoginContainer>
<LoginForm onSubmit={handleSubmit}>
<h2>Login to WhatsApp</h2>
{error && <ErrorMessage>{error}</ErrorMessage>}
<Input
type="text"
placeholder="Mobile number"
value={mobile}
onChange={(e) => setMobile(e.target.value)}
required
/>
<Input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<Button type="submit">Login</Button>
<p>Don't have an account? <Link to="/register">Register</Link></p>
</LoginForm>
</LoginContainer>
);
export default Login;
Profile.js
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import axios from 'axios';
const ProfileContainer = styled.div`
flex: 1;
padding: 20px;
background-color: #fff;
`;
const ProfileInfo = styled.div`
margin-bottom: 20px;
`;
const LogoutButton = styled.button`
padding: 10px 20px;
background-color: #00a884;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
function Profile({ handleLogout }) {
const [profile, setProfile] = useState(null);
useEffect(() => {
fetchProfile();
}, []);
const fetchProfile = async () => {
try {
const response = await axios.get('http://localhost:3001/profile', {
headers: { Authorization: localStorage.getItem('token') }
});
setProfile(response.data);
} catch (error) {
console.error('Error fetching profile:', error);
if (error.response && error.response.status === 401) {
handleLogout();
};
if (!profile) {
return <ProfileContainer>Loading profile...</ProfileContainer>;
}
return (
<ProfileContainer>
<h2>Profile</h2>
<ProfileInfo>
<p><strong>Name:</strong> {profile.name}</p>
<p><strong>Mobile:</strong> {profile.mobile}</p>
</ProfileInfo>
<LogoutButton onClick={handleLogout}>Logout</LogoutButton>
</ProfileContainer>
);
export default Profile;
Register.js
import React, { useState } from 'react';
import styled from 'styled-components';
import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
const RegisterContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: #f0f2f5;
`;
const RegisterForm = styled.form`
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 350px;
`;
const Input = styled.input`
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
`;
const Button = styled.button`
width: 100%;
padding: 10px;
background-color: #00a884;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
const ErrorMessage = styled.p`
color: red;
margin-bottom: 10px;
`;
function Register() {
const [name, setName] = useState('');
const [mobile, setMobile] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
try {
await axios.post('http://localhost:3001/register', { name, mobile, password });
navigate('/login');
} catch (error) {
setError('Error registering user');
};
return (
<RegisterContainer>
<RegisterForm onSubmit={handleSubmit}>
<h2>Register for WhatsApp</h2>
{error && <ErrorMessage>{error}</ErrorMessage>}
<Input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<Input
type="text"
placeholder="Mobile number"
value={mobile}
onChange={(e) => setMobile(e.target.value)}
required
/>
<Input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<Button type="submit">Register</Button>
<p>Already have an account? <Link to="/login">Login</Link></p>
</RegisterForm>
</RegisterContainer>
);
export default Register;
Sidebar.js
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { FaUser, FaSearch, FaEllipsisV } from 'react-icons/fa';
import axios from 'axios';
const SidebarContainer = styled.div`
width: 35%;
max-width: 415px;
border-right: 1px solid #d1d7db;
background-color: #ffffff;
display: flex;
flex-direction: column;
`;
const LogoutButton = styled.button`
width: 100%;
padding: 10px 16px;
background-color: #f0f2f5;
color: #54656f;
border: none;
text-align: left;
font-size: 15px;
cursor: pointer;
transition: background-color 0.3s;
&:hover {
background-color: #e9edef;
`;
const Header = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background-color: #f0f2f5;
`;
const ProfileIcon = styled(FaUser)`
font-size: 24px;
color: #54656f;
cursor: pointer;
`;
const MenuIcon = styled(FaEllipsisV)`
font-size: 22px;
color: #54656f;
cursor: pointer;
`;
const SearchContainer = styled.div`
padding: 8px 15px;
background-color: #f0f2f5;
`;
const SearchWrapper = styled.div`
display: flex;
align-items: center;
background-color: #ffffff;
border-radius: 8px;
padding: 0 8px;
`;
const SearchIcon = styled(FaSearch)`
font-size: 14px;
color: #54656f;
margin-right: 20px;
`;
const SearchInput = styled.input`
width: 100%;
padding: 8px 0;
border: none;
outline: none;
font-size: 15px;
&::placeholder {
color: #3b4a54;
`;
const ContactsList = styled.div`
overflow-y: auto;
flex: 1;
`;
const ContactItem = styled(Link)`
display: flex;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid #f0f2f5;
text-decoration: none;
color: inherit;
&:hover {
background-color: #f5f6f6;
`;
const ContactAvatar = styled.div`
width: 49px;
height: 49px;
border-radius: 50%;
background-color: #dfe5e7;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
`;
const ContactInfo = styled.div`
flex: 1;
`;
const ContactName = styled.div`
font-size: 17px;
color: #111b21;
margin-bottom: 3px;
`;
const LastMessage = styled.div`
font-size: 14px;
color: #667781;
`;
const ProfileLink = styled(Link)`
text-decoration: none;
color: inherit;
`;
function Sidebar({ handleLogout }) {
const [contacts, setContacts] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
useEffect(() => {
fetchContacts();
}, []);
const fetchContacts = async () => {
try {
const response = await axios.get('http://localhost:3001/contacts', {
headers: { Authorization: localStorage.getItem('token') }
});
setContacts(response.data);
} catch (error) {
console.error('Error fetching contacts:', error);
};
const filteredContacts = contacts.filter(contact =>
contact.contact_name.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<SidebarContainer>
<Header>
<ProfileLink to="/profile">
<ProfileIcon />
</ProfileLink>
<MenuIcon />
</Header>
<SearchContainer>
<SearchWrapper>
<SearchIcon />
<SearchInput
placeholder="Search or start new chat"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</SearchWrapper>
</SearchContainer>
<ContactsList>
{/* Link to Contacts page */}
<ContactItem to="/contacts">
<ContactAvatar>
<FaUser color="#ffffff" size={25} />
</ContactAvatar>
<ContactInfo>
<ContactName>Contacts</ContactName>
</ContactInfo>
</ContactItem>
{filteredContacts.map((contact) => (
<ContactItem key={contact.contact_id} to={`/chat/${contact.contact_id}`}>
<ContactAvatar>
<FaUser color="#ffffff" size={25} />
</ContactAvatar>
<ContactInfo>
<ContactName>{contact.contact_name}</ContactName>
<LastMessage>Click to start chatting</LastMessage>
</ContactInfo>
</ContactItem>
))}
</ContactsList>
<LogoutButton onClick={handleLogout}>Logout</LogoutButton>
</SidebarContainer>
);
export default Sidebar;
Server.js
const express = require('express');
const mysql = require('mysql2');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const cors = require('cors');
require('dotenv').config();
const app = express();
app.use(express.json());
app.use(cors());
// MySQL connection
const db = mysql.createConnection({
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME
});
db.connect((err) => {
if (err) {
console.error('Error connecting to MySQL:', err);
return;
console.log('Connected to MySQL database');
});
// Middleware to verify JWT
const verifyToken = (req, res, next) => {
const token = req.headers['authorization'];
if (!token) return res.status(403).json({ error: 'No token provided' });
jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
if (err) return res.status(500).json({ error: 'Failed to authenticate token' });
req.userId = decoded.userId;
next();
});
};
// User registration
app.post('/register', async (req, res) => {
const { mobile, password, name } = req.body;
const hashedPassword = await bcrypt.hash(password, 10);
db.query('INSERT INTO users (mobile, password, name) VALUES (?, ?, ?)', [mobile, hashedPassword,
name], (err, result) => {
if (err) {
res.status(500).json({ error: 'Error registering user' });
} else {
res.status(201).json({ message: 'User registered successfully' });
}
});
});
// User login
app.post('/login', (req, res) => {
const { mobile, password } = req.body;
db.query('SELECT * FROM users WHERE mobile = ?', [mobile], async (err, results) => {
if (err || results.length === 0) {
res.status(401).json({ error: 'Invalid credentials' });
} else {
const user = results[0];
const passwordMatch = await bcrypt.compare(password, user.password);
if (passwordMatch) {
const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, { expiresIn: '1h' });
res.json({ token, userId: user.id, name: user.name });
} else {
res.status(401).json({ error: 'Invalid credentials' });
});
});
// Get user profile
app.get('/profile', verifyToken, (req, res) => {
db.query('SELECT id, mobile, name, profile_picture FROM users WHERE id = ?', [req.userId], (err,
results) => {
if (err) {
res.status(500).json({ error: 'Error fetching profile' });
} else {
res.json(results[0]);
});
});
// Corrected Add Contact Logic
app.post('/contacts', verifyToken, (req, res) => {
const { contactMobile, contactName } = req.body;
// Check if the user with the given mobile exists
db.query('SELECT id FROM users WHERE mobile = ?', [contactMobile], (err, results) => {
if (err) {
return res.status(500).json({ error: 'Database error while searching for the user.' });
if (results.length === 0) {
return res.status(404).json({ error: 'User with this mobile number does not exist.' });
const contactId = results[0].id;
// Check if the contact already exists in the user's contacts
db.query('SELECT * FROM contacts WHERE user_id = ? AND contact_id = ?', [req.userId, contactId],
(err, contactExists) => {
if (err) {
return res.status(500).json({ error: 'Error while checking if contact already exists.' });
if (contactExists.length > 0) {
return res.status(400).json({ error: 'Contact already exists in your contact list.' });
}
// Add the contact to the logged-in user's contacts
db.query(
'INSERT INTO contacts (user_id, contact_id, contact_name) VALUES (?, ?, ?)',
[req.userId, contactId, contactName],
(err, result) => {
if (err) {
return res.status(500).json({ error: 'Error adding contact to your contacts.' });
res.status(201).json({ message: 'Contact added successfully' });
);
});
});
});
// Get user's contacts
app.get('/contacts', verifyToken, (req, res) => {
db.query('SELECT c.contact_id, c.contact_name, u.mobile FROM contacts c JOIN users u ON
c.contact_id = u.id WHERE c.user_id = ?', [req.userId], (err, results) => {
if (err) {
res.status(500).json({ error: 'Error fetching contacts' });
} else {
res.json(results);
});
});
// Send a message
app.post('/messages', verifyToken, (req, res) => {
const { receiverId, content } = req.body;
db.query('INSERT INTO messages (sender_id, receiver_id, content) VALUES (?, ?, ?)', [req.userId,
receiverId, content], (err, result) => {
if (err) {
res.status(500).json({ error: 'Error sending message' });
} else {
res.status(201).json({ message: 'Message sent successfully' });
});
});
// Get messages between two users
app.get('/messages/:contactId', verifyToken, (req, res) => {
const { contactId } = req.params;
db.query('SELECT * FROM messages WHERE (sender_id = ? AND receiver_id = ?) OR (sender_id = ?
AND receiver_id = ?) ORDER BY sent_at ASC',
[req.userId, contactId, contactId, req.userId], (err, results) => {
if (err) {
res.status(500).json({ error: 'Error fetching messages' });
} else {
res.json(results);
});
});
// Start the server
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Database Schema
USE whatapp_db;
-- Create users table
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
mobile VARCHAR(15) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
name VARCHAR(50),
profile_picture VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Create messages table
CREATE TABLE IF NOT EXISTS messages (
id INT AUTO_INCREMENT PRIMARY KEY,
sender_id INT NOT NULL,
receiver_id INT NOT NULL,
content TEXT NOT NULL,
sent_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (sender_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (receiver_id) REFERENCES users(id) ON DELETE CASCADE
);
-- Create contacts table
CREATE TABLE IF NOT EXISTS contacts (
user_id INT NOT NULL,
contact_id INT NOT NULL,
contact_name VARCHAR(50),
added_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (user_id, contact_id),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (contact_id) REFERENCES users(id) ON DELETE CASCADE
);
-- Create indexes for faster lookup
CREATE INDEX idx_sender_receiver ON messages(sender_id, receiver_id);
CREATE INDEX idx_user_contact ON contacts(user_id, contact_id);
select * from users;
