Welcome to our Next.js application! Below you'll find instructions on how to set up and use the application.
This application is designed to accomplish the following tasks:
- Create a Next.js application from scratch and implement custom authentication (login).
- Implement user authentication using next-auth with static credentials.
- Create a session based on authentication.
- Implement a multistep form for creating ads, following the given UI design.
- Use Chakra UI for UI development.
- Ensure responsiveness.
- Validate user inputs.
- Use TypeScript for the codebase.
- Use ESLint for linting.
- Implement session expiration after 1 hour.
- Have only two pages: Login Page and Create Ad Page.
Make sure you have Node.js and npm installed on your system.
-
Clone this repository:
git clone <repository-url>
-
Navigate to the project directory:
cd <project-directory>
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Access the application in your browser:
http://localhost:3000
- Login Page: Use the provided static credentials (
[email protected]
andadmin
) to log in. Validate user inputs. - Create Ad Page: After logging in, you'll be directed to the Create Ad Page. Follow the multistep form as described below:
- Step 1: Basic Information
- Step 2: Upload Images (up to 5 images, each not more than 2MB)
- Step 3: Review all steps. Ensure validation for all steps.
- Session Expiration: The session will expire after 1 hour of inactivity.
- Single Page Application: The application follows a single-page architecture using Next.js routing.
- Codebase: TypeScript is used for the codebase, and ESLint is configured for linting.