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

The Definitive Guide to TypeScript & Possibly The Best TypeScript Book

TypeScript Deep Dive

I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to β˜… on GitHub 🌹

Reviews

  • Thanks for the wonderful book. Learned a lot from it. (link)
  • Its probably the Best TypeScript book out there. Good Job (link)
  • Love how precise and clear the examples and explanations are! (link)
  • For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
  • Just a big thank you! Best TypeScript 2 detailed explanation! (link)
  • This gitbook got my project going pronto. Fluent easy read 5 stars. (link)
  • I recommend the online #typescript book by @basarat you'll love it.(link)
  • I've always found this by @basarat really helpful. (link)
  • We must highlight TypeScript Deep Dive, an open source book.(link)
  • Great online resource for learning. (link)
  • Thank you for putting this book together, and for all your hard work within the TypeScript community. (link)
  • TypeScript Deep Dive is one of the best technical texts I've read in a while. (link)
  • Thanks @basarat for the TypeScript Deep Dive Book. Help me a lot with my first TypeScript project. (link)
  • Thanks to @basarat for this great #typescript learning resource. (link)
  • Guyz excellent book on Typescript(@typescriptlang) by @basarat (link)
  • Leaning on the legendary @basarat's "TypeScript Deep Dive" book heavily at the moment (link)
  • numTimesPointedPeopleToBasaratsTypeScriptBook++; (link)
  • A book not only for typescript, a good one for deeper JavaScript knowledge as well. link
  • In my new job, we're using @typescriptlang, which I am new to. This is insanely helpful huge thanks, @basarat! link
  • Thank you for writing TypeScript Deep Dive. I have learned so much. link
  • Loving @basarat's @typescriptlang online book basarat.gitbooks.io/typescript/# loaded with great recipes! link
  • Microsoft doc is great already, but if want to "dig deeper" into TypeScript I find this book of great value link
  • Thanks, this is a great book πŸ€“πŸ€“ link
  • Deep dive to typescript is awesome in so many levels. i find it very insightful. Thanks link
  • @basarat's intro to @typescriptlang is still one of the best going (if not THE best) link
  •  
  • This is sweet! So many #typescript goodies! link

Get Started

If you are here to read the book online get started.

Translations

Book is completely free so you can copy paste whatever you want without requiring permission. If you have a translation you want me to link here. Send a PR.

Other Options

You can also download one of the Epub, Mobi, or PDF formats from the actions tab by clicking on the latest build run. You will find the files in the artifacts section.

Special Thanks

All the amazing contributors 🌹

Share

Share URL: https://basarat.gitbook.io/typescript/

Author: Basarat
Source Code: https://github.com/basarat/typescript-book/ 
License: View license

#typescript #opensource 

Wasswa  Meagan

Wasswa Meagan

1652464800

A Node Kit with TypeScript, GraphQL, Sequelize, PostgreSQL

graphql-kit 

🍣 A Node kit with TypeScript, GraphQL, Sequelize, PostgreSQL and awesome tools.

Preparation

How to use?

Update config.ts file (src/components/config.ts)

const config = {
  nodeEnv: process.env.NODE_ENV || 'development',
  port: process.env.PORT || 9000,
  pgHost: process.env.PG_HOST || '127.0.0.1',
  pgPort: (process.env.PG_PORT as number | undefined) || 5432,
  pgDB: process.env.PG_DB || 'postgres',
  pgUser: process.env.PG_USER || 'postgres',
  pgPassword: process.env.PG_PASSWORD || 'postgres',
};

export default config;

Start application

yarn
yarn start:dev

Use with Docker + Docker Compose

yarn docker-compose:start
yarn docker-compose:stop
yarn docker-compose:rebuild

Build GraphQL type

yarn build:graphql

πŸ™Œ Awesome


Author: harrytran103
Source Code: https://github.com/harrytran103/graphql-kit
License: MIT license

#postgresql #typescript #graphql 

Juanita  Apio

Juanita Apio

1636390800

How To Create A GraphQL API for Beginners

In this article, you will create the GraphQL API and interact with it on the frontend.

#graphql #api #typescript #postgresql #nextjs #prisma #graphql