A modern, real-time messaging application built with Next.js and TypeScript. Designed for seamless communication with features like real-time messaging, file attachments, user profiles, and a sleek interface with animated background.
Live Demo: Check out the deployed version coming soon!
- Features
- Screenshots
- Getting Started
- Usage
- Customization
- Project Structure
- Built With
- Dependencies
- Releases
- Key Features Explained
- License
- Acknowledgments
- Contact
- Contributing
- Support
- Real-time Messaging: Instant message delivery with typing indicators.
- File Attachments: Send images and files up to 10MB in size.
- User Profiles: Customizable avatars and profile settings.
- Light/Dark Mode: Toggle between light and dark themes seamlessly.
- Responsive Design: Optimized for mobile, tablet, and desktop devices.
- Animated Background: Dynamic particle animations for visual appeal.
- Smooth Animations: Fluid transitions and effects.
- User Search: Find and add new contacts easily.
- Message Status: See when messages are delivered and read.
- Typing Indicators: Know when someone is typing a response.
- Message Management: Delete messages as needed.
- Secure Authentication: User authentication and session management.
- Offline Support: Access previous conversations even offline.
- Emoji Support: Express yourself with a range of emojis.
| Feature | Screenshot |
|---|---|
| Chat Interface |  |
| Profile Settings |  |
| User Search |  |
Set up and run PeekoChat locally with these steps.
- Node.js: Version 18.0 or higher
- Package Manager:
npmoryarn - SQLite: For database storage
- Clone the Repository
git clone https://github.com/VoxDroid/PeekoChat- Navigate to the Project Directory
cd PeekoChat
- Install Dependencies
npm install
# or
yarn install
- Start the Development Server
npm run dev
# or
yarn dev
- Open http://localhost:3000 in your browser to view the application.
Once PeekoChat is running, you can explore and use its features. Below are key sections and how to use them effectively.
- Launch the development server as described above.
- Register a new account or use the default test accounts (admin/admin or test/test).
- Start chatting with existing contacts or add new ones.
- Purpose: Send and receive messages in real-time.
- How to Use: Select a contact from the sidebar and type in the message input field.
- Purpose: Share images and files with your contacts.
- How to Use: Click the paperclip icon, select a file (up to 10MB), and send.
- Purpose: Customize your profile and avatar.
- How to Use: Click the settings icon in the header to access profile settings.
- Purpose: Find and connect with new users.
- How to Use: Click the search icon, enter a username, and add the user to your contacts.
Tailor the application to reflect your personal style and preferences.
Modify the color scheme in tailwind.config.ts:
// tailwind.config.ts
const config = {
theme: {
extend: {
colors: {
violet: {
// Customize violet shades here
},
},
},
},
};Adjust CSS variables in app/globals.css:
:root {
--primary: 139, 92, 246; /* Violet color */
}
.dark {
--primary: 139, 92, 246; /* Same for dark mode */
}Tweak the particle animation in components/particle-background.tsx:
// Adjust particle count
const particleCount = Math.floor((canvas.width * canvas.height) / 20000);
// Customize particle colors
this.color = `rgba(139, 92, 246, ${Math.random() * 0.3 + 0.1})`;Customize message appearance in app/globals.css:
.message-bubble.sent {
background: rgba(139, 92, 246, 0.3);
backdrop-filter: blur(5px);
/* Add more styles here */
}
.message-bubble.received {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
/* Add more styles here */
}peekochat/
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home/login page
│ └── chat/ # Chat routes
├── actions/ # Server actions
│ ├── auth.ts # Authentication actions
│ ├── messages.ts # Message handling
│ └── users.ts # User management
├── components/ # Reusable React components
│ ├── chat-layout.tsx # Main chat interface
│ ├── chat-sidebar.tsx # Contacts sidebar
│ ├── chat-window.tsx # Message display area
│ ├── login-page.tsx # Authentication UI
│ ├── particle-background.tsx # Animated background
│ ├── profile-settings.tsx # User profile editor
│ └── ui/ # UI components (shadcn)
├── lib/ # Utility functions
│ ├── auth.ts # Authentication helpers
│ ├── db.ts # Database operations
│ └── utils.ts # General utilities
├── public/ # Static assets
│ ├── Attachments/ # User file uploads
│ ├── ProfilePictures/ # User avatars
│ └── logo/ # Application logos
├── next.config.mjs # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── package.json # Dependencies and scripts
- Next.js - React framework with App Router
- TypeScript - Typed JavaScript
- Tailwind CSS - Utility-first CSS framework
- SQLite - Embedded database
- shadcn/ui - Reusable UI components
- Lucide Icons - SVG icon set
To run this project, the following Node.js packages are required (listed in package.json):
next- Core frameworkreactandreact-dom- React librariestypescript- Type checkingtailwindcss- Stylingsqliteandsqlite3- Databasejose- JWT authentication@lucide/react- Icons- Various
shadcn/uidependencies (e.g.,@radix-ui/*)
Install them with:
npm install
- Check the Releases page for versioned updates.
- Each release includes notes on new features, bug fixes, and improvements.
- The source code is the primary distribution method; no pre-built binaries are provided.
Messages are delivered instantly with typing indicators and read receipts, implemented in actions/messages.ts and components/chat-window.tsx.
Secure file uploads with size validation, preview generation, and progress indicators, found in actions/messages.ts and components/chat-window.tsx.
Secure JWT-based authentication with session management, implemented in lib/auth.ts and actions/auth.ts.
A semi-transparent particle system that creates a dynamic visual effect, customizable in components/particle-background.tsx.
Mobile-first approach ensures the application works seamlessly across all device sizes, built into all components.
This project is licensed under the MIT License. See the license file for details.
- shadcn/ui - Reusable UI components
- Lucide Icons - Beautiful icon library
- Next.js - Robust framework
- Tailwind CSS - Efficient styling
- SQLite - Reliable database
Questions or feedback? Reach out:
- GitHub: @VoxDroid
Contributions are welcome! Please read our Contributing Guide for details on how to contribute, and review our Code of Conduct to ensure a positive and inclusive community.
To contribute:
- Fork the repository: https://github.com/VoxDroid/PeekoChat
- Create a feature branch (
git checkout -b feature-name) - Commit your changes (
git commit -m "Add feature") - Push to the branch (
git push origin feature-name) - Open a pull request
For support, please refer to our Support Guide. If you encounter security issues, please review our Security Policy.
If you find this project useful, consider supporting its development:
- Ko-fi: Buy me a coffee
- Star the Repository: Give it a star on GitHub
- Report Issues: Submit bugs or suggestions on the Issues page
