Repository files navigation

A modern, full-stack real-time chat application built with TypeScript, featuring instant messaging capabilities powered by WebSockets. This application demonstrates best practices in modern web development with a React frontend and Express backend.

• Real-time Messaging: Instant message delivery using WebSocket connections
• Modern UI: Clean and responsive interface built with React
• State Management: Centralized state management with Redux Toolkit
• Type Safety: Full TypeScript implementation for better developer experience
• Database Persistence: Message history stored in MongoDB
• Hot Reloading: Development environment with live reload for both client and server
• Production Ready: Optimized build configurations for deployment

• React 18 - UI library
• Redux Toolkit - State management
• TypeScript - Type safety
• Webpack 5 - Module bundler
• Babel - JavaScript compiler

• Node.js - Runtime environment
• Express - Web framework
• WebSocket (ws) - Real-time communication
• MongoDB/Mongoose - Database and ODM
• TypeScript - Type safety

• ESLint - Code linting
• Prettier - Code formatting
• Jest - Testing framework
• Nodemon - Development server

Before you begin, ensure you have the following installed:

• Node.js (v16.0.0 or higher)
• npm (v7.0.0 or higher)
• MongoDB (v4.4 or higher)

git clone https://github.com/yourusername/chat-application.gitcd chat-application

npm install

Create a.env file in the root directory:

# Server ConfigurationPORT=3000NODE_ENV=development# Database ConfigurationMONGODB_URI=mongodb://localhost:27017/chat-app# WebSocket ConfigurationWS_PORT=8080# Client ConfigurationREACT_APP_API_URL=http://localhost:3000REACT_APP_WS_URL=ws://localhost:8080

Make sure MongoDB is running on your system:

# macOS/Linuxmongod# Windowsmongod.exe

To run both client and server in development mode:

# Terminal 1 - Start the TypeScript compiler for the servernpm run dev:server# Terminal 2 - Start the server with nodemonnpm run server# Terminal 3 - Start the client development servernpm run client

The application will be available at:

• Frontend:http://localhost:8080
• Backend API:http://localhost:3000
• WebSocket:ws://localhost:8080

# Start production servernpm start# Development serversnpm run server# Start server with nodemonnpm run client# Start client dev servernpm run dev:server# Watch and compile server TypeScript# Build commandsnpm run build:client# Build client for productionnpm run build:server# Compile server TypeScript# Code qualitynpm run lint# Run ESLintnpmtest# Run tests (when configured)

chat-application/├── client/                 # Frontend application│   ├── src/               # Source files│   │   ├── components/    # React components│   │   ├── store/         # Redux store and slices│   │   ├── utils/         # Utility functions│   │   └── index.tsx      # Entry point│   ├── tsconfig.json      # TypeScript config│   └── webpack.config.js  # Webpack configuration│├── server/                # Backend application│   ├── src/              # Source files│   │   ├── controllers/  # Route controllers│   │   ├── models/       # Database models│   │   ├── routes/       # API routes│   │   ├── services/     # Business logic│   │   ├── utils/        # Utility functions│   │   └── server.ts     # Entry point│   └── tsconfig.json     # TypeScript config│├── types/                # Shared TypeScript types├── .vscode/              # VS Code settings├── eslint.config.js      # ESLint configuration├── package.json          # Project dependencies└── README.md            # Project documentation

For proper ESLint integration with VS Code, ensure your.vscode/settings.json includes:

{"eslint.experimental.useFlatConfig":true}

This is required for ESLint's new flat config system as of April 2024. SeeESLint's migration guide for more information.

The project uses separate TypeScript configurations for client and server to optimize for their respective environments.

npm run build:client

This creates an optimized production build inclient/dist/.

npm run build:server

This compiles TypeScript files to JavaScript inserver/dist/.

NODE_ENV=production npm start

npmtest

Note: Test configuration is pending. Jest is installed and ready for test implementation.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Follow the ESLint configuration
• Use Prettier for code formatting
• Write meaningful commit messages
• Add appropriate TypeScript types
• Comment complex logic

This project is licensed under the MIT License - see theLICENSE file for details.

Olivia Carlisle

• Built with modern web technologies
• Inspired by best practices in full-stack development
• Special thanks to the open-source community