This frontend is a demo race homepage and registration form. Below is a list of steps in the process, features, tech, and other resources that I used to create it.
- created vite + react app using npm create vite@latest race-registration-app
- selected react framework
- opened race-registration-app directory
- updated default port to 3001 in vite.config.js
- installed tailwindcss with npm i -D tailwindcss postcss autoprefixer
- created and configured tailwind and postcss .config.js with npx tailwindcss init -p
- created navigation component
- installed react router with npm i react-router-dom
- created components for about section, testimonial cards, and buttons
- added mapping to cards component for testimonial cards data display
- created footer component and displayed register and login buttons
- implemented react router and added layout, outlet, and screens - helped by docs and code from this tutorial
- added Signin.jsx and Form.jsx components to login and register screens
- added RegDetails.jsx component and submission screen for displaying registration details
- installed axios with npm i axios
- added focus upon load to form component - helped by code from this tutorial series