React GraphQL TypeScript Template

Overview

React GraphQL TypeScript Template

An enterprise react template application showcasing - Testing strategies, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading, and Continuous integration & deployment.


Expert teams of digital product strategists, developers, and designers.


React GraphQL TS Template CD

Getting Started

  • Install dependencies using yarn install

  • Start the dev server using yarn start

  • Go through the other scripts in package.json

TypeScript Configuration

Global state management using @redux/toolkit

Implementing a Redux middleware using redux-sagas

Network requests using apisauce

GraphQL requests using Apollo Boost

Styling using styled-components

Using antd as the component library

Localization using react-intl

Routing using react-router

Creating and showcasing components individually and in isolation using Storybooks

Bundling your application using Webpack

Analyzing the bundle size using webpack-bundle-analyzer

  • The size of the bundle is analyzed using the webpack-bundle-analyzer to make sure that the bundle is lean and optimized.

    Take a look at the following files

Implementing CI/CD pipelines using Github Actions

  • CI/CD using Github Actions. The CI pipeline has the following phases

    • Checkout
    • Install dependencies
    • Lint
    • Test
    • Build

    The CD pipeline has the following phases

    • Checkout
    • Install dependencies
    • Build
    • Deploy

    Take a look at the following files

Testing using @testing-library/react

Misc

Aliasing

  • @app -> app/
  • @containers -> app/containers/
  • @components -> app/components/
  • @services -> app/services/
  • @utils -> app/utils/
  • @themes -> app/themes
  • @images -> app/images

Take a look at the following files

Chunkify and Lazy loading

Take a look at the following files

App entry point

PWA

Take a look at the following files

Syntax for adding commit messages

Your commit messages have to be in this format:

type(category): description [flags]

Where type is one of the following:

  • build
  • docs
  • feat
  • fix
  • others
  • perf
  • refactor
  • style
  • test
  • chore
  • ci
  • temp Where flags is an optional comma-separated list of one or more of the following (must be surrounded in square brackets):
  • breaking: alters type to be a breaking change And category can be anything of your choice. If you use a type not found in the list (but it still follows the same format of the message), it'll be grouped under other.

Auto release

Comments
  • fix: move bucket name to env

    fix: move bucket name to env

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by rameez-wed 1
  • Feat/18

    Feat/18

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by poojesh-ws 1
  • Revert

    Revert "Merge pull request #33 from poojesh-ws/feat/18"

    This reverts commit 7de91b713a4aa679e61ef72c418220a384b71013, reversing changes made to 556caa1f0918c2ffd0b113c0cf57a482eb5a54a9.

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by alichherawalla 1
  • feat: bump to react-18

    feat: bump to react-18

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by alichherawalla 1
  • chore: clean up

    chore: clean up

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by alichherawalla 1
  • fix: fix warning for wrong import LaunchDetailsProps from .. to ../types

    fix: fix warning for wrong import LaunchDetailsProps from .. to ../types

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by alichherawalla 1
  • feat: git pull before push

    feat: git pull before push

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by alichherawalla 1
  • feat: move interfaces and types to types.ts

    feat: move interfaces and types to types.ts

    Ticket Link


    Related Links


    Description


    Steps to Reproduce / Test



    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by alichherawalla 1
  • style(fix): LaunchDetails Tablet View

    style(fix): LaunchDetails Tablet View

    Ticket Link


    • https://wednesday.atlassian.net/jira/software/projects/TRP/boards/41?selectedIssue=TRP-27

    Related Links


    Description


    • Fix tablet view

    Steps to Reproduce / Test



    Checklist

    • [x] PR description included
    • [x] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    Screenshot 2022-06-02 at 12 52 47

    opened by aseer-ws 1
  • fix: removed aplha release and added beta

    fix: removed aplha release and added beta

    Ticket Link


    Related Links


    Description


    • Added support for auto releases on the "qa" branch for beta releases. Removed the support for alpha releases.

    Steps to Reproduce / Test



    Checklist

    • [x] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by Anurag-Wednesday 1
  • feat: Mobile Sidebar Drawer

    feat: Mobile Sidebar Drawer

    Ticket Link


    • https://wednesday.atlassian.net/jira/software/projects/TRP/boards/41?selectedIssue=TRP-27

    Related Links


    Description


    • Menu Icon appears for mobile devices of width less than 400px
    • Clicking on menu icon open sidebar as drawer
    • Update CI and Jest Coverage Workflow to run for PRs against develop and qa branches

    Steps to Reproduce / Test



    Checklist

    • [x] PR description included
    • [x] yarn test passes
    • [x] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    Kapture 2022-04-07 at 16 21 48

    opened by aseer-ws 1
  • performance improvements - webpack, entrypoint

    performance improvements - webpack, entrypoint

    Description


    • Added support for CSS extraction and minification
    • SVG loading
    • Reduced entry point size by moving out Providers
    • Added NPM config variables in scripts

    Checklist

    • [ ] PR description included
    • [ ] yarn test passes
    • [ ] Tests are [changed or added]
    • [ ] Relevant documentation is changed or added (and PR referenced)

    GIF's


    opened by christin-wednesday 1
Releases(14.0.9)
  • 14.0.9(Aug 30, 2022)

  • 14.0.8(Jul 19, 2022)

    #35 Feat/18

    Bug Fixes
        • 83684e1 - merge conflicts
    New Features
        • a6f906d - update homecontainer test
        • 11f86ff - update homecontainer test
        • 8164292 - update app container test
        • 9099e0b - bump up react-helmet

    Source code(tar.gz)
    Source code(zip)
  • 14.0.7(Jul 18, 2022)

    #33 Feat/18 updated tests to rectify warnings

    New Features
        • cd6b29c - update homecontainer test to cover emptysearch function call
        • e73a693 - update app container test
        • e1c57ff - update homecontainer test
        • 780c459 - update homecontainer test
        • 669f8f8 - bump up react-helmet

    Source code(tar.gz)
    Source code(zip)
  • 14.0.6(Jul 14, 2022)

    #32 feat: bump to react-18

    New Features
        • 6bf2a3c - bump up styled-components
        • c21a1c3 - move to @testing-library/react
        • 16f0d23 - bump to react-18

    Source code(tar.gz)
    Source code(zip)
  • 14.0.5(Jun 8, 2022)

    #25 style(fix): LaunchDetails Tablet View

    Changes to build process or aux tools
        • 365fe4f - extrack screentype into custom hook
        • fe866c6 - replace useMobile with react-screentype-hook
        • 2445a77 - extract constant size variables to theme
    Others
        • de1e2db -
        • d8cd602 - wednesday-solutions/react-graphql-ts-template into fix/launch-details
        • 0f2260b -
        • 037ce10 - image overflow in launch-details
        • 95968a9 - launch-details tablet view

    Source code(tar.gz)
    Source code(zip)
  • 14.0.4(May 23, 2022)

  • 14.0.3(May 23, 2022)

    #29 fix: fix warning for wrong import LaunchDetailsProps from .. to ../types

    Bug Fixes
        • 3b3b023 - fix warning for wrong import LaunchDetailsProps from .. to ../types

    Source code(tar.gz)
    Source code(zip)
  • 14.0.2(May 13, 2022)

  • 14.0.0(May 10, 2022)

  • 7.0.0(May 10, 2022)

    #11 docs: Update readme

    Changes to build process or aux tools
        • 53d96ca - add jest.config.json as part of aliasing
        • 527c6c2 - update readme
    Bug Fixes
        • 40c526f - null check on env vars
    Documentation
        • 8f6c2f2 - add template image and update badge
        • 3f75e4c - update title and include tsconfig
        • a87564e - fix jest links in markdown
        • 63f9e65 - update js to ts and include apollo-boost
    Others
        • c7bdefe -

    Source code(tar.gz)
    Source code(zip)
  • 6.0.0(May 1, 2022)

    #23 feat: Mobile Sidebar Drawer

    Changes to build process or aux tools
        • 0262b21 - blacklist home and launch from persist
        • 3cfa7cd - set HEADER_HEIGHT
        • e0aa249 - move menu item into sidebar component
        • 5421ec7 - move sidebar to its component
    Bug Fixes
        • b27d932 - sort date select extend on tablet device
        • f556b84 - sidebar white color on desktop
        • 12e08d3 - menu icon keep moving along with scroll
    New Features
        • 45f342d - rocket click should close drawer
        • 33bc8f2 - wrap wednesday logo with home link
        • 41e0af9 - responsive drawer mobile screen
    Changed Style
        • 561e5d8 - reduce the size of wednesday logo
    Changes to CI config
        • 2184db1 - run CI for PR against qa and develop branches

    Source code(tar.gz)
    Source code(zip)
  • 5.0.0(Apr 11, 2022)

    #24 fix: removed aplha release and added beta

    Bug Fixes
        • b188cf1 - condition for release
        • 1b80d5c - removed aplha release and added beta

    Source code(tar.gz)
    Source code(zip)
  • 4.0.0(Apr 6, 2022)

    #20 fix: flickrImages undefined

    Bug Fixes
        • 5898070 - flickrImages for CustomImage
        • 92f0f2e - cannot read flickrImages for undefined
    Others
        • c881ea0 -
        • b0b62aa - wednesday-solutions/react-template-ts into feat/responsive

    Source code(tar.gz)
    Source code(zip)
  • 3.0.0(Apr 6, 2022)

    #15 style: Screen 2

    New Features
        • 8b50d31 - responsive screen1 and screen 2
    Changed Style
        • e7daaf4 - update launch label styles
    Others
        • 97fe71c -

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0(Apr 6, 2022)

  • 1.0.1-alpha(Apr 6, 2022)

    #17 alpha release commit linters

    Bug Fixes
        • 22259fc - updated the yml
        • b701239 - fixed incorrect branch name
        • 016ca44 - removed incorrect tags
    New Features
        • 7c51506 - added support for autmotated release

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Apr 6, 2022)

    What's Changed

    • React TypeScript Base Template by @aseer-ws in https://github.com/wednesday-solutions/react-template-ts/pull/1
    • CD pipeline: host TRP to S3 by @aseer-ws in https://github.com/wednesday-solutions/react-template-ts/pull/2
    • Feat/launches list by @Anurag-Wednesday in https://github.com/wednesday-solutions/react-template-ts/pull/3
    • Feat/search by @Anurag-Wednesday in https://github.com/wednesday-solutions/react-template-ts/pull/4
    • Sort & Paginate Launches by @aseer-ws in https://github.com/wednesday-solutions/react-template-ts/pull/5
    • replaced reduxSauce with rtk by @Anurag-Wednesday in https://github.com/wednesday-solutions/react-template-ts/pull/7
    • Screen 2 for Launch Details by @aseer-ws in https://github.com/wednesday-solutions/react-template-ts/pull/8
    • Feat/render details by @Anurag-Wednesday in https://github.com/wednesday-solutions/react-template-ts/pull/9
    • chore: Fix treeshaking and reduce bundle size by @aseer-ws in https://github.com/wednesday-solutions/react-template-ts/pull/10
    • chore: load google fonts with preload by @aseer-ws in https://github.com/wednesday-solutions/react-template-ts/pull/12
    • Responsive Design by @aseer-ws in https://github.com/wednesday-solutions/react-template-ts/pull/13

    New Contributors

    • @aseer-ws made their first contribution in https://github.com/wednesday-solutions/react-template-ts/pull/1
    • @Anurag-Wednesday made their first contribution in https://github.com/wednesday-solutions/react-template-ts/pull/3

    Full Changelog: https://github.com/wednesday-solutions/react-template-ts/commits/v1.0.0

    Source code(tar.gz)
    Source code(zip)
React Dashboard is an admin template dashboard based on React

React-Dashboard React Dashboard is an admin template dashboard based on React. Table of Contents Tech Stack Quick Start Run Locally Deployment File St

Skander Blaiti 7 Nov 15, 2022
Boss Lite - React Redux Material Admin Template

Boss Lite - React Redux Material Admin Template Boss Lite is admin dashboard template based on React and Redux. It provides you clean modern design an

Ilham Meidi 162 Nov 22, 2022
A lightweight, customizable personal blog template built with GatsbyJS and React

DevBlog DevBlog is a fully customizable blog template designed for developers (or anyone else) wanting to get into blogging. It comes ready to go and

Ryan Fitzgerald 398 Nov 24, 2022
A React.js Nice Resume Template

React Nice Resume ?? LIVE DEMO About particles-bg Library This project uses the react particle background component library https://github.com/lindelo

Nordic Giant 464 Nov 16, 2022
A React implementation of Davide Pacilio's free landing page template.

Holly A React implementation of Davide Pacilio's free landing page template. His design and layout has been rebuilt with React using create-react-app.

Luke McDonald 92 Nov 22, 2022
A starter template for Login, Register and Forgot Password using React

React Auth Template This is my starter template for Login, Register and Forgot Password using ReactJS with simple form validation. Installation Clone

Erin Rugas 7 Sep 7, 2022
MatX is a full-featured React Material UI Admin Dashboard template

Matx React Material Design Admin Dashboard Template MatX is a full-featured React Material UI Admin Dashboard template. MatX is built with React, Redu

UI Lib 778 Dec 5, 2022
🔥React Dashboard - isomorphic admin dashboard template

??React Dashboard - isomorphic admin dashboard template (React.js, Bootstrap, Node.js, GraphQL, React Router, Babel, Webpack, Browsersync) ??

Flatlogic 1.5k Dec 7, 2022
Template includes parcel, react, effector, tailwind and etc.

perpetum-template Template includes Parcel Effector React Patronum ESList Tailwindcss Patronum TypeScript JEST testing-library Getting started Prerequ

Valeriy Kobzar 4 Jan 25, 2022
Materio - Free MUI React NextJS Admin Template

Materio is the Most Powerful & Comprehensive free Next.js React admin template based on MUI !! ??

ThemeSelection 535 Dec 1, 2022
The most trendiest & innovative Open Source Admin Template for Chakra UI & React!

Horizon UI Get started and build your dream web app with Horizon UI, the most trendiest & innovative Open Source Admin Template for Chakra UI & React!

Horizon UI 1.3k Dec 5, 2022
A Beautiful And Nice theme React Gallery Template 🔥🎨🎉

Gallery Template Using React ✨ ?? I'm currently learning and working ReactJs and this is my first React project.as you know It's a Gallery Template wi

Arash 30 Dec 1, 2022
A clean, beautiful and responsive portfolio template for Developers

Gatsby Simplefolio ⚡️ A clean, beautiful and responsive portfolio template for Developers Features ⚡️ Modern UI Design + Reveal Animations ⚡️ One Page

Jacobo Martínez 1.6k Nov 26, 2022
Landing is a template built by Ant Motion's motion components.

Ant Design Landing Landing Pages of Ant Design System English | 简体中文 What is Landing? Landing is a template built by Ant Motion's motion components. I

Ant Design Team 5.1k Dec 2, 2022
A starter template to build lightning fast websites with Ghost & Gatsby

Gatsby Starter Ghost A starter template to build lightning fast websites with Ghost & Gatsby

Ghost 964 Nov 30, 2022
Free admin dashboard template based on Gatsby with @paljs/ui component package

gatsby-admin-template Admin dashboard template based on Gatsby with @paljs/ui component package Setup: git clone https://github.com/paljs/gatsby-admin

Pal.js 250 Nov 22, 2022
A starter template to build lightning fast websites with Ghost (as headless CMS in this case) & Gatsby

Gatsby Starter Ghost with Simply Theme A starter template to build lightning fast websites with Ghost (as headless CMS in this case) & Gatsby, using t

Anarion 11 Jul 28, 2022
ReactJS version of Director Responsive Admin Template Free

ReactJS version of Director Responsive Admin Template Free

Erwan DATIN 341 Nov 24, 2022
PlainAdmin - Free Bootstrap 5 Dashboard Template

PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all essential dashboard components, pages, UI elements, charts, graphs, application pages and more.

PlainAdmin 233 Nov 30, 2022