• This repository has been archived on 09/Feb/2022
  • Stars
    star
    124
  • Rank 288,207 (Top 6 %)
  • Language
    TypeScript
  • Created over 7 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JavaScript meets web. React in tandem with Apollo. Minimal implementation that will help you get started with GraphQL.

Actions Status Test Coverage Maintainability Dependabot Mergify Status

React Apollo GraphQL [from scratch]

Today you have basically two ways how to start new React application: NextJs or Create React App.

However, there is no fun in using other peoples frameworks so I created this application from scratch. If you ever wondered how to set up your own boilerplate. This is a good place to start.

Deploy

Demo

You can try the application here (it might take a while before the free server wakes up)

📘 Backend API is running here. You can find the source code of the backend application here.

Development

System Dependencies:

  1. brew install node
  2. brew install yarn

Run development server:

  1. yarn install
  2. yarn apollo:generate-types:watch
  3. yarn watch

Useful Commands

  • yarn lint:ts lint TS files
  • yarn lint:css lint CSS
  • yarn lint:circular-dependencies detect circular dependencies
  • yarn apollo:generate-types generate TS definitions from GraphQL schema
  • yarn apollo:remove-all-types remove all automatically generated TS definitions
  • yarn test run jest
  • docker-compose up run the application in Docker 🐳 container

TODO

  • Optimize antd package with babel-plugin-import
  • Create custom vendors config with DllPlugin
  • Implement request password reset + request password change
  • Implement automatic token refresh

Production

Keep in mind that main and vendors packages are huge. I plan to implement babel-plugin-import and DllPlugin in the future.

  1. SERVER_URL=https://node-type-orm-graphql.herokuapp.com/graphql yarn build
  2. yarn prod

More Repositories

1

redux-react-native-wix-navigation-v2-with-auth

JavaScript meets mobile. Use your favourite JavaScript library to develop Android and IOS applications. This setup includes react-native-navigation for smooth screen transitions.
TypeScript
53
star
2

create-opinionated-app

The all app generator you have been looking for.
Handlebars
17
star
3

workbox-webpack-react

Offline first application. Minimal workbox, webpack and react implementation.
JavaScript
17
star
4

react-electron-typescript-webpack

JavaScript meets desktop. Electron ⚡️ with your favourite frontend libraries: React, StyledComponents, Webpack and Typescript. Build process for common operating systems included.
JavaScript
13
star
5

localized-graphql-koa-typescript

JavaScript meets server. Objection and GraphQL with support for 🌍 multiple languages. 🐳 and 100 % test coverage included.
TypeScript
12
star
6

node-type-orm-graphql

Typescript meets ORM and GraphQL.
TypeScript
11
star
7

linters

Collection of super strict configurations for ESLint / StyleLint and other code quality tools.
JavaScript
10
star
8

yolo-cmake-opencv-onnx-cpp

Use YOLO with your favorite language and computer vision library. This example includes ONNX runtime for better weights support.
C++
6
star
9

compgen

Collection of composable generators as an alternative to Yeoman and other libraries that help you to kickstart new projects, prescribe best practices and configure tools to help you stay productive.
TypeScript
6
star
10

neural-network-playground

Collection of simple neural network examples.
JavaScript
3
star
11

aoc-2023-day3-ecs-visual

C++
3
star
12

electron-swords-and-souls-color-bot

Swords And Souls javascript colour bot. 🤖 Built with electron, opencv4nodejs and robotjs.
CSS
3
star
13

macos-keyboard-mouse

Native Keyboard and Mouse controls for your Node application.
C++
2
star
14

simple-color-batch-cropper

Automatically crops positive/negative samples for your haar cascades. Example uses images from Swords and Souls web game. You can also use this library to mark your images.
JavaScript
1
star
15

robot-cpp

Mouse, keyboard and display automation.
C++
1
star
16

cmake-sdl2-imgui

Your new minimalistic ImGui SDL2 starter.
C++
1
star
17

nest-microservices-example

Minimal Nest.js microservices example. Sample CRUD application with Stripe payments.
TypeScript
1
star
18

ui-react-library

Javascript meets UI. 📚 Working on side projects is fun but creating different components for every application can be frustrating. This library is going to help.
TypeScript
1
star