Fun-stack (Fullstack) TypeScript Application with PostgreSQL and GraphQL

My fullstack TS application with PostgreSQL database and GraphQL api.

👨🏻‍💻 Backend: Node.js + Express (typescript), Apollo Server, typeorm, graphql, session-cookie authentication, argon2 (hashing password), Redis (caching)…

👨🏻‍💻 Frontend: React.js (typescript), Next.js (for server side rendering), Chakra-UI (css style components), Apollo client, graphql, Formik, Slate.js (for rich-text-editor), …

✍️ Some features: WYSIWYG text editor, Full-text search with tsvector/tsquery in PostgreSQL, infinite scrolling pagination (with load button)

💡 Upcoming features: push notification, recommended system for posts/authors, direct message (with graphql subscription)

⏰ Timestamps:

  • 00:00 Landing page
  • 00:10 /blog page
  • 00:25 /post/id page
  • 00:38 Login page
  • 00:44 Register page
  • 01:35 Create post page (with rich text editor)
  • 04:08 Upvote/Downvote and comment features
  • 04:28 Publications (groups) page
  • 05:17 Dark mode
  • 05:48 User profile, following feature
  • 06:04 Create new publication (group)
  • 06:58 Logout feature
  • 07:20 Search posts feature (full-text search with PostgreSQL)

Thanks for watching! 🥰

#typescript #postgresql #graphql

What is GEEK

Buddha Community

Fun-stack (Fullstack) TypeScript Application with PostgreSQL and GraphQL

Fun-stack (Fullstack) TypeScript Application with PostgreSQL and GraphQL

My fullstack TS application with PostgreSQL database and GraphQL api.

👨🏻‍💻 Backend: Node.js + Express (typescript), Apollo Server, typeorm, graphql, session-cookie authentication, argon2 (hashing password), Redis (caching)…

👨🏻‍💻 Frontend: React.js (typescript), Next.js (for server side rendering), Chakra-UI (css style components), Apollo client, graphql, Formik, Slate.js (for rich-text-editor), …

✍️ Some features: WYSIWYG text editor, Full-text search with tsvector/tsquery in PostgreSQL, infinite scrolling pagination (with load button)

💡 Upcoming features: push notification, recommended system for posts/authors, direct message (with graphql subscription)

⏰ Timestamps:

  • 00:00 Landing page
  • 00:10 /blog page
  • 00:25 /post/id page
  • 00:38 Login page
  • 00:44 Register page
  • 01:35 Create post page (with rich text editor)
  • 04:08 Upvote/Downvote and comment features
  • 04:28 Publications (groups) page
  • 05:17 Dark mode
  • 05:48 User profile, following feature
  • 06:04 Create new publication (group)
  • 06:58 Logout feature
  • 07:20 Search posts feature (full-text search with PostgreSQL)

Thanks for watching! 🥰

#typescript #postgresql #graphql

Hertha  Mayer

Hertha Mayer

1595334123

Authentication In MEAN Stack - A Quick Guide

I consider myself an active StackOverflow user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers.

To create angular demo I usually use either plunker or stackblitz or even jsfiddle. I like all of them but when I run into some errors I want to have a little bit more usable tool to undestand what’s going on.

Many people who ask questions on stackoverflow don’t want to isolate the problem and prepare minimal reproduction so they usually post all code to their questions on SO. They also tend to be not accurate and make a lot of mistakes in template syntax. To not waste a lot of time investigating where the error comes from I tried to create a tool that will help me to quickly find what causes the problem.

Angular demo runner
Online angular editor for building demo.
ng-run.com
<>

Let me show what I mean…

Template parser errors#

There are template parser errors that can be easy catched by stackblitz

It gives me some information but I want the error to be highlighted

#mean stack #angular 6 passport authentication #authentication in mean stack #full stack authentication #mean stack example application #mean stack login and registration angular 8 #mean stack login and registration angular 9 #mean stack tutorial #mean stack tutorial 2019 #passport.js

Zachary Palmer

Zachary Palmer

1560930805

Fully functional WhatsApp Clone using Angular, GraphQL, Apollo, TypeScript and PostgreSQL

An open-source full-stack example app made with Angular 7.2, TypeScript, GraphQL Subscriptions, GraphQL Code Generator, GraphQL Modules, PostgreSQL and TypeORM.

You might have seen it around already — an open-source WhatsApp Clone tutorial; a project which was originally started in 2015 by Urigo based on Angular-Meteor and Ionic, and have been throughout different incarnations ever since.

You may have also noticed that we recently published a new React version of the Whatsapp Clone tutorial.

This time around, I’m happy to announce that a new version of the WhatsApp Clone is here, and it’s based on Angular 7.2, Angular CLI 7.3.2, Material-UI, TypeScript, Apollo, GraphQL-Subscriptions, GraphQL Code Generator, GraphQL Modules, PostgreSQL and TypeORM, full with step by step guides to teach you every step of the way.

Click me to go to the tutorial page

We’re back in business!

What is it good for?

This app was built with all the latest and hottest technologies out there. The purpose is simple — it should be a guideline for building a proper app, thus we thought very carefully about the design patterns and architecture used in it, plus, we made sure to cover all communication methods with a GraphQL-back-end in different variations (query, mutation, subscription). This way whenever you’re looking to start a new app, maintain an existing one or upgrade your dev-stack, the WhatsApp-clone can be a great source to start with! It’s full stack and has a complete flow.

Why did we choose this dev-stack?

Angular, GraphQL, Apollo, PostgreSQL and TypeScript for obvious reasons — they are backed by a strong ecosystem that grows rapidly. These technologies can be used in endless variations, and there’s no one way which is the most right of doing so, but we chose a way that makes the most sense for us and that we truly believe in when it comes to building apps. We’ve connected it all with TypeORM, GraphQL-Code-Generator, GraphQL-Modules for the following reasons:

  • The GraphQL back-end was implemented using GraphQL-Modules where logic was splitted into feature based modules. GraphQL-Modules is a library which provides you with the ability to manage and maintain your GraphQL schema in a scalable and reusable way. Not once nor twice I have seen people who struggle with that and get tangled upon their own creation, and with GraphQL-Modules where you have a very defined structure, this problem can be easily solved. You can read more in this series of 7 blog posts about it.
  • Every GraphQL/TypeScript definition was automatically generated with GraphQL-Code-Generator using a single command call. There’s no need to maintain the same thing twice if it already exists in one way or another. This way you don’t have to write TypeScript type definitions for your all your server responses, you get ready-to-use — fully typed Angular services, GraphQL resolvers and GraphQL types.
  • The new version of Angular 7.2 was used with the Angular Material UI and Angular CLI 7.3.2 (and we’ll keep updating the tutorial with the latest versions)
  • We used TypeORM to correctly split the logic of the entities in the database and define the relationships between them. ORMs are controversial these days, but they can help a lot in some cases and we thought a good example could be valuable to the community.

What to expect?

  • The GraphQL back-end was implemented using GraphQL-Modules where logic was splitted into feature based modules. GraphQL-Modules is a library which provides you with the ability to manage and maintain your GraphQL schema in a scalable and reusable way. Not once nor twice I have seen people who struggle with that and get tangled upon their own creation, and with GraphQL-Modules where you have a very defined structure, this problem can be easily solved. You can read more in this series of 7 blog posts about it.
  • Every GraphQL/TypeScript definition was automatically generated with GraphQL-Code-Generator using a single command call. There’s no need to maintain the same thing twice if it already exists in one way or another. This way you don’t have to write TypeScript type definitions for your all your server responses, you get ready-to-use — fully typed Angular services, GraphQL resolvers and GraphQL types.
  • The new version of Angular 7.2 was used with the Angular Material UI and Angular CLI 7.3.2 (and we’ll keep updating the tutorial with the latest versions)
  • We used TypeORM to correctly split the logic of the entities in the database and define the relationships between them. ORMs are controversial these days, but they can help a lot in some cases and we thought a good example could be valuable to the community.

The tutorial goes through every aspect of building the app, starting from the very basics. We will start building a very simple server with a fake db, then we will introduce Authentication, Subscriptions, a real database backed by PostgreSQL and TypeORM plus advanced tooling like GraphQL Code Generator and GraphQL Modules.

This can be extremely useful for those who have little to no background in one of the technologies in our dev-stack.

What’s next?

Right now we implemented a simple REST-based Passport authentication, but we already have PRs[1][2] for Accounts-JS based authentication which will use the GraphQL endpoint instead of traditional REST ones. An additional chapter about Pagination is also expected, as well as a “Performance” chapter tackling the N+1 problem with GraphQL. Our backend has been designed to handle way more features than the ones currently implemented, so be ready because features like the Whatsapp blue ticks are going to land on our clone very soon.

Keep up to date

This tutorial was written using Tortilla — the Tutorial framework.

This means that we will keep upgrading the tutorial with the latest versions of Angular and the other libraries, and instead of doing the same tutorial all over again, you will get a git-diff of how to upgrade the existing tutorial! We care about your time as a developer.

Influence

We want to hear your opinions!

Should we choose another library and technology over another? Could we write the code better/cleaner? Should we add a specific feature to the app? We want to hear it all!

Please tell us now so we could integrate your feedback on the tutorial itself!

We keep evolving the stack and as the tutorial is based on git commits, we can create the same clone with different tech-stacks and compare them on this real app using code diffs.

Soon we will also release yet another version of the Whatsapp Clone, using Ionic, Stencil and Web Components.

If you are good at creating screencast and videos, we would love your help in creating videos for some of the chapters.

Everything is completely free and open source, and we want your help and (not financial) contribution!

Best place would be to open an issue or create a PR on the repositories:

  • The GraphQL back-end was implemented using GraphQL-Modules where logic was splitted into feature based modules. GraphQL-Modules is a library which provides you with the ability to manage and maintain your GraphQL schema in a scalable and reusable way. Not once nor twice I have seen people who struggle with that and get tangled upon their own creation, and with GraphQL-Modules where you have a very defined structure, this problem can be easily solved. You can read more in this series of 7 blog posts about it.
  • Every GraphQL/TypeScript definition was automatically generated with GraphQL-Code-Generator using a single command call. There’s no need to maintain the same thing twice if it already exists in one way or another. This way you don’t have to write TypeScript type definitions for your all your server responses, you get ready-to-use — fully typed Angular services, GraphQL resolvers and GraphQL types.
  • The new version of Angular 7.2 was used with the Angular Material UI and Angular CLI 7.3.2 (and we’ll keep updating the tutorial with the latest versions)
  • We used TypeORM to correctly split the logic of the entities in the database and define the relationships between them. ORMs are controversial these days, but they can help a lot in some cases and we thought a good example could be valuable to the community.

Again, all types of feedback is welcome, write freely!

Thanks for reading ❤

#angular #graphql #apollo #typescript #postgresql

saloni shah

saloni shah

1607667485

Top6 Advantages of MEAN Stack for Web App Development

Last decade has seen introduction of lot of new software development framework and technologies. The purpose behind creating these frameworks is to serve the need of growing demand for web and mobile applications around the world.MEAN stack is one of these latest tools for web based software development.

What is Mean stack?
MEAN Stack development is basically a composition for MongoDB, Express js, angular.js and node.js. MEAN stack some time uses react.js and to form MERN stack.Let’s look at each component in more details.

Mongo DB: MongoDB is an open-source NoSQL database that will hold all of the application’s data. It allows developers to quickly change the structure of the data is persisted. Here it relies on an architecture that comprises of collection & documents and not table & rows.

Express JS: It is used to create web application easily. Also provides a slight simplification for creating a request to developer procedure. This way it gets easier to write modules, secure & fast applications.

Angular.Js: A Client-side framework, often referred to as simply Angular, it has, in fact, become a ‘default’ web front-end JavaScript formwork. Angular Js allows the client to seamlessly send and receive JSON documents.

Node.js: This java Script-based runtime is built on the version 8 engine by chrome. With a compilation of JavaScript source code to the machine code prior to execution, high-performing and scalable web applications are built by the developers.Experss is used to create a Restful API server. To connect mango dB and app server, the node.js driver is been used.
Benefits of MEAN Stack Development
Server and Client switch was never this easy
JavaScript is very popular and powerfuland it allows you to switch seamlessly between client-side and server-side. There will be no need for a third-party standalone server like Apache for deploying the app. The Node.js technology allows the developer to open the application on the server.

Multipurpose and Flexible
MEAN stack is truly wonderful and offers greater flexibility with development to developers. The framework allows for easy testing of the app on the cloud platform upon completing the development process. The development, testing and introduction into the cloud processes are done seamlessly. Any additional information can also be incorporated into the app by simply adding an extra filed on to the form. The technology responsible for this feature is MongoDB which, because it is specifically tailored for the cloud, offers automatic replication and full cluster support.

Build MVP quickly
MVP stands for a minimum viable product. It comprises to the app developed with the most basic and essential features. This set of features are the bare minimum of what users are searching for in a product. Being able to develop an MVP in the shortest time possible is critical for cutting costs as well as testing the product in the market. The MEAN stack makes it possible to create an MVP quickly because the framework offers fast development.

MEAN / MERN allows Isomorphic coding possible
There are two major OS platforms on which mobile operators, namely: iOS and Android. Anyone interested in creating an app for both platforms needs to do a separate project for each. But with the MEAN / MERN stack, this is not necessary. Apps developed using MEAN /MERN are isomorphic, meaning that they can work on multiple platforms without having to change the base code. Thus, the developer’s work is cut in half and more time is spent on enhancing the app already created. Businesses aiming to reach a wider market segment will therefore benefit from using the stack.

Ease in Development with Single Programming Language
MEAN the technologies based on JavaScript. The working environment for developers is thus enhanced, ensuring that they come up with products that will draw the attention of the users by everything that happens in one language. Single programming language also means that the backend response unit will be in a position to handle client requests quickly and efficiently as the program grows with time.

Responsive and Time-saving
If you need to develop an application with limited timelines, use MEAN stack to achieve that. It has infinite module libraries for node Js, which are ready for use. As a result this aspect saves your time and initially used to create modules from scratch. It also has an automated testing feature that instantly notifies you when a particular feature is broken. It gives you more time to polish your project to perfection.
Some of the benefits outlined above are just a little of what the company stands to gain in incorporating the MEAN stack in their app development projects. Enhanced app quality, reduced costs, and time for app development and also which to save time and money, or are just interested in managing a business.

DasinfomdiaPvt.Ltd. offer MEAN stack development services to produce adaptable, versatile web and mobile applications, which utilize JavaScript, on both client and server-side. We provide customer-centric Hire MEAN Stack Development Services.Our MEAN stack export is exceptional when it comes to MEAN stack technology and possess years of experience.

#full-stack application development #full-stack web application, #full-stack web application development #web-development #hire dedicated mean stack developers, #hire frontend developers,

Dock  Koelpin

Dock Koelpin

1595816040

How to create your first full-stack Typescript GraphQL Application?

Hello everyone,

It’s nice to come back to writing. I was really busy in the last months and I could not dedicate some time to write new posts. But knock it off, let’s go to what matters.

1. Introduction

In this tutorial, I’ll show you how to create an application from scratch. For this, I will use TypescriptGraphqlNodeJsReactJS, and MongoDB. Besides, two frameworks that will make our life easier: Express and ApolloGraphql. We’re going to create it in three environments: Development, Test, and Production and we’re going to release it on Heroku.

Hey Hey Sam, This is really nice but what kind of project are we going to do? 🤔

Good question young padawan. For this project, we’re going to create an awesome game. A game called Animal Tribes.

Image for post

1.1. About the game

This game is really simple, we’ll have a Player 1 and a Player 2, where we’ll call them Warrior and Opponent. Each player has six attributes: Strength, Dexterity, Faith, Wisdom, Magic, and Agility.

Image for post

Warrior’s attributes

When a Warrior challenges an Opponent we compare the warrior’s strength with the opponent’s strength, the warrior’s dexterity with the opponent’s dexterity, the warrior’s faith with the opponent’s faith and so go on. If the comparison is favorable to the warrior, that is, if it’s higher, it marks 1 point to the fight. If the comparison isn’t favorable to the warrior, that is, if it’s less than the opponent, it doesn’t mark point to the fight. And finally, if there is a draw, that is when the comparison is equal, it marks one point to the warrior because he was courageous to challenge the opponent. If the number of points is greater or equal than 3, the warrior wins the fight, if not it loses.

Let’s see an example in the table below:
Image for post

The warrior won 5 categories, which means the warrior won against the opponent.

Image for post

Battle

In the figure above, we can see a battle. The warrior won the fight.

Then the warrior gets more experience and we add more points in its attributes. For each attribute, we add, randomly, a number between 0 and 9… OK, I didn’t think too much in the punctuation strategy but the main goal here is to teach the development. 😅

For signup, the user needs to fill the full name, the warrior name, and the password.

Image for post

#graphql #javascript #software-engineering #software-development #typescript