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:

1. Open WhatsApp and navigate to the chat you want to export.
2. Tap on the three dots (menu) > More > Export Chat.
3. 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!

"next": "14.0.4"
"next-auth": "^5.0.0-beta.4",

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev