Chattastic is a real-time chat application designed to provide seamless communication. Leveraging the power of Next.js v14 and TypeScript, this application offers a modern and efficient chatting experience. The styling is crafted using the expressive and utility-first CSS framework, Tailwind CSS.
- Features
- Technologies
- Getting Started
- Usage
- Authentication
- Chat Features
- User Status and Last Online Time
- Deployment
- License
- Real-Time Communication: Enjoy instant messaging with real-time updates, creating a dynamic and responsive chat environment.
- Firebase Integration: Chattastic utilizes Firebase as a "backend" for storing and managing chat data, ensuring reliability and scalability.
- User Authentication: Secure your chats with user authentication, allowing only authorized users to participate in the conversation.
- Responsive Design: Chattastic is built with a responsive design, ensuring an optimal experience across various devices and screen sizes.
- Next.js v14: The application is developed on the latest version of Next.js, providing a powerful and flexible framework for building React applications.
- TypeScript: Chattastic is predominantly written in TypeScript, offering static typing for improved code quality and developer productivity.
- Tailwind CSS: Styling is done using Tailwind CSS, facilitating rapid development and easy customization.
- Firebase: Firebase serves as the "backend" for Chattastic, offering real-time database functionality, authentication, and more.
To get started with Chattastic, follow these steps:
- Clone the repository:
git clone https://github.com/RuanCampello/chattastic.git
- Install dependencies:
npm install
- Set up Firebase:
- Create a project on the Firebase Console.
- Obtain your Firebase configuration (API keys, etc.).
- Add the configuration to the appropriate file in your project.
- Run the development server:
npm run dev
Once the application is set up, users can register with the following information:
- Name
- Username (important for searching and connecting with other users)
- Password
To find and connect with other users, use their usernames. For logging in, users only need to provide their e-mail and password.
Chattastic's authentication process involves collecting user details during the registration process, including a name, e-mail, username, and password. To search for and connect with other users, the username is crucial. However, for logging in, users only need to provide their e-mail and password.
Chattastic's chat functionality includes:
- Real-Time Messaging: Experience instant communication with real-time updates.
- Multimedia Support: Share images and emojis in your messages.
- Message Timestamps: View the time of each message for better context.
- Message Replies: Enhance interactivity by replying to your own or another user's messages.
Chattastic enhances user engagement with the following features:
- User Status: Easily identify whether a user is online, away, or offline.
- Last Online Time: If a user is offline, Chattastic displays their last online time, providing additional context.
The application is deployed on Vercel. You can access the live version at https://chattastic.vercel.app/.
This project is licensed under the MIT License.