👞 An open source e-commerce web application build with Angular 11 and ASP .NET Core (using .NET 5) RESTful Web API. The applicaiton is build with desktop first aproach, but it's fully responsive (with the help of bootstrap 4 grid system, Angular Material UI and CSS Flexbox and Grid).
📂 The architecture is a simple "all-in-one" monolith application (entire application is deployed as a single unit). That means as the project's size and complexity grows, the number of files and folders will continue to grow as well. The "all-in-one" pattern is used just because I am developing the project to practice my skills and for fun.
📝 The application contains few products manually seeded in the database(I will build admin panel soon), which users can select, pick a size and add to a cart. Then the user can review the products in the cart and increase/decrease product quiantity or delete the product from cart. Then next step is to select delivery address(or import the data from your account's address) and choose payment. The Payment type is cash on delivery or with a credit/debit card (using the Stripe API). After order is made, the user can see all(current/past or delivered) orders, send an sample invoice email and view order details.
🎁 The application is made mostly for fun and it's usage is not commercial, feel free to copy, download or clone the repo or get some sample code.
- Download/Clone the repository
- Open the API folder and create appsettings.development.json and appsettings.production.json(optional) (present in .gitignore file so you have to create them manually) Example below (replace <<>> with your value):
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"ConnectionStrings": {
"DefaultConnection": "<<DATABASE CONNECTION STRING>>"
},
"AllowedHosts": "*",
"AllowedOrigins": {
"StripeUrl": "https://checkout.stripe.com/",
"ServerUrl": "https://localhost:44365",
"ClientUrl": "http://localhost:4200"
},
"ApplicationSettings": {
"ApiUrl": "https://api.testfootwearapp3.azurewebsites.net",
"ClientUrl": "https://testfootwearapp3.azurewebsites.net",
/* Change the api and client url to localhost:<<your port>> */
"EncryptionKey": "MbQeShVmYq3t6w9z$C&F)J@NcRfUjWnZ,
/* Or generate one here(select 256-bit key): https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx */
"JWT_Secret": "<<YOUR JWT SECRET KEY HERE>>",
/* You can get your unique key here: https://jwt.io/introduction */
"Stripe_Secret": "<<YOUR STRIPE SECRET KEY HERE>>"
/* You can get your unique key here: https://stripe.com/docs/keys */
},
"MailSettings": {
/* I am using ethereal fake SMTP, you can generate your own fake account here: https://ethereal.email/create */
"Mail": "[email protected]",
"DisplayName": "Assunta Kohler",
"Password": "TuYAVeQbKGZmqEbsMM",
"Host": "smtp.ethereal.email",
"Port": 587
}
}
-
Type command 'dotnet restore' to install all missing packages or do it manually
-
For demo payments use this demo card info provided from Stripe API:
Email: Any*
Card Number: 4242 4242 4242 4242
Expiration: Any* / Any*
CVV: Any*
Name: Any*
*You can put random information but the card number should be the one from above
- Run with IIS Express or host the application
- AutoMapper 8.1.1
- JwtBearer 5.0.13
- EntityFrameworkCore 5.0.0
- Stripe.net 39.77.0
- NETCore.MailKit 2.0.3
- Moq 4.16.1
- XUnit 2.4.3
- Bootstrap 4.5.3
- Ngx-toastr 11.3.3
- Rxjs 6.6.0
- Fontawesome Icons 5.15
- Angular Animations 11.0.1
- Ngx Pagination 5.0.0
- Angular Material 11.0.1
- Karma 5.1.1
- Jasmine 3.6.0
| Feature | Coded? | Description |
|---|---|---|
| Register a new user | ✔ | Register a new user using JWT Authorization token functionality |
| Log in | ✔ | Log in functionality |
| Change password | ✔ | Change password functionality |
| Change email/username | ✔ | Change email/username functionality |
| Add User Information | ✔ | Add default user billing information |
| Import User Information | ✔ | Import user information functionality when finalizing order |
| Check/Modify User Information | ✔ | Check or modify user information, invoice address, first, last name etc. |
| Remember me option | ✔ | Remember user details |
| Facebook/Google login | ❌ | Log in with social network API |
| Add user token id interceptor | ✔ | Validate if user token data is valid |
| Implement lazy loading | ✔ | Lazy-load the user module |
| Feature | Coded? | Description |
|---|---|---|
| View Products | ✔ | View all products functionality |
| Sort Products | ✔ | Sort all products by ascending, descending etc. functionality |
| Filter Products | ✔ | Filter all products by gender (man, woman, kids) functionality |
| Change Pages | ✔ | Pagination functionality |
| View Product | ✔ | View a single product functionality |
| Select Product Size | ✔ | Select product size functionality |
| Add Product To Cart | ✔ | Add the selected product to cart stored in the database |
| Search For Product by Name | ❌ | Search for specific product |
| Check Available Products | ❌ | Check if product size is available in the database |
| Implement lazy loading | ✔ | Lazy-load the product module |
| Feature | Coded? | Description |
|---|---|---|
| View All Cart Products | ✔ | View all cart products for the user |
| Increment Cart Product | ✔ | Increment Cart Product |
| Decrement Cart Product Quantity | ✔ | Decrement cart product quantity |
| Add New Cart Product When Size Is Diffrent | ✔ | Create new instance of cart product, only when the size is diffrent, otherwise increase quantity |
| Remove Cart Product | ✔ | Remove cart product |
| View Cart Product | ✔ | View Cart Product directly from the cart page |
| Checkout | ✔ | Checkout functionality |
| Implement lazy loading | ✔ | Lazy-load the cart module |
| Feature | Coded? | Description |
|---|---|---|
| Create cash order | ✔ | Create pay on delivery order |
| Create paid order | ✔ | Pay for order with a credit card |
| View Orders | ✔ | View all orders |
| Send email for order | ✔ | Functionality to send email for order details, currently using fake SMTP |
| Orders pagination condition | ✔ | Shows pagination only when orders are more than a specific number (currently 10 per page) |
| Reconfirm order | ✔ | Reconfirm orders before ordering with a stepper |
| View current and delivered orders | ✔ | View current and delivered orders by changing sections Current/Past Orders |
| View selected order component details | ✔ | View the selected order full details and implement close details toggler button |
| View ordered products for order | ✔ | View selected order ordered list of products with accordion functionality |
| Implement Lazy loading | ✔ | Lazy-load the orders module |
| Feature | Coded? | Description |
|---|---|---|
| Test ASP .NET Controller logic | ✔ | Test the api controllers logic |
| Test ASP .NET Models | ❌ | Test the validation in models |
| Test ASP .NET Services | ❌ | Test the methods in the services |
| Test ASP .NET StartUp class | ❌ | Test the application composition root |
| Test Angular components | ❌ | Test all components logic |
| Test Angular services | ✔ | Test all http and application services |
| Test Angular pipes | ✔ | Test all Angular pipes |