{"id":23331306,"url":"https://github.com/arin-paliwal/text-flow","last_synced_at":"2026-04-11T10:31:20.527Z","repository":{"id":153305244,"uuid":"602565738","full_name":"arin-paliwal/Text-Flow","owner":"arin-paliwal","description":"Text Flow application is a real-time messaging application built using the MERN stack (MongoDB, Express, React, Node.js) that allows users to send and receive messages in a chat interface. It has minimalistic User Interface and uses websockets for real-time communication between users.","archived":false,"fork":false,"pushed_at":"2024-09-15T09:50:46.000Z","size":1931,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T13:25:07.906Z","etag":null,"topics":["chat","css","express-js","expressjs","javascript","mongodb","nodejs","reactjs","socket-io","ui-components"],"latest_commit_sha":null,"homepage":"https://text-flow-dev.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arin-paliwal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-16T13:38:03.000Z","updated_at":"2024-09-15T09:52:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"33111cc7-6e22-4057-ad2b-c301b0c0f2a0","html_url":"https://github.com/arin-paliwal/Text-Flow","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arin-paliwal%2FText-Flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arin-paliwal%2FText-Flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arin-paliwal%2FText-Flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arin-paliwal%2FText-Flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arin-paliwal","download_url":"https://codeload.github.com/arin-paliwal/Text-Flow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640509,"owners_count":20971554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","css","express-js","expressjs","javascript","mongodb","nodejs","reactjs","socket-io","ui-components"],"created_at":"2024-12-20T22:34:04.090Z","updated_at":"2025-12-30T19:13:33.989Z","avatar_url":"https://github.com/arin-paliwal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TextFlow\n\n**TextFlow** is a real-time messaging application built using the MERN stack (MongoDB, Express, React, Node.js). It provides a minimalistic user interface, allowing users to send and receive messages seamlessly. The application leverages WebSockets for real-time communication between users.\n\n## Features\n\n- **Real-Time Messaging**: Send and receive messages instantly with WebSocket-based communication.\n- **Subscribing to Messages**: Users can subscribe to message threads for instant updates.\n- **Live Typing Indicator**: See when someone is typing a message in real-time.\n- **Mobile Responsive**: Optimized for mobile devices with a responsive design.\n- **Minimalistic Modals**: Clean and simple modal windows for various actions.\n- **Sidebar Slider for User Searching**: Slide-in sidebar to search for users within the application.\n- **JWT Tokens**: Secure authentication using JSON Web Tokens (JWT).\n- **Creating Groups**: Users can create chat groups for collaborative conversations.\n- **Adding/Removing Members from Groups**: Manage group members by adding or removing them.\n- **Renaming Groups**: Update group names easily to reflect changes.\n\n## Technologies Used\n\n- **Frontend**: React.js\n- **Backend**: Node.js with Express.js\n- **Database**: MongoDB\n- **Real-Time Communication**: WebSockets - Socket.io\n\n## Project Structure\n\n### Backend Structure\n\n```\nbackend/\n│\n├── config/             # Configuration files for database, JWT, etc.\n├── controllers/        # Business logic for handling API requests\n├── data/               # Seed data and database initialization scripts\n├── middlewares/        # Custom middlewares (e.g., authentication, error handling)\n├── Models/             # Mongoose models defining the schema for MongoDB\n├── routes/             # API routes linking HTTP requests to controllers\n├── .env                # Environment variables (not to be committed)\n├── .gitignore          # Files to be ignored by Git\n├── .npmrc              # NPM configuration file\n├── package-lock.json   # NPM lock file\n├── package.json        # Backend package information\n├── README.md           # Documentation for the backend\n└── server.js           # Entry point for the backend server\n```\n\n#### Folder/Files Descriptions\n\n- **`config/`**: Contains configuration files for setting up MongoDB, JWT, and other environment-specific settings.\n- **`controllers/`**: Houses the logic that handles incoming requests, processes data, and interacts with the database.\n- **`data/`**: This folder includes scripts for initializing the database and any seed data needed for development.\n- **`middlewares/`**: Contains middleware functions for authentication, validation, error handling, and other request-processing logic.\n- **`Models/`**: Defines the structure of your data with Mongoose schemas, which represent collections in MongoDB.\n- **`routes/`**: Maps incoming API requests to the appropriate controller methods.\n\n### Frontend Structure\n\n```\nfrontend/\n│\n├── node_modules/       # Frontend dependencies\n├── public/             # Public assets (e.g., images, icons, static files)\n└── src/\n    ├── Animations/     # Animation-related files, for dynamic UI elements\n    ├── Components/     # Reusable React components like buttons, modals, etc.\n    ├── config/         # Configuration files (e.g., API endpoints, environment settings)\n    ├── Context/        # React context files for global state management\n    ├── Pages/          # Individual pages and views of the application\n    ├── App.css         # Global CSS styles\n    ├── App.js          # Root component that integrates all parts of the UI\n    ├── index.css       # Base CSS styles\n    └── index.js        # Entry point for the frontend application\n├── .gitignore          # Files to be ignored by Git\n├── package-lock.json   # NPM lock file\n└── package.json        # Frontend package information\n```\n\n#### Folder/Files Descriptions\n\n- **`Animations/`**: Contains animations that enhance the user experience with dynamic effects for UI elements.\n- **`Components/`**: Houses reusable components such as buttons, input fields, modals, and more, which can be used across different pages.\n- **`config/`**: This directory includes files that manage configuration settings like API endpoints and environment-specific variables.\n- **`Context/`**: Contains files for React Context API, enabling global state management across the application.\n- **`Pages/`**: Contains individual pages and views like login, signup, chat interface, and more.\n- **`App.js`**: The main component that brings together different parts of the application and renders the UI.\n- **`index.js`**: The entry point of the React application, where the app is rendered into the DOM.\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js\n- MongoDB\n- Code Editor\n\n### Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/arin-paliwal/Text-Flow.git\n   ```\n\n2. Install dependencies for both frontend and backend:\n\n   ```bash\n   cd textflow\n   cd backend\n   npm install\n   cd ../frontend\n   npm install\n   ```\n\n3. Set up environment variables:\n\n   Create a `.env` file in the `backend` directory and add the following variables:\n\n   ```bash\n   MONGO_URI=your-mongodb-uri\n   PORT=your-server-port\n   ```\n\n4. Start the development server:\n\n   ```bash\n   cd backend\n   npm run dev\n   ```\n\n   In another terminal, start the React development server:\n\n   ```bash\n   cd frontend\n   npm start\n   ```\n\n\n### Postman Collection\n\nYou can find the Postman collection for API testing here: [Postman Collection URL](https://www.postman.com/paliwalarin/workspace/text-flow-full-stack)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Contributing\n\nFeel free to fork this project and submit pull requests. Contributions are welcome!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farin-paliwal%2Ftext-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farin-paliwal%2Ftext-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farin-paliwal%2Ftext-flow/lists"}