{"id":26591584,"url":"https://github.com/raken15/basicfullstackreactcsharp","last_synced_at":"2026-04-11T09:07:24.350Z","repository":{"id":280127011,"uuid":"940523914","full_name":"raken15/BasicFullStackReactCsharp","owner":"raken15","description":"BasicFullStackReactCsharp A full-stack web application built with React (TypeScript) for the frontend and C# .NET 8 Web API for the backend. Features include complete CRUD functionality, ensuring seamless communication between client and server. Designed following best practices for scalability, maintainability, and performance.","archived":false,"fork":false,"pushed_at":"2025-03-18T19:15:56.000Z","size":3387,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T20:22:22.904Z","etag":null,"topics":["backend","csharp","dotnet","dotnet-core","frontend","fullstack","react","typescript","webapi"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raken15.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-02-28T10:25:02.000Z","updated_at":"2025-03-18T19:15:57.000Z","dependencies_parsed_at":"2025-03-19T02:33:08.928Z","dependency_job_id":null,"html_url":"https://github.com/raken15/BasicFullStackReactCsharp","commit_stats":null,"previous_names":["raken15/basicfullstackreactcsharp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raken15%2FBasicFullStackReactCsharp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raken15%2FBasicFullStackReactCsharp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raken15%2FBasicFullStackReactCsharp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raken15%2FBasicFullStackReactCsharp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raken15","download_url":"https://codeload.github.com/raken15/BasicFullStackReactCsharp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245111880,"owners_count":20562511,"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":["backend","csharp","dotnet","dotnet-core","frontend","fullstack","react","typescript","webapi"],"created_at":"2025-03-23T14:18:39.473Z","updated_at":"2026-04-11T09:07:24.321Z","avatar_url":"https://github.com/raken15.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BasicFullStackReactCsharp\n\n## Project Overview\n\n**BasicFullStackReactCsharp** is a full-stack web application that demonstrates a RESTful API for CRUD operations on a **Message** model.  \nThe backend is built using C# with .NET 8.0 following the MVC architecture and utilizes an in-memory data service for rapid development and testing.  \nThe frontend is developed with React, TypeScript, and Vite, and it leverages a custom `useApi` hook along with `useState` for handling asynchronous API requests using `fetch`.  \nCORS is configured to ensure secure cross-origin communication, and Swagger is used for interactive API documentation.\n\n---\n\n## Table of Contents\n\n- [Demo Showcase](#demo-showcase)\n- [Key Features](#key-features)\n- [Installation and Setup](#installation-and-setup)\n  - [Prerequisites](#prerequisites)\n  - [Backend Setup](#backend-setup)\n  - [Frontend Setup](#frontend-setup)\n- [Usage](#usage)\n  - [CRUD Operation Buttons Explained](#crud-operation-buttons-explained)\n- [Technologies Used](#technologies-used)\n- [Project Structure](#project-structure)\n- [License](#license)\n- [Contributing](#contributing)\n\n---\n\n## Demo Showcase\n\n![BasicFullStackReactCsharp-Run-Setup](Demo-Clips/BasicFullStackReactCsharp-Run-Setup.gif)\n![BasicFullStackReactCsharp-Going-To-URL](Demo-Clips/BasicFullStackReactCsharp-Going-To-URL.gif)\n![Showcase-CRUD-client-server](Demo-Clips/Showcase-CRUD-client-server.gif)\n\n---\n\n## Key Features\n\n- **MVC Architecture:** Organizes the backend into Models, Views, and Controllers for a clean separation of concerns.\n- **Asynchronous Operations:** All methods are implemented asynchronously using `fetch` on both the backend and frontend, ensuring a responsive user experience.\n- **In-Memory Data Service:** Provides a lightweight and fast data store ideal for development and demos.\n- **Custom useApi Hook:** Located in `useApi.ts`, it simplifies API communication by managing asynchronous requests and state using `useState`.\n- **CORS Enabled:** Ensures secure cross-origin requests between the client and server.\n- **Swagger Documentation:** Offers interactive API documentation to facilitate testing and development.\n- **Vite-Powered Frontend:** Enables rapid development, hot module replacement, and optimized builds.\n- **Exception Filter and Error handling:** used exceptions `throws`, `try-catch`, and exception filter to handle the exceptions and unexpected behavior in the code.\n\n---\n\n## Installation and Setup\n\n### Prerequisites\n\n- **.NET 8.0 SDK:** [Download here](https://dotnet.microsoft.com/download/dotnet/8.0)\n- **Node.js (v16 or later):** [Download here](https://nodejs.org/)\n- **Visual Studio Code**\n- **Git**\n\n### Backend Setup\n\n1. **Navigate to the Backend Folder:**\n\n       cd BackendCsharp\n\n2. **Restore Dependencies and Build:**\n\n       dotnet restore\n       dotnet build\n\n3. **Run the API:**\n\n       dotnet run\n\n4. **Access the API:**  \n   The API will typically run on `http://localhost:5194` (or as configured in your launchSettings.json).\n\n### Frontend Setup\n1. **Navigate to the Frontend Folder:**\n\n       cd FrontendReact\n\n2. **Install Dependencies:**\n\n       npm install\n\n3. **Start the Client Development Environment:**\n\n       npm run dev\n\n4. **Access the App:**  \n   The React application will run on `http://localhost:5173/`.\n\n---\n\n## Usage\n\nAfter setting up both the backend and frontend, the application can be accessed at [http://localhost:5173](http://localhost:5173).\n\n- **API Documentation:**  \n  View the interactive Swagger documentation at [http://localhost:5194/swagger/](http://localhost:5194/swagger/).\n\n### CRUD Operation Buttons Explained\n\nThe UI includes buttons that trigger asynchronous API calls using the `fetch` API. The following endpoints are called when clicking the buttons:\n\n- **Get:**  \n  Retrieves a single message asynchronously.  \n  **Example URL:** `http://localhost:5194/api/messages/1`  \n  *Use this button to view detailed information for a specific message.*\n\n- **Get All:**  \n  Fetches and displays all messages asynchronously from the in-memory data service.  \n  **Example URL:** `http://localhost:5194/api/messages/`  \n  *Click this button to view a complete list of messages.*\n\n- **Add:**  \n  Creates a new message asynchronously by sending the provided details with a POST request.  \n  **Example URL:** `http://localhost:5194/api/messages/`  \n  *Enter message body and use this button to add a new message*\n\n- **Update:**  \n  Modifies an existing message asynchronously by sending updated data with a PUT request.  \n  **Example URL:** `http://localhost:5194/api/messages/1`  \n  *Enter message id and message body, and click this button to update the message.*\n\n- **Delete:**  \n  Removes a message asynchronously from the in-memory data service by sending a DELETE request.  \n  **Example URL:** `http://localhost:5194/api/messages/1`  \n  *Enter message id and use this button to delete the message permanently.\n\nEach button operation is handled asynchronously to ensure smooth and responsive interactions.\n\n---\n\n## Technologies Used\n\n- **Backend:**\n  - **C# \u0026 .NET 8.0:** For building the RESTful API.\n  - **MVC Architecture:** Structures the backend into Models, Views, and Controllers.\n  - **In-Memory Data Service:** Offers a simple and fast data store for development and demo purposes.\n  - **CORS Configuration:** Enables secure cross-origin requests.\n  - **Swagger:** Provides interactive API documentation and testing tools.\n\n- **Frontend:**\n  - **React:** For building the dynamic user interface.\n  - **TypeScript:** Enhances code reliability with static typing.\n  - **Vite:** Powers fast development and optimized builds.\n  - **Custom useApi Hook:** Located in `useApi.ts`, it handles asynchronous API calls using `fetch`.\n  - **useState:** Manages state within the React components (e.g., in `App.tsx`).\n\n---\n\n## Project Structure\n\n*(Project structure details will be added later.)*\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n\n---\n\n## Contributing\n\n*(Content coming soon.)*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraken15%2Fbasicfullstackreactcsharp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraken15%2Fbasicfullstackreactcsharp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraken15%2Fbasicfullstackreactcsharp/lists"}