https://github.com/sinavahabi/ashpazsho-mini-project

Ashpazsho Web Application
https://github.com/sinavahabi/ashpazsho-mini-project

api bootstrap5 css3 error-handling flexbox form-validation git html5 javascript json json-server react react-bootstrap react-components react-hooks react-router-dom responsive-design responsive-website sass typescript

Last synced: 3 months ago
JSON representation

Ashpazsho Web Application

• Host: GitHub
• URL: https://github.com/sinavahabi/ashpazsho-mini-project
• Owner: sinavahabi
• Created: 2023-09-22T11:29:13.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-21T16:41:04.000Z (about 2 years ago)
• Last Synced: 2025-03-02T04:43:45.143Z (over 1 year ago)
• Topics: api, bootstrap5, css3, error-handling, flexbox, form-validation, git, html5, javascript, json, json-server, react, react-bootstrap, react-components, react-hooks, react-router-dom, responsive-design, responsive-website, sass, typescript
• Language: TypeScript
• Homepage:
• Size: 14.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## Ashpazsho Application

***Technologies***: React TS, TypeScript, HTML5, CSS3, Bootstrap5, Sass

***Topics***: react-components, typescript, json-server, react-hooks, react-router-dom, fontawesome5, sass, html5, css3, error-handling, user-management, grid-layout, webapi, form-validation, responsive-website, responsive-design, flexbox, bootstrap5, jalali-date, git

## Instructions

**Create React App**

    npx create-react-app react-app --template typescript

    

**Setup TypeScript Config File**

*tsconfig.json*

    {

      "compilerOptions": {

        "target": "ES2020",

        "lib": [

          "dom",

          "dom.iterable",

          "esnext"

        ],

        "allowJs": true,

        "skipLibCheck": true,

        "esModuleInterop": true,

        "allowSyntheticDefaultImports": true,

        "strict": true,

        "forceConsistentCasingInFileNames": true,

        "noFallthroughCasesInSwitch": true,

        "module": "esnext",

        "moduleResolution": "node",

        "resolveJsonModule": true,

        "isolatedModules": true,

        "noEmit": true,

        "jsx": "react-jsx"

      },

      "include": [

        "src"

      ]

    }

**Run Development Server**

    npm run start

**Install React Router Dom V6**

    npm install react-router-dom

**Install JSON-Server**

    npm install json-server

    

*package.json*

> "server-recipes": "json-server --watch database/recipes.json --port 5000",

> "server-users": "json-server --watch database/users.json --port 5001"

**Install Sass**

    npm install sass

**Install Font Awesome 5**

    npm i --save @fortawesome/free-solid-svg-icons

    npm i --save @fortawesome/free-regular-svg-icons

    npm i --save @fortawesome/free-brands-svg-icons

**Install Bootstrap**

    npm install react-bootstrap bootstrap

**Setup Bootstrap**

*index.tsx*

    import "bootstrap/dist/js/bootstrap"

    import "bootstrap/dist/css/bootstrap.rtl.min.css"