NHT Marine - Staff Dashboard

This is the Staff Dashboard Website portion of our Internship project. Built with ReactJS, Typescript and Shadcn-UI.

Table of Contents

• Technologies Used
• Required Dependencies
• Installation
• Before You Run
• Development
• Features
• Suggested VS Code Extensions
• Contributors

Technologies Used

• React
• Vite
• TypeScript
• Tailwind CSS
• Redux Toolkit
• TanStack React Query
• Axios
• Day JS

Required Dependencies

• Node.js v22.17 or later: Download Node.js
• Vite: Install with npm or Yarn
• TypeScript

Make sure to have these installed before proceeding with the project setup.

Installation

Follow these steps to set up and run the application locally.

1. Clone the repository:

   git clone https://github.com/YGOhappy123/NHT_Marine_FES.git

2. Navigate to the project directory:

   cd NHT_Marine_FES

3. Install dependencies:

   npm install

Before You Run

Before running the project, make sure to set up the environment variables:

1. Create a .env file:

   In the root directory of your project (at the same level as .env.example), create a .env file.

2. Populate the environment variables:

   Copy the variables from .env.example into .env and replace the placeholder values with your actual configuration.

3. For collaborators:

   If you are a collaborator on this project, please contact the project owner to obtain the values for the environment variables.

Development

To start the development server, use:

npm run dev

This will start the Vite development server

You can view the app by visiting http://localhost:3000 in your browser.

Features

• Fast development⚡with Vite's dev server.
• TypeScript 🛠 for strong typing and better developer experience.
• Hot Module Replacement 🔄 for instant updates during development.
• Optimized production build 📦 with Vite's build system.
• Styled with Tailwind CSS 🎨 for a modern, responsive design.
• State management with Redux Toolkit 🛠 for efficient state management.
• Data fetching with TanStack React Query 🔄 for powerful server state management.
• HTTP requests with Axios 🌐 for easy API integration.
• Date manipulation with Day.js 📅 for handling dates effectively.

Suggested VS Code Extensions

Extension	Publisher	Required?	Supported features
Prettier - Code formatter	Prettier	Yes	Code formatting
Auto Rename Tag	Jun Han	No	Auto rename paired HTML/XML tag
Code Spell Checker	Street Side Software	No	Spelling checker for source code
ES7+ React/Redux/React-Native snippets	dsznajder	No	Code suggestions and snippets for React JS/TS
Multiple cursor case preserve	Cardinal90	No	Preserves case when editing with multiple cursors
Tailwind CSS IntelliSense	Tailwind Labs	No	Code suggestions for Tailwind CSS
TPretty TypeScript Errors	yoavbls	No	Make TypeScript errors prettier and more human-readable in VSCode

Contributors

Thanks to the following people for contributing to this project ✨:

YGOhappy123

DinhToanIT2003

Nguyen1609