We will create a no-sql database using mongo db atlas.

Image for post
Image for post

Create a account.

Go to mongdb atlas website

Click on Start Free button.

Setup your mongodb atlas account by signing up without a gmail account or with a gmail account.

We will build a simple webpack project that can be full customized to your choosing, but for this case it is for a react project.

Image for post
Image for post

What is Webpack?

Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner. React, and Hot Module Replacement (HMR) helped to popularize webpack and led to its usage in other environments, such as Ruby on Rails. Despite its name, webpack is not limited to the web alone. It can bundle with other targets as well, as discussed in the Build Targets chapter.

We will retrieve data via the star…

We will have our queries only hit get endpoints, and have the ability to delete and update players for our React Native, and React app.

Image for post
Image for post

We will update our graphql server to get a specific player, update a specific player, and delete a specific player based on that player’s id. We will then connect to our apollo-client, and have all of our queries hit get endpoints to make it more developer friendly. .

If you did not do the previous parts of this tutorial I would recommend you to do those parts before doing this tutorial.

Now let’s start building…

We will now get started on the frontend for our C# .Net Core application.

Image for post
Image for post

Here is the first part of the tutorial for reference or if you haven’t started this part yet which I would recommend.

We will initialize our webpack project using webpack cli. We will first delete everything in the wwwroot folder, then do a npm init which will create a package.json.

cd source/repos/Games/Games.Web/wwwroot
npm init -y

Then we will install these devDependencies first. That will configure our frontend project.

npm i -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader html-webpack-plugin prop-types

— Webpack Dependencies


In the second part of this guide, we will connect the backend with the client. Using apollo-client-preset.

Image for post
Image for post

We will connect our React Native and React app to an ApolloClient which will essentially connect the GraphQL server with React, using the url of the server. But before that, if have done the first part of the guide, I would suggest going through that tutorial before going over this one.

Now we will start with the React Native app, and run the app on the ios and android simulator. We will run the ios simulator when retrieving queries, and the android simulator…

We will build a basic fullstack web app that will implement webpack, c# and mysql. It would be something you can build off of, to build fullstack app with react and c#.

Image for post
Image for post

So we will create an app which will hold our favorite games, which would be retrieved from a database. We will make a crud app, which will create, read, update, and delete data from our mysql database.

Step One: The setup.

We will first install mysql workbench which will hold our database.

But we will only create our database using the code-first way. Which means we will create our domain models. Which…

A brief overview of OOP .

Image for post
Image for post

What is OOP?

OOP is Object Orientated Programming, which is based on creating a application based on splitting or restricting responsibilities using classes, interfaces, etc. There are multiple concepts such as abstraction, decomposition, generalization, encapsulation, and composition. The purpose of OOP is to make your applications extendable, maintainable, and reusable(if you were to change frameworks).

What are the concepts of OOP and why do we use them?

Abstraction — Abstraction is making classes has little surprises. Or making them as intuitive as possible.

Decomposition — Decomposition is breaking functionality of your application, and parts of your application to smaller parts.

Generalization-Is to generalize parts of your application, there creating…

We will explain the reasons for access modifiers in c#.

Image for post
Image for post

What are Access Modifiers?

There are levels of access you can specify for specific constructs. The only ones that you can’t be have a access modifier is based on their accessibility domain. How you would know their accessibility level would be based on the member accessibility level, and containing type accessibility level. Never can the nested type have more access than the type itself.

The only constructs that can’t have a access modifier, and have to go by their default access modifier. Are interfaces, namespaces, and enums. While structs can only have public, internal

We are fetching data from pokeapi to illustrate how we would perform asynchronous operations in c#.

Image for post
Image for post

But before anything we will setup our environment using visual studio here is a quick guide.

Great we will now create our solution, which will have a name of PokeApp, and a project which will be a Console app named PokeApi.

We will explain GraphQL, and build a basic GraphQL server for this part of the guide.

Image for post
Image for post

So what is GraphQL?

GraphQL is a query language, where you would define schemas or the structure of your data such as object types, resolvers which will execute each field in the schema, and connectors which are for defining or retrieving your database instance for your resolvers, which will return the data indicated by the schema. It enables a versionless server, which means that the API will update itself. It also enables pagination and other cool features.

GraphQL vs REST?

GraphQL server can be accessed from one endpoint, which will send…

Ali Alhaddad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store