Binabh/react-ts-starter-kit

React-redux starter kit using typescript and tailwindcss.

React Typescript Starter Kit

Quick start

0. Fork the repo
1. Clone repo using git clone https://github.com/<github-username>/react-ts-starter-kit.git
2. Move to the project directory: cd react-ts-starter-kit.
   
3. Run npm i in order to install dependencies.
   
4. Create new file in root directory named .env and add following lines:
   

TITLE = "React Typescript Starter Kit"

5. Now you can run npm start to see the app at http://localhost:8080

Folder Structure

  -- src/
    -- @types/       -->  for custom typecsript types
    -- assets/       -->  for static assets and styles
    -- components/   -->  for components
        -- common/   -->  for shared components
    -- routes/       -->  for all routes
    -- sagas/        -->  for redux sagas
    -- services/     -->  for api requests
    -- slices/       -->  for slices created using @reduxjs/toolkit
    -- utils/        -->  for utility / helper functions
    -- views/        -->  for page specific/container components

Quick Guide/Links

This project is built on React Js using Typescript

Here are list of libraries being used in this project:

• Redux for state management
• Redux Saga for managing side-effect tasks
• Axios for making api calls
• Redux Toolkit for consise redux code
• React Router for routing
• Tailwind CSS for styling

Formatting and linting

• Aribnb style Guide for rules, standards and conventions
• Prettier for code formatting
• ESLint for linting

Bundling and compiling

• Babel for transpiling
• Webpack for bundling

Testing

• React testing library for rendering react components in tests
• Jest for testing

Other useful commands

npm run lint to fix automatically fixable lint errors

npm run build to build the project for production use

npm run test to run the tests

Contributing to the project

1. All kinds of changes are welcome.

For help on Git commands visit here

For help on GitHub visit here

Notes:

1. This starter kit is inspired by this react-starter-kit.

2. Please follow the naming and folder structure conventions while contributing to the project.

Useful Tools

React Dev tools

• Firefox
• Chrome

Redux Dev tools

• Firefox
• Chrome

VS Code Extensions

• Prettier