Blitz Chat is a full-stack chat application built with Next.js 14, TypeScript, Tailwind CSS, and UPSTASH Redis. The app supports real-time messaging, secure authentication, and includes features like image uploads, notification sounds, and a responsive UI with light and dark modes.
- Real-Time Messaging: Instant messaging with real-time updates.
- Authentication: Secure user authentication and session management using Kinde.
- Responsive UI: Fully responsive design optimized for mobile, tablet, and desktop.
- Light and Dark Mode: User preference-based theme switching.
- Notification Sounds: Customizable notification sounds for new messages.
- Satisfying Typing Effects: Smooth and visually appealing typing effects.
- Redis Integration: Efficient data storage and retrieval using UPSTASH Redis.
- Image Uploads: Share images directly within the chat.
- Deployment: Application deployed using Vercel.
- Next.js 14: React framework with server-side rendering and static site generation.
- TypeScript: Strongly typed programming language that builds on JavaScript.
- Tailwind CSS: Utility-first CSS framework for styling.
- Redux Toolkit: State management with Redux and RTK Query.
- Cloudinary: For handling image uploads and storage.
- Node.js: JavaScript runtime for building scalable network applications.
- Express.js: Web application framework for Node.js.
- UPSTASH Redis: Managed Redis database for real-time data handling.
- Pusher: Service for adding real-time functionality.
- Vercel: Deployment platform for frontend and backend.
- Node.js: Download and Install Node.js
- MongoDB: Install and run MongoDB locally or use a cloud provider.
- VSCode: Download and Install Visual Studio Code
-
Clone the repository:
git clone https://github.com/yourusername/blitz-chat.git cd blitz-chat -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Navigate to the backend directory (if separated):
cd backend -
Install dependencies:
npm install
-
Start the server:
npm run dev
-
Vercel Deployment: Deploy both the frontend and backend on Vercel.
- Connect your GitHub repository to Vercel.
- Set the environment variables in the Vercel dashboard.
- Deploy the application directly from the Vercel dashboard.
- Next.js: Next.js Documentation
- TypeScript: TypeScript Documentation
- Tailwind CSS: Tailwind CSS Documentation
- Redux Toolkit: Redux Toolkit Documentation
- UPSTASH Redis: UPSTASH Redis Documentation
- Cloudinary: Cloudinary Documentation
- Vercel: Vercel Documentation
If you have any questions or feedback, please feel free to contact me at [email protected]. You can also connect with me on LinkedIn or Twitter. Thank you for visiting my project!