ReactRoastDotnet

A coffee shop website using React with Vite and React Router, and ASP.NET with Entity Framework and Authentication.

Live Demo

Note: Please allow application to finish loading. Long loading time is due to a cold start where the server and the database are being instantiated after being inactive for more than 10 minutes.

You can use the provided demo account if you do not want to create an account:
Email: demo@gmail.com
Password: P@ssw0rd

React Client Application

https://react-roast.azurewebsites.net

ASP.NET Swagger/OpenAPI Specification

https://react-roast.azurewebsites.net/swagger/index.html You can register an account or sign in with the demo account provided above and copy the token given to the swagger's authorize button.

Preview

Technology Stack

Backend Application

• C# and ASP.NET Web API
• Tested with Xunit
• Microsoft Azure Web App Deployment
• PostgreSQL
• SQLite for testing
• OpenApi/Swagger

Frontend Application

• React with TypeScript and Vite
• Tested with ViTest/Jest and React Testing Library
• React Router
• Tailwind CSS
• DaisyUI

To Do

• Toasts for server responses
• Save cart state for authenticated users in the database
• Save cart state in local storage or in a cookie
• Save authenticated user's token in cookies
• Account page menu for viewing order history or edit account
• Order history page
• View receipt on order confirmation
• User management like password and email change and also closing their account.

Description

A coffee shop website where people can order coffee drinks to-go. Users can order as a register user where they can view their previous orders. Guest users can also order to-go when they provide their email and name.

Tools

• C# and ASP.NET
• Typescript and React with Vite
• Entity Framework
• Identity Core
• PostgreSQL
• Azure Web App deployment
• OpenApi/Swagger
• React Router
• Tailwind
• Daisy UI
• Redux Zustand

Local Setup

Note: You must set up a local environment with Postgresql and change the following in file appsettings.Development.json and replace {} with your own postgresql settings:

Server=localhost;Port={};User Id={};Password={};Database=app

1. Clone this repository:

   git clone https://github.com/AmielCyber/ReactRoastDotnet
   

2. Go to the API repository

   cd ReactRoastDotnet/ReactRoastDotnet.API
   

3. Download and install NuGet dependencies:

   dotnet restore
   

4. Build the .NET application:

   dotnet build
   

5. Create SQLite database:

   dotnet ef database update --project ../ReactRoastDotnet.Data
   

6. Test the application with SwaggerUI:

   dotnet run
   

Database Schema