Sample Project Based on React, Redux and Typescript

This is a sample project and starter based on reactJs, Redux, React-router (v5) and Typescript.

see the Demo.

After run this project you can search your location and know about current temperature.

This project use https://metaweather.com/api/ to provide data and for handle cors use https://cors-anywhere.herokuapp.com service.

Project structure

.
├── .storybook                           # Storybook configuration 
├── cypress                              # Cypress E2E testing folders 
├── dist                                 # Compiled files (index.html & assets)
├── src                                  # Source files (alternatively `lib` or `app`)
│   ├── components                       # Global Components   
|   ├── _test_                           # Test folder (jest)
│   │   ├── CityBox                      # City card component
│   │   │   ├── style.less               # component styles
│   │   │   └── index.tsx                # source of `dashboard` component 
│   │   .         
│   │                                           
│   ├── containers                       # Main containers (react components with route)
│   │   ├── Search                       # Search location component
│   │   │   ├── style.les                # component styles
│   │   │   └── index.ts                 # source of component 
│   │   .         
│   │   .                            
│   │   ├── app.less                     # Main application styles
│   │   └── app.ts                       # Main application router
│   │
│   ├── lib                              # Libraries and helper classes 
│   ├── redux                            # Redux store, actions and reducers
│   ├── stories                          # Stories of component or containers
│   ├── theme                            # Main style and Less variables
│   └── translation                      # Translations files and utilities
.
.
├── tsconfig.json
├── webpack.config.js
└── README.md

Contains

• Babel 7
• Typescript
• React
• Redux
• React Router
• PWA
• i18next
• Redux DevTools Extension
• Cypress (E2E Test)
• Jest
• Storybook
• Prettier

Use boilerplate

Download tar.gz file or use follow command to start a new project.

npx degit zerob4wl/sample-react-redux-typescript myNewProject

Setup

$ yarn install

Running dev server

$ yarn start

Build

$ yarn build

Test

$ yarn test

Storybook

$ yarn storybook