ruzla / PhoneBookApp

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Phone Book App

This app was create with the following tech stack:

  • React Front End
  • C# .NET 6 Core Web API
  • SQL Database using Entity Framework Core

Code editors used:

  • Visual Studio Code - UI
  • Visual Studio 2022 - API

The following instrucions will be for the editors used above.

Getting Started

First clone this repository.

You will now have two folders in the directory you cloned the project into named PhoneBookApp.API and PhoneBookApp.UI.

API

Open PhoneBookApp.API.sln found in the PhoneBookApp.API folder using visual studio 2022.

You will need to change the DefaultConnection under ConnectionStrings in the appsettings.json file to your local database server.

img1

Next you will need to run the migration to create the database. To do this you will need to open the package manager console. Open Tools > NuGet Package Manager > Package Manager Console. You should now see the following console at the bottom of visual studio:

img2

At the prompt (PM>) enter the following command

dotnet ef database update

When this has complete if you check your local database there should be a database called PhoneBookDB and a table called dbo.Contacts on this database.

You are now ready to run the API just click the start button in Visual Studio.

img3

This will open the swagger doc in your browser. feel free to test the api functionality here.

img4

You are now ready to setup the front end.

UI

Open the PhoneBookApp.API folder in visual studio code. In visual studio code open the terminal. Terminal > New Terminal

img5

This will open the terminal window at the foot of visual studio code and your current directory should already be PhoneBookApp.API. If not you will need to navigate to this folder. img6

From the command prompt run the following command

npm install

This will install the node packges required for the app. When this is complete you are ready to run the app with the following command

npm start

The Phone Book App should now open in your default browser. If it doesn't open automatically enter the following url into your browser to access:

http://localhost:3000

img7

You can now add some contacts to the phone app!

About


Languages

Language:JavaScript 52.1%Language:C# 31.5%Language:CSS 8.6%Language:HTML 7.8%