https://github.com/moheladwy/todofullstack
This is my Todo Fullstack Application made by ASP.NET Core 8 Web API for the backend and ReactJS for the frontend.
https://github.com/moheladwy/todofullstack
api-deployment asp-api asp-api-dockerfile asp-api-pipeline asp-net-api asp-net-application asp-net-core asp-net-core-api automation-pipeline deployment docker dockerfile jenkins-pipeline
Last synced: 13 days ago
JSON representation
This is my Todo Fullstack Application made by ASP.NET Core 8 Web API for the backend and ReactJS for the frontend.
- Host: GitHub
- URL: https://github.com/moheladwy/todofullstack
- Owner: moheladwy
- Created: 2024-09-18T04:06:41.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T02:36:04.000Z (7 months ago)
- Last Synced: 2024-10-24T19:05:11.071Z (7 months ago)
- Topics: api-deployment, asp-api, asp-api-dockerfile, asp-api-pipeline, asp-net-api, asp-net-application, asp-net-core, asp-net-core-api, automation-pipeline, deployment, docker, dockerfile, jenkins-pipeline
- Language: C#
- Homepage: https://todo.aladawy.duckdns.org/swagger/index.html
- Size: 119 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TodoFullstack
Todo Fullstack is a comprehensive task management application that showcases the integration between ASP.NET Core 8 Web API and React (Typescript). The application allows users to create, update, and delete task lists and tasks with priorities. It also supports user authentication and authorization with JWT tokens and refresh tokens.
## Motivation
As a software developer passionate about full-stack development, I created this project to strengthen my expertise in:
- Building production-grade REST APIs with ASP.NET Core 8.0
- Implementing secure authentication and authorization
- Developing modern frontend applications with React and TypeScript
- Working with databases, caching, and containerization
- Following industry best practices and design patterns
- Writing clean, maintainable, and testable code
This project serves as a practical demonstration of integrating multiple modern technologies while adhering to software engineering principles.
## Technologies
### Backend
- ASP.NET Core 8.0
- Entity Framework Core with SQLite
- Redis for caching
- JWT Authentication
- Swagger API documentation
- Docker containerization
### Frontend
- React 18
- TypeScript
- Vite
- Bootstrap 5
- Axios for API communication
## Features
- User authentication (register, login, logout)
- JWT token management with refresh tokens
- Task lists management (CRUD operations)
- Tasks management with priorities (CRUD operations)
- Responsive design
- Real-time task status updates
- Caching for improved performance
## Prerequisites
- Docker and Docker Compose
- Node.js 20+ (for local development)
- .NET 8.0 SDK (for local development)
## Installation
1. Clone the repository:
```sh
git clone https://github.com/moheladwy/TodoFullstack.git
cd TodoFullstack
```
2. Development (local) Setup:
For Backend:
```sh
cd server
dotnet restore
dotnet build
dotnet run --launch-profile https --project Todo.Api/Todo.Api.csproj
```
For Frontend:
```sh
cd client
npm install
npm run dev
```
3. Docker Setup (Production):
```sh
docker-compose -f docker-compose.yml up -d
```
## Environment Variables
### Backend (appsettings.json)
```json
{
"ConnectionStrings": {
"SqliteConnection": "Data Source=Database/todo.db",
"RedisConnection": "localhost:6379"
},
"JwtConfigurations": {
"SecretKey": "your-secret-key",
"Issuer": "Todo.Api",
"Audience": "http://localhost:5076",
"AccessTokenExpirationDays": 30,
"RefreshTokenExpirationDays": 90
}
}
```
### Frontend (.env)
```
VITE_SERVER_URL=http://localhost:8070/api
VITE_SERVER_LOGIN_PATH=Auth/login
VITE_SERVER_REGISTER_PATH=Auth/register
VITE_SERVER_REFRESH_PATH=Auth/refresh
VITE_SERVER_LOGOUT_PATH=Auth/logout
```
## API Documentation
When running, access the Swagger documentation at:
- Development: `http://localhost:5076/swagger`
- Production: `http://localhost:8070/swagger`
## Project Structure
```
├── client/ # React frontend
│ ├── src/
│ │ ├── API/ # API integration
│ │ ├── Authentication/ # Auth components
│ │ ├── Dashboard/ # Main app components
│ │ └── Navbar/ # Navigation components
│ └── ...
├── server/ # ASP.NET Core backend
│ ├── Todo.Api/ # API endpoints
│ ├── Todo.Core/ # Domain models
│ ├── Todo.Infrastructure/ # Data access & services
│ └── Todo.UnitTests/ # Unit tests
├── docker-compose.yml
└── README.md
```
## Development
1. API Development:
- Use Visual Studio or VS Code
- Run `dotnet watch` in the Todo.Api directory
- Access the API at `http://localhost:5076`
2. Frontend Development:
- Use VS Code
- Run `npm run dev` in the client directory
- Access the app at `http://localhost:5173`
## Deployment
Deploy the application:
```sh
docker-compose -f docker-compose.yml up --build -d
```
The application will be available at:
- Frontend: `http://localhost:80`
- Backend API: `http://localhost:8070`
## License
This project is licensed under the MIT License - see the [LICENSE](/LICENSE) for details.
## Author
Created by Mohamed Al-Adawy
- [Portfolio](https://al-adawy.netlify.app)
- [LinkedIn](https://www.linkedin.com/in/mohamed-al-adawy)
- [Email](mailto:[email protected])
## Contributing
1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request
## Support
For support, contact the author or open an issue on GitHub.