Have you ever wondered what secrets your WhatsApp chats hold? What if you could analyze your conversations to discover who sends the most messages, when the most active times are, or which emojis dominate your chats? That's exactly what TrendyWApp does!
In this blog post, I’ll walk you through how I built TrendyWApp—a secure, fun, and insightful web app using Next.js 14, Radix-UI, Zustand, and other modern technologies. Whether you’re curious about building a similar app or just want to know how to analyze your WhatsApp data, you’ll find something useful here.
Live Demo
You can check out the live demo of TrendyWApp here. Feel free to upload your chat export file or explore the app using dummy data. The best part? Your data will never be uploaded to the server—everything happens securely on the frontend.
Repository and Setup
TrendyWApp is open source! You can find the code on GitHub here. This project was bootstrapped with create-next-app
and leverages the latest features in Next.js 14.
To get started locally:
git clone https://github.com/Rajesh-Royal/whatsapp-analyzer.git
cd whatsapp-analyzer
yarn install
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Key Features 🔍
1. Secure Data Handling
All data processing happens on the frontend using Zustand for state management. This ensures your WhatsApp chat data stays secure and never leaves your device.
2. Authentication with Auth.js
Users can access most insights without logging in, but for those who prefer, I’ve integrated authentication via Auth.js using Google, GitHub, and email/password providers.
3. UI/UX with Radix-UI and Tailwind CSS
The user interface is built with Radix-UI and Tailwind CSS, ensuring a modern and responsive design. Forms are managed with React Hook Form and validated using Zod.
4. Backend API Routes
Though TrendyWApp is currently frontend-focused, I’ve set up API routes using Next.js that could store data in a PostgreSQL database via Prisma. These APIs include endpoints for chat analysis, message counts, and more.
You can explore the full list of API routes in the Postman collection included in the GitHub repository.
5. Full TypeScript Support
The project is built with full TypeScript support, ensuring type safety and a better developer experience. It’s also configured with ESLint and Prettier to maintain code quality.
How It Works
Step 1: Exporting WhatsApp Chat
To get started with TrendyWApp, you’ll first need to export a WhatsApp chat. Here’s how:
- Open WhatsApp and navigate to the chat you want to export.
- Tap on the three dots (menu) > More > Export Chat.
- Choose whether to include media or not and save the file.
Step 2: Upload and Analyze
Once you have your chat export file, visit the TrendyWApp demo site. You can upload your file, or simply click the button to preview the analysis with dummy data.
Step 3: View Insights
TrendyWApp will analyze the chat and provide insights like:
- Who sends the most messages
- Most active times
- Most used emojis
- Media sent by each participant
These insights are presented on a dashboard, which you can explore without logging in.
Below is a dashboard preview:
Technologies Used
Here’s a quick overview of the technologies and tools used in this project:
- Next.js 14: The foundation of the app, using the latest features and server actions.
- Radix-UI & Tailwind CSS: For a clean and responsive UI.
- Zustand: State management on the frontend.
- Auth.js: User authentication with Google, GitHub, and email/password.
- Zod & React Hook Form: For form management and validation.
- Winston: Logging.
- TypeScript: Ensuring type safety throughout the app.
- Prisma & PostgreSQL: API routes ready for potential backend data storage.
- ESLint and Prettier: For code quality
Conclusion
Building TrendyWApp was a rewarding experience that allowed me to explore the latest features of Next.js while providing a fun and secure way to analyze WhatsApp chats. Whether you're looking to build something similar or just want to explore your chat data, I hope you find TrendyWApp and this blog post helpful.
Feel free to fork or give a star to the GitHub repository, explore the code, or suggest improvements. If you have any questions or feedback, please drop a comment below.
Thanks for reading, and have a great day!
Rajesh-Royal / whatsapp-analyzer
Analyze the whatsapp exported chat
TrendyWApp
TrendyWApp is a full-fledged application to analyze your WhatsApp chat, fun facts, and its trends. It is 100% secure".
This is a Next.js project bootstrapped with create-next-app
.
Next.js Versions:
"next": "14.0.4"
"next-auth": "^5.0.0-beta.4",
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are…
Top comments (0)