{"id":27615639,"url":"https://github.com/glenvillethedev/net-react-app","last_synced_at":"2025-12-30T20:20:52.189Z","repository":{"id":288557716,"uuid":"968265214","full_name":"glenvillethedev/net-react-app","owner":"glenvillethedev","description":"Expenses Tracker Admin using ASP.NET Core and ReactJS with Bootstrap for the UI and JWT for auth.","archived":false,"fork":false,"pushed_at":"2025-04-18T07:23:52.000Z","size":212,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T03:56:59.640Z","etag":null,"topics":["aspdotnetcore","aspdotnetcorewebapi","axios","bootstrap","css","dotnet","html","identity","javascript","jwt","react-router","reactjs","sqlserver"],"latest_commit_sha":null,"homepage":"","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/glenvillethedev.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,"zenodo":null}},"created_at":"2025-04-17T19:29:09.000Z","updated_at":"2025-04-18T07:21:18.000Z","dependencies_parsed_at":"2025-04-18T21:27:07.545Z","dependency_job_id":"35060436-5c4b-401d-acf5-441cec3546a9","html_url":"https://github.com/glenvillethedev/net-react-app","commit_stats":null,"previous_names":["glenvillethedev/net-react-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenvillethedev%2Fnet-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenvillethedev%2Fnet-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenvillethedev%2Fnet-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenvillethedev%2Fnet-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glenvillethedev","download_url":"https://codeload.github.com/glenvillethedev/net-react-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250366715,"owners_count":21418769,"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":["aspdotnetcore","aspdotnetcorewebapi","axios","bootstrap","css","dotnet","html","identity","javascript","jwt","react-router","reactjs","sqlserver"],"created_at":"2025-04-23T03:57:02.838Z","updated_at":"2025-12-30T20:20:52.126Z","avatar_url":"https://github.com/glenvillethedev.png","language":"JavaScript","readme":"# 📕 **Expenses Tracker - Admin**\n\nA web application built for **administrators** of the Expenses Tracker platform.  \nIt allows admin users to manage other users securely and efficiently.  \n\n✅ Built with **ReactJS** (Frontend) and **ASP.NET Core Web API** (Backend)  \n✅ Implements **JWT with Refresh Token** for authentication  \n\n### ✅ **Features:**\n\n- 🔑 **Authentication**: Secure login using ASP.NET Core Identity and JWT.\n- 👥 **User Management**: Add, update, and delete users and admin accounts.\n- 🌐 **Responsive UI**: Mobile-friendly UI using Bootstrap 5.\n- 📄 **Logging**: Structured logging with Serilog.\n\n---\n\n## ⚙️ **Tech Stack:**\n\n- **Frontend:** ReactJS, Bootstrap\n- **Backend:** C#, ASP.NET Core WebAPI\n- **Database:** MS SQL Server (with EntityFramework Core)\n- **Authentication:** ASP.NET Core Identity, JWT\n- **Logging:** Serilog\n- **Packages:** axios, react-router\n- **Version Control:** Git\n- **Tools:** Visual Studio Community 2022, Visual Studio Code\n\n---\n\n## 💻 **Installation and Setup:**\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/glenvillethedev/net-react-app.git\n```\n\n### 2. Frontend Setup\n\nProceed to frontend root folder\n```bash\ncd frontend/expenses-tracker-admin-ui/\n```\n\nCreate a `.env` file \n```bash\nVITE_API_BASE_URL=your_backend_base_url\n```\n\nPort number for frontend can be updated in `vite.config.js`\n(Default port number is 3000)\n```bash\nexport default defineConfig({\n  plugins: [react()],\n  server: {\n    port: \"3000\"\n  }\n})\n```\n\nInstall dependencies \u0026 run front end\n```bash\nnpm install\nnpm run dev\n```\n\nOpen your browser and navigate to\\\n`http://localhost:3000/login` (Default) \n\n\n### 3. Backend Setup\n\nMake sure you have the latest .NET SDK installed.\\\nInstall the necessary NuGet packages:\n\n```bash\ndotnet restore\n```\n\nUpdate the following settings in  `appsettings.json`.\n- Database Connection\\\n(note: Database should already exist since this application serves as an admin dashboard for the ExpensesTracker App.\\\nIf database is not yet created, follow the ExpensesTracker app database setup instruction:\\\nhttps://github.com/glenvillethedev/asp-net-core-app#:~:text=3.%20Configure%20the%20Database)\n```json\n  \"ConnectionStrings\": {\n    \"DefaultConnection\": \"your_db_connection_string_here\"\n  }\n```\n- CORS Policy\n```json\n  \"AllowedOrigins\": [ \n    \"your_frontend_url\"\n  ],\n```\n- JWT Settings\n```json\n  \"JWT\": {\n    \"Issuer\": \"your_backend_url\",\n    \"Audience\": \"your_frontend_url\",\n    \"SecretKey\": \"your_secret_key\",\n    \"Expiration\": expiration_number_minutes, // minutes\n    \"RefreshTokenExpiration\": expiration_number_days // days\n  }\n```\n- Serilog Settings\n```json\n  \"Serilog\": {\n    ...\n  }\n```\n\nRun the Application\n\n```bash\ndotnet run\n```\n\nOpen your browser and navigate to\\\n`https://localhost:4000/swagger` (Default) \n\n---\n\n## 🌐 **Usage:**\n\n### 2. Login\n\n- Go to the \"Login\" page. (/login)\n- Enter registered email and password.\n- If success, user will be logged in.\n- User's without \"Admin\" role are not allowed to login.\n\n### 3. User Management\n\n[Create]\n- Click on the \"Add Entry\" button on the navigation.\n- Fill in the required details.\n- Click on the \"Add\" button.\n- If success, New User should be added on the table.\n\n[Retrieve]\n- List of users are displayed on the table.\n- Update/Delete existing users by clicking on the Action buttons.\n\n[Update]\n- Click on the \"Update\" button on the table.\n- Update the fields you want to change.\n- Click on the \"Update\" button.\n- If success, Updated User should be reflected on the table.\n\n[Delete]\n- Click on the \"Delete\" button on the table.\n- Click on the \"Delete\" button to delete the entry.\n- If success, Deleted Entry should be removed on the table.\n\n---\n\n## 📂 **Folder Structure:**\n\n```\n📁 net-react-app\n ├── 📁 backend/ExpensesTrackerAdmin → api\n     ├── 📁 ExpensesTrackerAdmin (WebAPI)\n         ├── 📁 Properties -\u003e contains launchSettings.json file\n         ├── 📁 Controllers → Controller Endpoints\n         ├── 📁 logs → Serilog file logs\n         ├── 📁 Middlewares → custom middlewares here\n         ├── 📝 appsettings.json → Configuration settings\n         ├── 🛠️ Program.cs → App Entry Point.\n     ├── 📁 ExpensesTrackerAdmin.Models (Models/DTOs)\n         ├── 📁 DTOs → Data Transfer Objects used in the App\n         ├── 📁 Enums → Enums used in the Application\n     ├── 📁 ExpensesTrackerAdmin.Repository (Repository Layer)\n         ├── 📁 Entities → Database Models, DBContext\n     ├── 📁 ExpensesTrackerAdmin.Services (Service Layer)\n         ├── 📁 Interfaces\n             ├── 📝 IService.cs -\u003e Service Interface\n         ├── 📝 Service.cs → Service Implementation\n ├── 📁 frontend/expenses-tracker-admin-ui → ui\n     ├── 📁 public → static files\n         ├── 📁 css → css styles\n         ├── 📁 img → static images/logo\n     ├── 📁 src → api endpoints\n         ├── 📁 components → react components\n         ├── 📁 context → global states\n         ├── 📁 custom → custom files (axios)\n         ├── 📁 pages → react pages\n         ├── 📝 App.jsx\n         ├── 📝 main.jsx\n```\n\n---\n\n## 📃 **Future Updates:**\n\n- 🎯 Search Functionality\n- 🎯 Pagination\n- 🎯 Admin Settings\n\n---\n\n## 📌 **Contact:**\n\n- 🌐 GitHub: https://github.com/glenvillethedev\n- 📧 Email: glenville.work@gmail.com\n- 🛠️ LinkedIn: https://www.linkedin.com/in/glenville-maturan\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglenvillethedev%2Fnet-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglenvillethedev%2Fnet-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglenvillethedev%2Fnet-react-app/lists"}