https://github.com/michal-wrzosek/challenge-app
Challenge App - Demo SPA connected to REST API with JWT Auth
https://github.com/michal-wrzosek/challenge-app
create-react-app hooks observable react react-hooks rest-api styled-components subjects typescript
Last synced: about 2 months ago
JSON representation
Challenge App - Demo SPA connected to REST API with JWT Auth
- Host: GitHub
- URL: https://github.com/michal-wrzosek/challenge-app
- Owner: michal-wrzosek
- Created: 2019-05-22T09:07:01.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-25T14:03:22.000Z (almost 6 years ago)
- Last Synced: 2025-01-21T20:48:42.430Z (3 months ago)
- Topics: create-react-app, hooks, observable, react, react-hooks, rest-api, styled-components, subjects, typescript
- Language: TypeScript
- Size: 3.12 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Challenge App
Demo SPA connected to [REST API](https://github.com/michal-wrzosek/challenge-api) with JWT Auth
**Table of contents:**
- [Deployment](#deployment)
- [CI - Travis](#continuous_integration)
- [Tech stack](#tech_stack)
- [Architecture design](#architecture-design)
## Deployment
This app is deployed via Heroku. Master branch is always automatically deployed to "staging". Then you can manually promote "staging" to "production". Every PR triggers "Review Apps" to start deploying.
**Production:**
https://challenge-app-spa-production.herokuapp.com/
**Staging:**
https://challenge-app-spa-staging.herokuapp.com/
**Review apps**: Created ad hoc:
`https://challenge-app-spa-staging-pr-.herokuapp.com`
## Continuous Integration
Every PR triggers Travis that runs unit tests to ensure that only healthy code will be deployed to master.
https://travis-ci.com/michal-wrzosek/challenge-app
## Tech Stack
- Create React App v3
- Typescript
- eslint + prettier
- jest + enzyme
- styled components + styled system
- React hooks + Subjects/Observables (reactive programming)
- no Redux
- Heroku + mars/create-react-app buildpack
- Travis CI
- GitHub
- husky for git hooks
- VSCode (suggested IDE)
## Architecture design
This app was build based on CRA v3 (not ejected) with Typescript. State management is done by using React Context, React Hooks and Subject class from reactive programming approach (kind of RxJS). I intentionally didn't used redux since there is a new trend to move away from redux.
For visuals I chose Styled Components and Styled System.
All dumb components are within /components folder and the rest is stored in /containers. I covered all components with simple unit tests.
I set the repository to allow merging to master only if all tests passed through Travis CI.
Authorization token is stored in user's local storage. If token is invalid app asks user to login again.
---
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
### `npm test`