SignalRTemplate: Real-Time Web Application with .NET 8 and SignalR

Welcome to SignalRTemplate, a cutting-edge demonstration of real-time web technology using .NET 8 and SignalR. This solution showcases how to build a dynamic, responsive application that can provide instant updates to connected clients.

Features

• Real-Time Updates: Leveraging the power of SignalR, this application provides real-time updates to all connected clients. Whenever the items collection is updated, all clients are immediately notified, eliminating the need for constant polling or manual refreshes. The front-end application connects to the SignalR hub and listens for updates. When it receives an update, it fetches the updated items from the API, ensuring that the user interface always reflects the latest data.

• CRUD Operations: The application provides a full suite of CRUD operations for managing items. You can create, read, update, and delete items through a clean, intuitive API.

• Modern Tech Stack: Built on .NET 8, the latest version of Microsoft's powerful, cross-platform framework, this application represents the state of the art in web development technology.

• TypeScript: By leveraging TypeScript, the application benefits from static typing, which can catch potential errors at compile time rather than runtime. TypeScript also enhances the development experience with features like autocompletion and type inference.

• React: The application uses React for its user interface, allowing for efficient updates and rendering of components. React's component-based architecture promotes reusability and maintainability.

Getting Started

To get started with SignalRTemplate, you'll need to clone the repository and open the solution in your preferred IDE.

Prerequisites

• .NET 8 SDK
• An IDE such as Visual Studio 2022

Running the Application

1. Set SignalRTemplate.WebApi as the startup project.
2. Press F5 to start debugging. The API will be hosted at https://localhost:44313/.

Web API

The heart of SignalRTemplate is its Web API, which provides a variety of endpoints for managing items:

• GET /items: Retrieve all items.
• POST /items: Create a new item. The request body should be a JSON object with a name property.
• DELETE /items/{itemId}: Delete an item by ID.

SignalR Hub

SignalRTemplate's real-time functionality is powered by a SignalR hub located at /itemsHub. This hub sends a ReceiveItemsUpdate message to all connected clients whenever an item is created, ensuring that all users have the most up-to-date information at all times.

Front-End Application

The front-end of SignalRTemplate is a robust, modern web application built with React and TypeScript. React, a popular JavaScript library for building user interfaces, allows for efficient updates and rendering of components. TypeScript, a statically typed superset of JavaScript, brings the benefits of static typing to the dynamic world of JavaScript, enhancing maintainability, reducing runtime errors, and improving the development experience with features like autocompletion and type inference.

Running the Front-End Application

1. Navigate to the WebUI directory.
2. Run npm install to install the dependencies.
3. Run npm start to start the application. It will be hosted at http://localhost:3000/.

Prerequisites

• Node.js
• npm

Development

The front-end application is set up for development with hot module replacement. This means you can make changes to the code and see the changes in your browser without refreshing the page.

Contributing

We welcome contributions from developers of all skill levels. If you're interested in contributing, please feel free to submit a pull request. For major changes, please open an issue first to discuss your proposed changes.