This React.js Stepper Application, developed with TypeScript, Tailwind CSS, PostgreSQL, Prisma, Node.js, and Express.js, offers a seamless form-filling experience. Despite React's deprecation of Vite, its speed and features remain popular. The app includes email, phone, card validation, Prisma ORM integration, and CORS implementation.
-
Stepper Form: The application features a multi-step form, allowing users to input various types of information in separate sections.
-
Validations: Includes validations for email, phone number, card number, CVV, and expiry date to ensure accurate data entry.
-
Database Integration: Utilizes PostgreSQL database integration via Prisma for Object-Relational Mapping (ORM) to manage and persist data.
-
Responsive Design: Employs Tailwind CSS to create a responsive and mobile-friendly interface, ensuring optimal user experience across devices.
-
React Hooks: Leverages React hooks such as useState, useContext, and useEffect for efficient state management and side effect handling.
-
CORS Implementation: Implements CORS (Cross-Origin Resource Sharing) for securely handling requests from different origins, enhancing security and compatibility.
-
Render: Render is utilized for backend deployment, providing a reliable and scalable infrastructure to handle application requests efficiently.
-
Netlify: The frontend of the project is deployed on Netlify.
🚀 Live Deployed Link: https://paymentstepper.netlify.app/
stepper_form.mp4
To run the project locally, follow these steps:
- Clone the repository:
https://github.com/parthratra59/stepper.git- Navigate to the project directory:
cd <projectdictonary>- Install the required dependencies for both the frontend and backend.:
npm install-
Configure your environment variables, including API keys and database connections.
-
Start the project locally (Run the frontend and backend servers):
# For the frontend
npm run dev
# For the backend
cd stepper_server
npm run dev