Nicolae-Peptea/CodeCoolShop

Gadgets web store, project developed with . ASP .NET Core 5 MVC + React.Js for .NET + JavaScript + Html5 + CSS3 + Bootstrap + Microsoft SQL Features: *Register *Login *Pay by credit card using Stripe *User Dashboard *Email confirmation for user registration and orders *Event logging

Online Shop

Table of Contents

1. About The Project
   • Main Features
   • Integrated Services
   • Built With
   • Visuals
2. Getting Started
   • Installation
3. Usage
4. Development Team
5. Acknowledgments

About The Project

Codecool shop is an online shop you can use to buy gadgets like phones and tablets

(back to top)

Main Features

• Sort Products by Category and Supplier
• Register (the account is enabled after email confirmation)
• Login using Identity Package with cookies
• Logout
• Add to Cart
• Cart Preview
• Edit cart items quantity from the Cart Preview (Increase, Decrease, Remove)
• Place an order with or without an account
• Pay by credit card using Stripe
• User Dashboard - Placed orders details
• Email confirmation for both user registration and orders
• Event logging

(back to top)

Built With

• MVC design pattern
• Uses React.Js for the Order History page

Back End:

• ASP .NET Core
• C#
• Entity Framework Core
• AutoMapper

Security:

• Identity

Front End:

• HTML
• CSS
• JavaScript
• React.js
• Bootstrap
• JQuery

Database Management:

• Microsoft SQL Server
• Microsoft SQL Server Management Studio

IDE:

• Microsoft Visual Studio

(back to top)

Integrated Services

Email:

• Sendgrid

Payment processing:

• Stripe

Event logging:

• Serilog

(back to top)

Visuals

Empty Cart:

Register Page:

Login Page:

Home Page while logged in

Used Dashboard - Orders:

Filled Cart Preview from the Home Page:

Cart state before Checkout:

Delivery details form:

Successful Order Placement Notification Page:

User Dashboard - Order Details:

(back to top)

Getting Started

Installation

• Create a MSSQL database

• Go to appsettings.json -> Fill in the ConnectionStrings section with the database Connection String

      "ConnectionStrings": {
        "CodeCoolShop": "<your-database-connection-string-comes-here>",
      }

• Create a Stripe account here

• Go to appsettings.json ->Fill in the Stripe - SecretKey and Publishable Key how to locate them in your Stripe account

    "Stripe": {
      "SecretKey": "<your-stripe-secret-key-comes-here>",
       "PublishableKey": "<your-stripe-publishable-key-comes-here>"
    },

• Create a SendGrid account here

• Go to appsettings.json -> Fill in the ApiKey related to your Sendgrid account. Take a look on how to create it in your account here

     "Sendgrid": {
       "ApiKey": "<your-sendgrid-api-key-comes-here>"
     }

• Create you sender profile on SendGrid and update the field from appsettings.json

     "Sendgrid": {
       "SenderEmail": "<your-sender-email-comes-here>"
     }

• Create dynamic template for Order Confirmation => use this html template here

• Create dynamic template for Register Confirmation => use this html template here

• Update the templates ids

     "Sendgrid": {
           "OrderConfirmationTemplateId": "<email-template-id>",
   	    "AccountConfirmationTemplateId": "<email-template-id>"
     }

(back to top)

Usage

Run the project with Kestrel Server.

(back to top)

Development Team

• Mihai Buga's GitHub
• Nicolae Peptea's GitHub

(back to top)

Acknowledgments

Thanks for all the support to the Codecool mentors that have guided us!

React.Js for ASP .NET MVC

(back to top)