Front-end Fresher/Junior/Middle Interview (with ReactJS)

fe-fresher-junior-middle-interview-reactjs

#fe-fresher-interview (50%)
#fe-junior-interview (40%)
#fe-middle-interview (10%)

#Interview example (Part 3 pick randomly)

ReactJS

• What is ReactJS and why do you use it?
• What is JSX?
• What is Virtual DOM?
• Prop? State?
• Difference between Class component and Function Component?
• What is Lifecycle?
• Form Handling.
• Name all the React Hooks you know
• What is Redux and when do you use it?
• Redux middleware?
• Typescript?
• Make a FilterComponent for Table:
  
  INPUT:
  
  OUTPUT:
  

HTML, CSS Excercise

• Estimate and make the template below: (HTML, CSS)
  
• Estimate and create the component below: (HTMl, CSS, JS)
  

Order Stuffs

• Git flow?
• Design? (Figma, AdobeXD, Sketch…)
• Mock API?
• webpack
• NodeJS, npm, RESTfulsAPI...
• JWT?
• Unit Test?
• Postman, swagger, ...

Interview Example

Part 1: Multiple Choice Questions (MCQs)

Section 1: HTML & CSS (10 Questions)

1. Which of the following is the correct syntax for a self-closing HTML tag?
   1. a) <div></div>
   2. b) <img>
   3. c) <a />
   4. d) <br>
2. What does the CSS z-index property control?
   1. a) Font size
   2. b) The layering of elements
   3. c) Padding
   4. d) Text alignment
3. Which of the following HTML elements is used to create a dropdown list?
   1. a) <select>
   2. b) <input type="dropdown">
   3. c) <textarea>
   4. d) <ul>
4. Which CSS property is used to change the text color of an element?
   1. a) font-color
   2. b) text-color
   3. c) color
   4. d) background-color
5. What is the default value of the position property in CSS?
   1. a) relative
   2. b) absolute
   3. c) static
   4. d) fixed

Section 2: JavaScript (10 Questions)

6. Which of the following is a primitive data type in JavaScript?

   1. a) Array
   2. b) Object
   3. c) String
   4. d) Function

7. What is the output of the following JavaScript code? console.log(typeof null);

   1. a) null
   2. b) object
   3. c) undefined
   4. d) string

8. Which of the following is NOT a valid JavaScript variable name?

   1. a) \_name
   2. b) 2ndName
   3. c) name2
   4. d) $name

9. How do you create a function in JavaScript?

   1. a) function myFunction() {}
   2. b) function:myFunction() {}
   3. c) function = myFunction() {}
   4. d) myFunction function() {}

10. Which method is used to add elements to the end of an array in JavaScript?

    1. a) push()
    2. b) pop()
    3. c) shift()
    4. d) unshift()

Section 3: ReactJS (10 Questions)

11. What is a React component?
    1. a) A function that returns HTML
    2. b) A JavaScript function or class that returns JSX
    3. c) A CSS class
    4. d) An HTML tag
12. Which method in a React class component is used to handle side effects, like fetching data?
    1. a) componentWillMount
    2. b) componentDidUpdate
    3. c) componentDidMount
    4. d) render
13. What is the purpose of the key prop in React?
    1. a) To uniquely identify elements in a list
    2. b) To trigger re-renders
    3. c) To handle events
    4. d) To style components
14. Which of the following hooks is used to manage state in a functional component?
    1. a) useState
    2. b) useEffect
    3. c) useRef
    4. d) useContext
15. What is JSX in React?
    1. a) A syntax extension that looks similar to HTML
    2. b) A CSS preprocessor
    3. c) A JavaScript library
    4. d) A JSON format

Part 2: Essay Questions

Section 1: HTML/CSS

1. Explain the difference between block-level and inline-level elements in HTML. Provide examples of each.
2. Describe the CSS box model. How does the box-sizing property affect element sizing?

Section 2: JavaScript

3. What is the difference between == and === in JavaScript? Provide examples of when to use each.
4. Explain closures in JavaScript. How do they work, and why are they useful? Provide an example.

Section 3: ReactJS

5. Describe the virtual DOM and how it differs from the real DOM. Why is the virtual DOM important in ReactJS?
6. Explain how props and state are used in ReactJS. How do they differ? Provide examples.

Part 3: Hands-On Coding Tasks

Create a Comprehensive ReactJS Application:

Part 1: Build a Weather Forecast Application

• Objective: Develop a ReactJS application that displays weather information based on user input.
• Requirements:
  • Component Structure: Break down the application into multiple components (e.g., WeatherSearch, WeatherDisplay, WeatherDetails).
  • State Management: Use useState and useEffect hooks to manage the application’s state.
  • Features:
    • Allow users to search for a city’s weather.
    • Fetch weather data from a public API (e.g., OpenWeatherMap API).
    • Display current weather information (temperature, humidity, wind speed, etc.).
    • Show a 5-day weather forecast.
    • Persist the last searched city using local storage.
  • Styling: Use CSS or a CSS-in-JS library (e.g., styled-components) to style the application.
  • Bonus: Implement a dark/light mode toggle.

Part 2: Create a Recipe Finder Application

• Objective: Build a ReactJS application that helps users find and save recipes.
• Requirements:
  • Recipe Search: Allow users to search for recipes by ingredient or recipe name.
  • API Integration: Fetch recipe data from a public API (e.g., Edamam Recipe API).
  • Recipe Display: Display a list of recipes with images, ingredients, and preparation instructions.
  • Favorite Recipes: Implement functionality to save favorite recipes to local storage.
  • Recipe Details: Create a detailed view for each recipe that includes nutritional information.
  • Responsive Design: Ensure the application is fully responsive on different devices.

Part 3: Implement a Blogging Platform

• Objective: Create a basic blogging platform where users can create, edit, and delete posts.
• Requirements:
  • Component Structure: Organize the application into components such as BlogList, BlogPost, CreatePost, and EditPost.
  • State Management: Use useState and useReducer hooks for managing posts.
  • Features:
    • Users can create new blog posts with a title, content, and tags.
    • Posts are displayed in a list format, with options to edit or delete each post.
    • Implement a search function to filter posts by title or tags.
    • Use local storage to persist blog posts.
  • Routing: Set up routing to navigate between different sections of the application (e.g., Home, Create Post, Edit Post).
  • Form Validation: Add form validation to ensure that posts contain a title and content.

Part 4: E-commerce Product Catalog

• Objective: Develop a product catalog for a fictional e-commerce website.
• Requirements:
  • Product Display: Fetch and display a list of products from a public API (e.g., Fake Store API).
  • Product Details: Create a detailed view for each product, displaying information like price, description, and reviews.
  • Search and Filter: Implement search and filter options to allow users to find products by category, price range, or rating.
  • Shopping Cart: Create a simple shopping cart that allows users to add and remove products, and calculate the total price.
  • Routing: Use React Router to navigate between the product list, product details, and cart views.
  • Bonus: Implement pagination for the product list.