Skip to content

Latest commit

 

History

History

cra-rxjs-styled-components

README.md

CRA-RxJS-SC App

This is a demo application that re-implements some of GitHub's pages and functionality.

Table of Contents

Overview

Featured Tech Stack

  • React
  • RxJS
  • TypeScript

Included Tooling

  • Prettier
  • React Testing Library
  • Jest
  • ESLint
  • Styled Components

Architectural Decisions

  • Project uses snake-case file naming convention over traditional PascalCase
  • Components should be contained in their own components directory or module folder and exported via the index file
  • The following directories should be restricted to the following types of components:
    • routes: Only contains top-level page components
    • hooks: Only reusable global hooks

Getting Started

Cloning the Repository

Clone the starter.dev-showcases repository from https://github.com/thisdot/starter.dev-github-showcases

git clone https://github.com/thisdot/starter.dev-github-showcases.git

Env Setup

This project comes with a .env.example file.

REACT_APP_API_URL=https://api.starter.dev/api
REACT_APP_BASE_URL=http://localhost:3000

While in the project directory, run this command in your terminal.

cp .env.example .env

The project connects to a backend which is shared by all the starter showcases to get authentication tokens.

OAuth Setup

To use this app and authenticate with GitHub, we need to setup the OAuth credentials in GitHub.

  • Navigation to the GitHub settings page.
  • Click the Developer settings link in the left sidebar.
  • Click the OAuth Apps link in the sidebar.
  • Click the New OAuth App button at the top right of the page.

Register a new OAuth application form details

  • Application name - Enter a name for the application
  • Homepage URL - Enter the url of the RxJS application. (If running locally http://localhost:3000 otherwise the url of the application on the internet)
  • Authorization callback URL - Enter the url of the applications OAuth callback. _(If running locally http://localhost:3000/redirect)

Installation

Open the project root directory in your terminal and navigate to the cra-rxjs-styled-components folder.

cd cra-rxjs-styled-components

Run yarn to install the dependencies.

yarn

Development

In the cra-rxjs-styled-components folder start the app.

yarn start

Open your browser to http://localhost:3000

Live Demo

This demo app gets deployed to Netlify on changes to the main branch.

https://cra-rxjs-styled-components.starter.dev