Baseel Assessment : Tasks:
Task 1: Create a Next.js Application Create a new Next.js application with the following requirements:
- Setup a basic Next.js project structure.Create two pages: Home and About.Add a navigation menu to navigate between the Home and About pages.
Task 2: Fetch Data from an API Integrate API data fetching into your Next.js application:
- Fetch and display a list of users from the JSONPlaceholder API (https://jsonplaceholder.typicode.com/users).Display the user's name, email, and website in a styled list on the Home page.Ensure that the data is fetched and displayed server-side.
Task 3: Dynamic Routing Implement dynamic routing in your Next.js application:
- Create a dynamic route for individual user profiles.Clicking on a user's name from the user list should navigate to their profile page.Display the user's details (name, email, website) on their profile page.
Task 4: Form Submission Implement a simple form submission feature:
- Create a contact form with fields for name, email, and message on the About page.Implement client-side form validation to ensure all fields are filled out correctly.Upon form submission, log the form data to the console.
Task 5: Styling and Layout Enhance the visual appearance of your Next.js application:
- Use CSS modules or styled-components to style your components.Ensure that the application is responsive and looks good on both desktop and mobile devices.
Used:
- Next js
- TypeScript
- Eslint
- Styled Components
- React-toastify
Before start the project run below the command on Development in root folder:
npm install
npm run dev
On productions
npm run build
npm start
Eslint
npm lint
Live URL : https://baseel-nextjs-assessment-1gaj.vercel.app/