/task-manager

Task Manager App by ReactJS, Typescript, Redux Toolkit and tailwindCSS

Primary LanguageTypeScript

Task Manager

Task Manager App by ReactJS, Typescript, Redux Toolkit and tailwindCSS

Note: you should run the backend server (mentioned in Run The Project section)

Dev Features:

  1. React.js
  2. Typescript (Type, Models, Generics, etc...)
  3. Tailwind CSS
  4. Redux Toolkit
  5. Axios Integration
  6. Errors
  7. Loading
  8. Caching
  9. Folder Structuring
  10. etc...

Run The Project

Run Frontend Website

  1. Run npm i to install all the project dependencies
  2. Run npm run dev to run the project
  3. You will find a link for the running website appears in the console, often it is: http://localhost:5173/

Run Backend Server to Serve JSON Database

  1. Open the Folder called backend-json-server OR use cd command to go to the directory
  2. Run npm run start
  3. You will find a link for the running server appears in the console, it is: http://localhost:3001/

Screenshots

screencapture-localhost-5173-2024-06-14-19_44_56 screencapture-localhost-5173-tasks-2024-06-14-19_45_07 screencapture-localhost-5173-about-us-2024-06-14-19_45_17 screencapture-localhost-5173-contact-2024-06-14-19_45_22

============================================================================================

React + TypeScript + Vite (Extra Info)

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

  • Configure the top-level parserOptions property like this:
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}
  • Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
  • Optionally add plugin:@typescript-eslint/stylistic-type-checked
  • Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list