Javascript/React/Next.js/Ethereum

Question 1

What are the features of React?

Answer 1

1.JSX
2.Components
3.Virtual DOM: React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, virtual DOM changes only that object in the real DOM, rather than updating all the objects.
4.One-way data-binding
5.High performance

Question 2

What is JSX?

Answer 2

JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

Question 3

Can web browsers read JSX directly?

Answer 3

Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object
For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel

Question 4

What is the virtual DOM?

Answer 4

DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects. React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects. The following are some of the most frequently asked react interview questions.

Question 5

Why use React instead of other frameworks, like Angular?

Answer 5

Easy creation of dynamic applications
Improved performance
Reusable components
Unidirectional data flow
Dedicated tools for easy debugging

Question 6

What is the difference between the ES6 and ES5 standards?

Answer 6

class components instead of var, import instead of require

Question 7

How to create a react app?

Answer 7

Install Node JS, npm install create-react-app

Question 8

What is an event in React?

Answer 8

An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc.

React events are named using camelCase, rather than lowercase in HTML.
With JSX, you pass a function as the event handler, rather than a string in HTML.
<Button onPress={lightItUp} />

Question 9

How do you create an event in React?

Answer 9

alert(“hello this is a popup alert”)

Question 10

What are synthetic events in React?

Answer 10

Synthetic events combine the response of different browser’s native events into one API, ensuring that the events are consistent across different browsers.
The application is consistent regardless of the browser it is running in. Here, preventDefault is a synthetic event.

Question 11

Why is there a need for using keys in Lists?

Answer 11

Keys are very important in lists for the following reasons:

A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists
It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered

Question 12

What are forms in React?

Answer 12

React employs forms to enable users to interact with web applications.

Using forms, users can interact with the application and enter the required information whenever needed. Form contain certain elements, such as text fields, buttons, checkboxes, radio buttons, etc
Forms are used for many different tasks such as user authentication, searching, filtering, indexing, etc

Question 13

What is an arrow function and how is it used?

Answer 13

An arrow function is a short way of writing a function to React.
It is unnecessary to bind ‘this’ inside the constructor when using an arrow function. This prevents bugs caused by the use of ‘this’ in React callbacks.

Question 14

What are the components in React?

Answer 14

Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. It splits the user interface into independent, reusable parts that can be processed separately.

There are two types of components in React:Functional Components: These types of components have no state of their own and only contain render methods, and therefore are also called stateless components. They may derive data from other components as props (properties).

Class Components: These types of components can hold and manage their own state and have a separate render method to return JSX on the screen. They are also called Stateful components as they can have a state.

Question 15

What is State In React?

Answer 15

The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.
The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.

Question 16

How do you implement state?

Answer 16

Use use state in a component, use the context api, create a provider, use a state manager services, use local storage

Question 17

What are props in React?

Answer 17

Props are short for Properties. It is a React built-in object that stores the value of attributes of a tag and works similarly to HTML attributes.
Props provide a way to pass data from one component to another component. Props are passed to the component in the same way as arguments are passed in a function.

Question 18

How do you pass props between components?

Answer 18

call the variable of props.variable

Question 19

What is a higher-order component in React?

Answer 19

A higher-order component acts as a container for other components. This helps to keep components simple and enables re-usability. They are generally used when multiple components have to use a common logic.

Question 20

Explain the lifecycle methods of components

Answer 20

getInitialState(): This is executed before the creation of the component.
componentDidMount(): Is executed when the component gets rendered and placed on the DOM.
shouldComponentUpdate(): Is invoked when a component determines changes to the DOM and returns a “true” or “false” value based on certain conditions.
componentDidUpdate(): Is invoked immediately after rendering takes place.
componentWillUnmount(): Is invoked immediately before a component is destroyed and unmounted permanently.

Question 21

State Managers

Answer 21

Zustand, Redux, Etc

Question 22

Tell me about yourself

Answer 22

I am a JavaScript Developer for Just Add Meta, we create web2 and web3 solutions for our clients. We build web apps, nft sites, landing pages, event sites, ecommerce sites and etc. I work with React, Next.Js and Ethereum tooling. Before this role I was on the developer relations team for alchemy, web3 university I enjoyed helping developers there and building tutorials and working with alchemy tooling. Previous to that role I was a python developer for and education company. I have participated in 2 ETH Global Hackathons.

Question 23

Why do you want to work at ETH Global

Answer 23

I am a huge fan of ethereum and the goal of ethereum. Permisionless finance, open and transparent finance, soveriegn finance. I really look at ETH Global as an excellent organization in the space and one that is extremely professional and seems to be true to the vision of ethereum.

Question 24

Can you explain what Next.js is and why would you choose it over other frameworks like Gatsby or Create React App?

Answer 24

Next.js is a React-based framework for server-rendered or statically-exported JavaScript applications. It simplifies the process of building universal or isomorphic apps, which can run both on client and server side.

The key advantage of Next.js over Gatsby or Create React App lies in its versatility. While Gatsby is primarily used for static site generation and Create React App for single-page applications, Next.js supports both these use cases along with server-side rendering. This flexibility allows developers to choose the best approach based on their specific needs.

Moreover, Next.js provides automatic code splitting, simple page routing, built-in CSS support, and hot module replacement out-of-the-box. These features enhance developer experience and productivity. Additionally, it has an active community and strong corporate backing from Vercel, ensuring regular updates and robustness.

Question 25

How does server-side rendering work in Next.js and why is it beneficial?

Answer 25

Next.js uses server-side rendering (SSR) to generate HTML pages at request time, rather than at build time. This is achieved by using the getServerSideProps function in your page components. When a request is made, Next.js runs this function on the server and passes the returned data as props to your component.

The primary benefit of SSR is improved performance, particularly for users with slow internet connections or devices. Since the server sends a fully rendered page to the client, the browser can start displaying content faster.

Another advantage is better SEO. Search engines can crawl and index server-rendered pages more effectively because they receive complete HTML content instead of placeholders that require JavaScript execution.

Question 26

How does static site generation differ from server-side rendering, and when would you choose one over the other?

Answer 26

Static Site Generation (SSG) and Server-Side Rendering (SSR) are two methods used in Next.js for rendering pages. SSG pre-renders a page at build time, creating static HTML files served to users, while SSR renders the page on each request at runtime.

The key difference lies in when the HTML is generated. With SSG, it’s during build time, resulting in faster delivery but less dynamic content. Conversely, SSR generates HTML on every request, allowing more dynamism but slower performance due to server load.

Choosing between SSG and SSR depends on your application needs. For sites with largely static content that doesn’t change often, like blogs or documentation sites, SSG is ideal as it offers better performance and SEO benefits. However, for applications requiring real-time data or user-specific content, such as e-commerce sites or dashboards, SSR would be more suitable as it allows dynamic rendering of content based on user interactions or updates.

Question 27

What are the key differences between Next.js and traditional React.js?

Answer 27

Next.js and React.js are both JavaScript libraries, but they differ in several key ways. Next.js is a framework built on top of React.js that provides additional features not available in the base library.

One significant difference is server-side rendering (SSR). While traditional React.js operates solely on the client side, Next.js enables SSR, which can improve performance and SEO by delivering fully rendered pages to the browser.

Another distinction is routing. In React.js, you need third-party libraries like ‘react-router’ for navigation between pages. However, Next.js has an in-built file-system based router which simplifies page creation and navigation.

Next.js also supports static site generation (SSG), allowing developers to pre-render pages at build time, unlike React.js where every page is rendered at runtime.

Lastly, Next.js offers automatic code splitting, meaning only necessary code is loaded per page, enhancing application speed. This feature isn’t inherent in React.js and requires manual configuration.

Question 28

How would you handle routing in Next.js? Can you explain how dynamic routing works in Next.js?

Answer 28

Next.js uses a file-based routing system where each page in the ‘pages’ directory corresponds to a route. For example, if you create a file named ‘about.js’, it will be accessible at ‘/about’.

Dynamic routes are handled by creating files or directories with square brackets. If you have a file named ‘[id].js’ in your ‘pages/posts’ directory, it will match any route like ‘/posts/1’ or ‘/posts/hello-world’. The part inside the brackets is a dynamic segment and can be accessed within your component using the ‘useRouter’ hook from ‘next/router’.

For nested dynamic routes, you can use folders. A file structure like ‘pages/posts/[postId]/[commentId].js’ would match routes like ‘/posts/123/comment/456’. Again, these dynamic segments can be accessed via the ‘useRouter’ hook.

To navigate between pages, Next.js provides the ‘Link’ component from ‘next/link’. This allows for client-side navigation between your pages, improving performance as only the necessary data is fetched when navigating to a new page.

Question 29

How would you manage global state in a Next.js application?

Answer 29

Next.js supports global state management through various libraries like Redux, MobX, or Zustand. However, a simpler approach is using React’s built-in Context API and hooks.

Firstly, create a context with default values using React.createContext(). This will return an object with Provider and Consumer components. The Provider component makes the state available to all child components in the tree.

Secondly, define a custom hook that uses useContext() to access this state. This hook can also include any state-modifying methods you need, utilizing useState() or useReducer() for more complex state logic.

Finally, wrap your application (or part of it) in the Provider component at the top level where you want the state to be accessible. Any child components within this provider can now use the custom hook to access and modify the global state.

Question 30

What does getInitialProps do in Next.js? Can you provide a use case for it?

Answer 30

getInitialProps is a static asynchronous function in Next.js that enables server-side rendering (SSR) for a page. It fetches data required to render the page and returns an object which populates the component’s props.

A use case could be fetching user-specific data from an API before rendering a profile page. For instance, if you have a User Profile page that needs to display information about a specific user, getInitialProps can fetch this data based on the user ID passed through the URL parameters. Here’s a simplified example:

UserProfile.getInitialProps = async ({ query }) => {
const response = await fetch(https://api.example.com/user/${query.id});
const userData = await response.json();
return { userData };
};
In this code, getInitialProps uses the ‘id’ parameter from the URL to make a request to an API endpoint and retrieve the relevant user data. This data is then returned as an object, which becomes the UserProfile component’s props, allowing the user’s details to be rendered server-side.

Question 31

How would you approach optimizing a Next.js application for better performance?

Answer 31

To optimize a Next.js application for better performance, I would first implement server-side rendering (SSR) to improve the initial page load time. This is because SSR allows the browser to start displaying the markup while JavaScript bundles are still loading.

Next, I would use static site generation (SSG) where possible. SSG pre-renders pages at build time which can be cached and served by CDN, reducing the need for server computation and speeding up delivery.

I’d also leverage incremental static regeneration (ISR), a feature unique to Next.js that enables developers to update static content without needing a full rebuild of the site.

Code-splitting is another technique I’d employ. By splitting code into various bundles that are loaded on demand, it reduces the amount of code needed for initial render.

Lastly, I would ensure all images are optimized using Next.js Image component which provides automatic optimization.

Question 32

Can you explain what ‘next/link’ does and why it’s important in Next.js projects?

Answer 32

‘next/link’ is a built-in component in Next.js that allows client-side transitions between routes. It’s crucial for two main reasons: performance and user experience. By enabling client-side routing, ‘next/link’ reduces the load on the server and speeds up page loading times, enhancing overall application performance. This is because it only fetches the necessary data instead of reloading the entire page when navigating to different parts of the website. For user experience, this results in smoother transitions and less waiting time, providing a more seamless browsing experience.

Question 33

What is the purpose of _app.js and _document.js in Next.js?

Answer 33

_app.js is a custom App component in Next.js that allows for global CSS imports and layout persistence across route changes. It’s also used to override the default method that initializes pages, enabling shared components or state between all pages.

_document.js, on the other hand, is a custom Document component that can be used to augment your application’s and tags. This is necessary because Next.js pages skip the definition of the surrounding document’s markup. _document.js is only rendered in the server, event handlers like onClick won’t work here.

Question 34

How would you implement authentication in a Next.js application?

Answer 34

JWT Authentication, for the most part we use supabase

Question 35

How do you deploy a Next.js application? Can you describe the process?

Answer 35

Next.js applications can be deployed using Vercel, the platform built by the creators of Next.js. The process involves a few steps:

1. Create a new project on Vercel and import your GitHub, GitLab or Bitbucket repository.
2. Configure the project settings. For a Next.js app, you don’t need to change anything as Vercel automatically detects it’s a Next.js application.
3. Deploy the application. Vercel will install dependencies, build the project, and deploy it.

For continuous deployment, push changes to the master branch. Vercel rebuilds and deploys the updated version.

Alternatively, use other platforms like Heroku or Netlify. However, these require additional configuration such as setting up buildpacks for Heroku or configuring build commands for Netlify.

Question 36

How would you approach building a large scale, high-performance e-commerce platform using Next.js?

Answer 36

To build a large-scale, high-performance e-commerce platform using Next.js, I would start by setting up the project structure with pages and components. For performance optimization, server-side rendering (SSR) is crucial in Next.js as it allows for faster page loads and SEO benefits.

I’d use dynamic routing to handle product pages and categories dynamically. To manage state, Redux or Context API can be used. For data fetching, Next.js has built-in functions like getStaticProps or getServerSideProps which are ideal for an e-commerce site where data changes frequently.

Next.js’s API routes feature will be useful for creating custom backend functionality. For handling payments, integrating a secure payment gateway such as Stripe is essential.

For user authentication, NextAuth.js could be utilized due to its seamless integration with Next.js. Lastly, deploying the application on Vercel, the creators of Next.js, ensures optimal performance and scalability.

Question 37

What is JavaScript?

Answer 37

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.

Question 38

What are JavaScript Data Types?

Answer 38

Number
String
Boolean
Object
Undefined

Question 39

What is the use of isNaN function?

Answer 39

isNan function returns true if the argument is not a number; otherwise, it is false.

Question 40

What are undeclared and undefined variables?

Answer 40

Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered.

Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

Question 41

What is ‘this’ keyword in JavaScript?

Answer 41

‘This’ keyword refers to the object from where it was called.

Question 42

What is === operator?

Answer 42

=== is called a strict equality operator, which returns true when the two operands have the same value without conversion.

Question 43

Does JavaScript support automatic type conversion?

Answer 43

Yes, JavaScript does support automatic type conversion. It is the common way of type conversion used by JavaScript developers

Question 44

Difference between “==” and “===”?

Answer 44

“==” checks only for equality in value, whereas “===” is a stricter equality test and returns false if either the value or the type of the two variables are different.

Question 45

What do you mean by NULL in Javascript?

Answer 45

The NULL value is used to represent no value or no object. It implies no object or null string, no valid boolean value, no number, and no array object.

Question 46

What is an undefined value in JavaScript?

Answer 46

Variable used in the code doesn’t exist
Variable is not assigned to any value
Property does not exist.

Question 47

What are all the types of Pop up boxes available in JavaScript?

Answer 47

Alert, Confirm, Prompt

Question 48

How do your career aspirations align with our company mission?

Answer 48

I would like to make a name for myself in this industry as a developer, eventually work my way up to cto or a co-founder eventually.

Question 49

What are some of your strengths and weaknesses as a developer?

Answer 49

I can jump into any repository and figure out whats going on and how to get up and running quickly. My weakness is not remembering syntax well and always having to look it up.

Question 50

What do you do outside of work hours to make yourself a better developer?

Answer 50

I am always working on side projects, trying to build new and interesting things to me.

Question 51

How have you previously detected errors that weren’t obvious?

Answer 51

I have come into repositories with tons of errors, just have to figure errors out one by one process of trial and error and looking up and troubleshooting error codes.

Question 52

Do you have experience working in a multidisciplinary team?

Answer 52

I currently work in a multidisciplinary team its me and two other workers, one front end design dev, I am react front end and connecting to the back end.

Question 53

What qualities make you a great developer?

Answer 53

I am a self taught developer with a lot to prove. I work extremely hard and have great communication skills.

Question 54

What programming languages and frameworks are you familiar with?

Answer 54

React, next.js, javascript, solidity, hardhat, vyper, python,

Question 55

What tools do you use to keep track of project requirements?

Answer 55

We use a figma and I have my own excel sheet to keep track of deliverables

Question 56

Can you briefly tell me about some projects you worked on recently and the approach you took from start to finish?

Answer 56

I am working on this automation site from scratch, I started the site up from vercel. I then mapped out each thing I had to do to make the site operational. 1. get a build running, 2. set up enviroment variables, 3. connect supabase auth system, 3. test auth system. 4. start getting the main business logic started. 5.

Question 57

Tell me about a tough development problem you’ve had in the past and how you solved it.

Answer 57

The other day due to compliance laws we could not use an out of the box auth system. We had to rebuild a ui component from scratch using the apis and rebuild a new form with additional compliant components.

Question 58

Describe a time when you experienced a significant project change last minute. How did you handle it and complete the project on time?

Answer 58

I feel like this happens all the time. I usually just have to not go to the gym and crank out a change or work a little bit over the weekend.

Question 59

Describe your ideal environment as a developer.

Answer 59

the ability to get things done on my own and the trust to develop without micromanagement, clear tasks to be completed

Question 60

Describe a conflict you had with a team member and how you resolved it

Answer 60

One of my team members above me sometimes pushes errors to the main branch. As I am the subordinate sometimes I feel I shouldn’t correct him. The other day I reached out to him and let him know my frustrations and explained a git standard

Question 61

what Ethereum technologies do you use

Answer 61

wagmi, thirdweb, connectkit, rainbowkit, hardhat, ethers,