This is a Vite-React-TS application that allows users to register for a new game in Space Traders by submitting a symbol and selecting a faction. The app interacts directly with the Space Traders API to handle user registration and token management.
-
User registration with a symbol and faction selection.
-
Error Handling: Displays success or error message/alert based on registration status.
-
Loading: Manages loading states while submitting.
-
Validation: Validates symbol length min 3 and max 14
-
Token Management: Stores API token in local storage for future requests using useEffect hook.
-
Resets also removes token from local storage
-
Form Handling: Handles form changes and submissions using the useCallback hook
-
Responsive design with Bootstrap for a user-friendly experience.
-
Maintains flow of project using version control system Git-Github
App link (https://monikas5.github.io/NewGame/)
- React
- TypeScript
- Bootstrap - for styling the app
- Git - for tracking changes in source code
- GitHub - for hosting Git repositories
- Fetch API - for making HTTP requests
- Postman - for API testing
npm create vite@latest
npm install
npm ci
npm install --save-dev @vitejs/plugin-react-swc
npm install bootstrap
npm install react-router-dom
npm install @types/react-dom --save-dev
In main.tsx (for Bootstrap)
import 'bootstrap/dist/css/bootstrap.min.css'
to run the app
npm run dev
Steps:
-
In
vit.config.ts
- addbase: '/NewGame/',
-
npm install gh-pages --save-dev
-
In
package.json
- in scripts"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
-
npm run deploy