This project is a modern web application featuring a complete and responsive authentication flow, including Sign Up, Sign In, and Account Settings pages. It is built with React.js and styled with Tailwind CSS, following a mobile-first and component-based approach.
- Responsive Design: Looks great on all devices, from mobile phones to desktops.
- Shared Layout: A consistent layout for authentication pages (
/sign-in,/sign-up). - Reusable Components: Modular and reusable form components for inputs and buttons.
- Modern Tech Stack: Built with Vite, React, and the latest Tailwind CSS v4.
- CSS-first Theming: Custom theme colors are defined directly in the CSS, leveraging the power of Tailwind CSS v4.
- Vite: A next-generation frontend tooling that provides a faster and leaner development experience.
- React: A JavaScript library for building user interfaces.
- React Router: Declarative routing for React.js applications.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Clone the repository:
git clone https://github.com/vanshsuri07/Dev-Task
- Navigate to the project directory:
cd <project-directory>
- Install the dependencies:
npm install
To start the development server, run the following command:
npm run devThis will start the application on http://localhost:5173.
The project follows a standard React application structure, with a focus on modularity and separation of concerns.
.
├── public/
├── src/
│ ├── components/
│ │ └── form/
│ │ ├── Button.jsx
│ │ └── Input.jsx
│ ├── layouts/
│ │ └── AuthLayout.jsx
│ ├── pages/
│ │ ├── AccountSettings.jsx
│ │ ├── SignIn.jsx
│ │ ├── SignUp.jsx
│ │ └── Welcome.jsx
│ ├── assets/
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
└── vite.config.js
