A modern, high-performance webmail application built with the latest React ecosystem. Yukthi Webmail leverages a robust technology stack designed for speed, type safety, and a premium user experience.
💬 Join our community on Discord: discord.gg/29zTxvque — ask questions, report bugs, share ideas, and get involved.
| Project | Description |
|---|---|
| Docs | Documentation site |
| WebMail-API | Backend API |
| WebMail-BIMI-API | BIMI API |
| WebMail-RMQ-Worker | RabbitMQ worker |
-
Modern Architecture: Built on React 19 and Vite 6 for lightning-fast development and production performance.
-
Type-Safe Routing: Utilizes TanStack Router for fully typed client-side routing.
-
State & Data Management:
-
TanStack Query for efficient asynchronous data fetching and caching.
-
Jotai for atomic, flexible global state management.
-
Rich Text Editing: Integrated Tiptap editor for composing emails with formatting support (bullet lists, underlining, etc.).
-
UI & Styling:
-
Tailwind CSS 4 for utility-first styling.
-
Radix UI Themes for accessible, high-quality UI components.
-
React Icons for a comprehensive icon library.
-
Email Handling:
-
Postal-Mime for parsing raw email messages.
-
DomPurify for sanitizing HTML content to prevent XSS attacks.
-
Forms & Validation: Robust form handling using React Hook Form, Yup, and Hookform Resolvers.
-
File Handling: Drag-and-drop file uploads via React Dropzone.
- Core: React 19, ReactDOM 19
- Build Tool: Vite 6
- Language: TypeScript
- Styling: Tailwind CSS v4, Destyle.css
- Routing: TanStack Router
- Utilities: Date-fns, Use-debounce
- Node.js (v18 or higher recommended)
- npm (or yarn/pnpm/bun)
- Clone the repository:
git clone https://github.com/Yukthi-Systems/WebMail-UI
cd WebMail-UI
- Install dependencies:
npm install
To start the development server with Hot Module Replacement (HMR):
npm run dev
The application will be available at http://localhost:5173 (or the port shown in your terminal).
To create a production-ready build:
npm run build
This command runs the TypeScript compiler (tsc) to check for errors and then uses Vite to build the optimized assets.
To preview the production build locally:
npm run preview
This project uses ESLint and Prettier to maintain code quality and consistent formatting.
- Linting: Check for code issues.
npm run lint
- Formatting: Auto-format code using Prettier.
npm run format
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Found a bug or have a feature request? Open an issue.
Join our Discord server to chat with maintainers and other contributors, ask questions, and stay up to date with the project.